一、 基础搭建
1. 新建IONIC2项目
ionic start myApp tabs --v2 不加--v2会新建ionic1的项目
2. 运行项目
cd myApp
ionic serve
3. 添加个人信息页
ionic g page myinof
添加页面后运行项目会报错:
imports: [
IonicModule.forChild(Myinfo),
],
解决办法:把此句注释 // IonicModule.forChild(Myinfo),
4. 将个人信息页添加到底部tab栏
A. 在./pages/tabs/tabs.html中添加如下代码
B. 在./pages/app/app.component.ts中添加如下代码
C. 在./pages/app/app.module.ts中添加如下代码
D. 在./pages/tabs/tabs.ts中添加如下代码
ionic2图标集:http://ionicframework.com/docs/ionicons/
E. 运行效果
二、 事件绑定
1. 修改myinfo.html页面,在页面中添加一个按钮事件
<a (click)="dofunction()">登录</a>
在angular2中使用(click)=function()的形式绑定点击事件
2. 修改myinfo.ts文件,在class Myinfo中添加dofunction()
3. 运行效果
三、 登录功能
1. 添加登录页
在pages文件夹内新增auth文件夹,在auth文件夹内新增以下三个文件login.html、login.module.ts、login.ts
login.html:
login.ts:
login.module.ts:
2. 注册login模块
修改app.module.ts,添加login模块的注册信息