Open JerryMissTom opened 6 years ago
其实这篇是写给没有 Angular 开发经验的人写,Angular 涉及的东西很多,不是一篇两篇就可以说清楚的,假如想深入 ionic 开发,一定要会 Angular,有国人翻译的中文文档。需要注意的是,Angular 已经更新到 5.x 版本,而 ionic v3.x 一开始还是基于 Angular 4.x 的,现在已经切换到5.0了,看关于ionic 相关文档或者博客的时候需要注意一下。
Angular
ionic
5.x
ionic v3.x
Angular 4.x
废话不多说,先来看看需要我们写代码的地方。page/home下就是我们的主页相关的代码,也是我们整个APP的入口页。以后创建新的页面,都要写在page这个目录下,这个是项目目录划分的规范。
page/home
现在先将 home.html 和 home.ts 中的代码替换成下面的,接着我会解释。
home.html
home.ts
home.html <ion-header> <ion-navbar> <ion-title> 首页 </ion-title> </ion-navbar> </ion-header> <ion-content> <!--数值绑定--> <p>{{2+3}}</p> <h3>{{title}}</h3> <label> 输入框 <input style="border:1px solid #000000" type="text" [(ngModel)]="title"> </label> <!--*ngIf用法--> <p *ngIf="isShown">看得到我</p> <p *ngIf="!isShown">看不到我</p> <p *ngIf="names.length>0">下面是数组,长度为{{names.length}}</p> <!--*ngFor用法--> <ul> <li *ngFor="let item of names; index as i"> {{ i+item }} </li> </ul> </ion-content>
home.ts import {Component} from '@angular/core'; import {NavController} from 'ionic-angular'; // 装饰器的用法,意思就是将此文件和home.html绑定了 @Component({selector: 'page-home', templateUrl: 'home.html'}) export class HomePage { title : string = ''; // 后面string 表示此变量类型是string isShown : boolean = true; names : string[] = ['张三', '李四', '王二麻子']; constructor(public navCtrl : NavController) {} }
通过带有双花括号{{ }}的插值表达式,可以将变量的值插入在浏览器中,这些都是Angular自动处理的,当这些变量的值发生变化时,Angular就会自动刷新显示。里面还可以运行简单的计算。
{{ }}
通过ngModel可以将input输入框的内容同变量双向绑定,当输入框里的内容发生变化时,变量title的值也会发生变化,反之亦然。
ngModel
input
title
*ngIf 是一个结构性指令,可以通过简单的判断,在DOM中添加或从DOM中移除这个元素,而不是简单的隐藏或者显示。
*ngIf
DOM
*ngFor 是一个重复器指令,它也是结构性指令,可以重复多个条目。index 是一个从0开始的索引,代表当前项目在序列中的顺序。当列表比较大时,trackBy是一个很有用的特性,请大家自己探索,我在这里就不写了。
*ngFor
用户操作界面,从而会触发各种各样的事件,如何在事件触发后处理这些事件呢,在上面的代码中添加下面的代码:
home.html ... <ion-content> ... <button (click)="onChangeTitle()">点击</button> </ion-content>
... export class HomePage { ... onChangeTitle(){ console.log('HomePage'); this.title="Home"; } }
通过双括号()将事件与处理操作进行绑定,用户点击后,会重置变量title的值,input输入框里的值也会变化,也证明了之前提到的数据双向绑定。ngModelChange是input常用的指令,还有其他的命令,大家可以自己去学习。
()
ngModelChange
通过 ionic serve命令运行项目,界面如图所示:
ionic serve
Note:需要注意的是html文件中的ion-header标签及其包裹的内容可以删除,但是ion-content标签一定不可以删除,界面布局写在里面,不然界面会变成黑色。
ion-header
其实这篇是写给没有
Angular
开发经验的人写,Angular
涉及的东西很多,不是一篇两篇就可以说清楚的,假如想深入ionic
开发,一定要会Angular
,有国人翻译的中文文档。需要注意的是,Angular
已经更新到5.x
版本,而ionic v3.x
一开始还是基于Angular 4.x
的,现在已经切换到5.0了,看关于ionic
相关文档或者博客的时候需要注意一下。废话不多说,先来看看需要我们写代码的地方。
page/home
下就是我们的主页相关的代码,也是我们整个APP的入口页。以后创建新的页面,都要写在page这个目录下,这个是项目目录划分的规范。数据绑定
现在先将
home.html
和home.ts
中的代码替换成下面的,接着我会解释。通过带有双花括号
{{ }}
的插值表达式,可以将变量的值插入在浏览器中,这些都是Angular
自动处理的,当这些变量的值发生变化时,Angular
就会自动刷新显示。里面还可以运行简单的计算。通过
ngModel
可以将input
输入框的内容同变量双向绑定,当输入框里的内容发生变化时,变量title
的值也会发生变化,反之亦然。*ngIf
是一个结构性指令,可以通过简单的判断,在DOM
中添加或从DOM
中移除这个元素,而不是简单的隐藏或者显示。*ngFor
是一个重复器指令,它也是结构性指令,可以重复多个条目。index 是一个从0开始的索引,代表当前项目在序列中的顺序。当列表比较大时,trackBy是一个很有用的特性,请大家自己探索,我在这里就不写了。事件绑定
用户操作界面,从而会触发各种各样的事件,如何在事件触发后处理这些事件呢,在上面的代码中添加下面的代码:
通过双括号
()
将事件与处理操作进行绑定,用户点击后,会重置变量title的值,input输入框里的值也会变化,也证明了之前提到的数据双向绑定。ngModelChange
是input
常用的指令,还有其他的命令,大家可以自己去学习。通过
ionic serve
命令运行项目,界面如图所示:Note:需要注意的是html文件中的
ion-header
标签及其包裹的内容可以删除,但是ion-content标签一定不可以删除,界面布局写在里面,不然界面会变成黑色。