一、angular2基本语法
ionic使用了google公司的angular作为前端框架。需要注意的是，由于版本更新，目前angular专指angular2.x以后的版本，而angularJS则是指angular1.x版本。这两个版本属于完全不同的框架，angularJS使用的是javascript语言，而angular则是使用的微软开发的typescript语言。
Angular2.x使用的是es6的标准，官方文档：[https://www.angular.cn/](https://www.angular.cn/)。
如果使用VsCode作为开发编辑器，则需要安装以下几个扩展工具，否则不会出现代码自动补全提示：
image
** a、数据绑定**
单向文本绑定：{{}}；
双向数据绑定：[(ngModel)]=""；
image
html绑定：[innerHTML]
image
** b、ng指令**
** NgClass**
利用NgClass指令，可以同时添加或移除多个类。NgClass绑定一个有形如CSS类名:value的对象，其中value的值是一个布尔型的值，当value值为true时，添加对应类型的模板元素，反之则移除。
<div [ngClass]="{green:false}"></div>
ngClass支持三元运算。
**NgIf**
指定绑定一个布尔型的表达式，当表达式返回true时，可以在DOM树节点上添加一个元素及其子元素，反之被移除
<div *ngIf="isChecked"></div>
同样 ngIf也支持三元运算。
** NgFor**
ngFor用于在页面上循环数据，其默认索引为index。
<ul>
<li *ngFor="let i of citys,let key = index">{{i}}</li>
</ul>
需要注意的是，ngFor只能用来循环数组，如果需要使用ngFor循环对象Object，则可以使用下面的方法：
<div *ngFor="let item of items">
<div *ngFor="let v of getVal(item)">{{v}} == {{item[v]}}</div>
</div>
getVal(item){
return Object.keys(item)
}
**NgSwitch**
ngSwitch主要用于多选项判断。
<div [ngSwitch]="selectedIndex">
<p *ngSwitchCase="1">beijing<p>
<p *ngSwitchDefault>shanghai</p>
<div>
** ngStyle**
ngStyle用于输出css,通常与三元判断绑定。
<div [ngStyle]="{'color':is_login? 'red':'grey'}"></div>
其他非常用指令可参考官方文档或自行百度即可。
**c、事件绑定**
根据官方文档（https://www.angular.cn/guide/template-syntax#event-binding），angular中的事件绑定机制可以响应任何DOM事件。（大雾）
`
<button (click)="doThing()">点击</button>
`
**可以通过$event获取DOM事件对象：**
```
<input (keyup)="input($event)">
input(e:any){
console.log(e.target.value)
}
```
d、箭头函数
ES6标准新增了一种新的函数：Arrow Function（箭头函数）。
标准写法：a=>{x*x} 相当于：
function(a){
return x * x;
}
如果有多个参数：()=>{}
>箭头函数的本质其实就是lambda表达式，主要作用是用于闭包，但与匿名函数不同：
1、函数体内的this对象，绑定定义时所在的对象，而不是使用时所在的对象。
2、不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
3、不可以使用arguments对象，该对象在函数体内不存在。
**第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。**
e、var let const
ES6中新增了 let 方法用于声明变量，具体使用方法与 var 类似，但let声明的变量尽在其所在的代码块内有效。
const 声明一个只读的常量。一旦声明，常量的值就不能改变。与let一样，只在所属代码区块有效。
与var不同，let 和 const 都不可重复声明，且都必须先声明才能使用
** 具体关于ES6的内容，可以参考阮一峰的文章：http://es6.ruanyifeng.com/#docs/function**
二、新建页面
使用命令行cd到根目录后，使用ionic g 命令即可自动生成页面（page）、组件（component）、服务（provider）和管道（pipe）等。
image
系统会自动生成相关文件：
image
**关于scss:**
scss是对css的扩展，因此其本身可以完全兼容css。
** 1、scss变量**
scss里可以申明变量然后调用变量，申明方式与php一致为“$”：
$width: 5em;
直接使用即调用变量：
#main {
width: $width;
}
2、scss嵌套
Scss 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，避免了重复输入选择器：
#main {
width: 97%;
p, div {
font-size: 2em;
a { font-weight: bold; }
}
pre { font-size: 3em; }
}
编译后等于：
#main {width: 97%; }
#main p, #main div { font-size: 2em; }
#main p a, #main div a {font-weight: bold; }
#main pre {font-size: 3em; }
更多scss用法，可参考官方文档：https://www.sass.hk/docs/
TIP:
1、在ionic2.x以上项目中，有时会出现android端样式与ios端不统一，就可以在app.module.ts里统一强制使用ios端样式：
image
2、ionic会为每个页面都单独会生成一个scss文件，打开后会看到 page-你的页面名称{ }，表示这个样式文件只对该页面生效
image
如果你想全局定义css样式，可已在theme文件夹下的variables.scss里定义：
image
也可以将css写在page-market{}的花括号外，同样能全局定义：
image
3、有时当你更改代码并保存后发现无效或者报错，检查代码无误则需要重新运行 ionic serve，这是由于ionic的热更新功能出错导致的
