标签：blog entry resources 设置图 for size ionice tput input
如何初始化ionic项目直接跳过了，以下仅记录常用开发的需求，版本对应的版本是2.3.0的。
初始化项目的结构及简单介绍
1.ionic设置app图标和启动动画
替换icon.png，是设置图标
替换splash.png是启动动画
替换完成后，执行 ionic resources ，会在android和iOS中生成各个尺寸的图标和启动动画
2.新建页面
在src/pages下面新建文件夹，分别新建html，ts,scss。。。
页面写完以后
一定要在src/app/app/app.module.ts文件declarations 和 entryComponents 都要引入。
3.新建管道pipe(ng1中叫作过滤器)
在src下新建pipes文件夹，里面定义管道，
模版如下
1 import { Injectable, Pipe,PipeTransform } from ‘@angular/core‘; 2 3 @Pipe({ 4 name: ‘test‘ //管道名称，运用是就用 这个名字 5 }) 6 @Injectable() 7 export class Test implements PipeTransform{ 8 constructor(){} 9 10 transform(val) { 11 //.处理逻辑区域 12 //. 13 // . 14 return newValue; //返回值 15 } 16 }
一定要在src/app/app/app.module.ts文件declarations 中引入。
3.新建组件
在src 下新建components （组件都定义在此文件夹下）
在src/pages下面新建文件夹，分别新建html，ts,scss。。。
不再赘述，组件的ts文件结构如下
1 import {Component,Input,Output, Renderer } from ‘@angular/core‘; 2 @Component({ 3 selector:‘my-test‘,//组件名称 4 templateUrl:‘my-test‘//通常同级目录下对应的html 5 }) 6 7 export class MyTest { 8 @Input(‘A‘) B :any;//这里A是页面传入使用组件时的属性名 B是组件接收的名称 对应的海游output 9 private cards2 : any; 10 constructor( 11 12 ) { 13 14 } 15 16 ngOnInit() { 17 18 } 19 20 }
最后，一定要在src/app/app/app.module.ts文件declarations 中引入。
4.app.module.ts文件的中的@NgModule预览
1 @NgModule({ 2 declarations: [ 3 MyApp, 4 AboutPage, 5 ContactPage, 6 HomePage, 7 TabsPage 8 //页面，管道，组件都需在此申明 9 ], 10 imports: [ 11 BrowserModule, 12 IonicModule.forRoot(MyApp) 13 ], 14 bootstrap: [IonicApp], 15 entryComponents: [ 16 MyApp, 17 AboutPage, 18 ContactPage, 19 HomePage, 20 TabsPage 21 //只有页面需要在此懒加载 22 ], 23 providers: [ 24 StatusBar, 25 SplashScreen, 26 {provide: ErrorHandler, useClass: IonicErrorHandler} 27 ] 28 })
5.修改进入是首页
app/app.component.ts中修改 rootPage的值即可。
标签：blog entry resources 设置图 for size ionice tput input
原文地址：http://www.cnblogs.com/leonel/p/6942166.html
