Angular：
SPAS：单页应用程序
MVC：
M(model)：数据模型
V(view)：视图
C(controller)：控制器

控制器是用于协调数据模型和视图之间的关系，视图和模型都是相互独立的

为什么要使用MVC？
希望代码重用性更强，降低视图和数据模型的耦合度（粘连成都）

Anguler：
模块：每一个部分都可单独成立一个模块
指令：ng开头的属性，有特殊意义的属性
服务：自定义服务和内置服务
控制器：用于协调数据类型和视图->主要写逻辑的部分
路由：一条线进，多条线出

特征：允许使用MVC的方式书写代码
数据模型的双向绑定

模块：允许创建很多模块，必须有一个入口模块
入口模块与创建其他模块一样，可以通过ng-app指令指定哪一个模块是入口模块

指令：
ng-app：指定入口模块 | 指定angular的有效区域（作用域），一般都写在html或者body中
{{}}：表达式、变量
注意：如果表达式或者指令失效
1、是不是没有写ng-app
2、表达式或者指令没有写在ng-app指定的范围之内
3、ng-app指定的入口模块名字是否错误
4、没有引入JS文件

ng-model：用于指定数据模型，用在输入框中
ng-bind：用于绑定数据模型
ng-repeat：类似于for in 用于遍历数组，这个指令写在哪个dom元素上面就会重复某一个dom元素
如果数组中有重复数据会报错，可以在遍历的时候通过track by来指定一个不重复的参考物($index)
ng-init：初始化数据模型
ng-class：用于设置元素类名

字符串：可以是变量也可以是具体的值
对象：key：类名，值：表达式 如果表达式是真的就会选择这个类
数组：可以使字符串也可以是对象

模块：
angular是一个对象，里面有一个叫imodule的函数需要传递个参数->
1.模块的名字。
2.需要使用其他模块的名字
angular.module(‘模块的名字’,[‘需要使用其他模块的名字’,’模块2’])；
创建完模块之后，可以通过ng-app指定入口模块 ->一个单页SPAS只能有1个入口模块

控制器：是angular里面的一个函数，controller需要传两个参数 ->
1.控制器的名字
2、回调函数
angular.module(‘app’,[]).controller(‘控制器的名字’,回调函数);
创建了控制器并不代表使用了控制器->需要在html中通过指令(ng-controller)来指定控制器的名字

<div ng-controller='控制器的名字'></div>

注意：控制器的名字不要写错

$scope：控制器的作用域，类似命名空间，只能在当前的控制器中，使用$scope 上面的数据模型

模块的注入：

angular.module('app',['app.conteoller']);
angular.module('app.controler',[]).controller('homeControlller',function($scope){});

服务：
内置服务：
$timeout：定时器
$interval：定时器
使用步骤：
1、注入服务
2、使用服务

angular.module('app.controler',[])      .controller('homeControlller',function($scope,$timeout,$interval){$scope.username='xiaoming';$timeout(function(){$scope.username='小明';},3000);$interval(function(){$scope.username='小明'+Math.random();},1000)});

$http：

自定义服务：
是angular里面的一个函数
Service() -> 1、服务名 2、回调函数

为什么要使用服务？
控制器中有很多相同的功能 -> 把相同功能的代码抽取为一个服务，在需要使用这个功能的地方应用

angular.module('app',['app.controler','app.service']);
angular.module('app.controler',[]).controller('homeControlller',function(DateTool){console.log(DateTool.toTimeStamp(new Date()))；});
angular.module('app.service',[])
.service('DateTool',function(){this.toTimeStamp=function(date){return date.getTime();}
});

Scope中的$apply和$watch：
$apply：用于传递数据模型的值到界面上 ->用于回调函数中不可以直接传递数据模型的值到界面上
$watch：用于监听界面上的数据模型值发生改变时候的状态

$scope.$watch('username',function(newValue,oldValue){console.log(newValue,oldValue)})

Angular-router(ngRouter)
SPAS：单页面的应用程序
两大块：
1.配置路由
a.引入angular-route
b.注入ngRoute这个模块
c.通过angular对象中的config的函数去配置路由
d.在config中传入一个回调函数，回调函数的参数中有routProvider->两小块部分
2.通过ngView展示路由中的内容

两小块：
1.通过routerProvider配置每一个路由的内容
a.通过when这个函数指定路由的名字和内容
2.Otherwise配置重新定向的位置
注意：1.6在指定路由跳转到路由位置的时候会出现乱码，可以使用$locationProvider修复

$locationProvider.hashPrefix("");

自定义指令：
自定义指令的目的：要封装视图
方法：Directive()需要传两个参数
1、指令的名字
2、回调函数 -> return -> {} -> 指令的内容

.directive("ucai",function () {return {restrict:"EAC",// template:"<button>ucai按钮</button>"template:"<div><h1>ucai</h1><p>ucai介绍</p><ul><li>1.xxxxx</li><li>2.xxxxx</li></ul></div>"}
})

Ionic：
是angular里面的一个UI框架 -> 主要用于写移动端
Ionic的安装和创建
npm i ionic -g
npm i cordova -g
创建工程：
1、通过命令行去创建（脚手架CLI）
创建工程：ionic start 工程的名字 模板的名字
生成移动端执行的平台：ionic add platform ios android
同步代码到ios android 平台的代码中：ionic build ios android
2、通过可视化的工具（ionicLab）创建
移动端的方式：
web技术：
webApp：是一个可以执行在手机浏览器中的网站，没有自己的入口，或者嵌入到其他应用程序中
hybridApp：混合开发，即使用原生技术又使用前端的技术
Ionic+cordova
RN React Navitive
好处：热更新 -> 不需要在应用商店中更新版本 -> 可以直接让应用程序里面的内容更新
原生：OC Swift Java
NativeApp - > 是使用ios 中的SDK和AndroidADK开发的应用程序
优点：用户体验好，流畅
缺点：开发周期长，不能跨平台

Run：是angular里面的一个函数
应用程序开始执行的时候会先执行这个run函数
所有应用程序配置相关的 都写在run里面 比如配置android的底部分栏的位置
在run这个函数中 可以使用rootScopt（根作用域）

Config：angular里面可以用于配置路由的函数
UI-Router：也是在config中配置路由
与ng-route不同的是，UI-Router是根据路由的状态 去切换页面（也可以根据地址切换(href的锚点
)）
使用方法：
1、引入UI-Router
2、注入UI-Router模块
3、在config中配置路由
4、每一个路由都是通过state这个函数配置

a、路由状态的名字->字符串
b、当前路由状态的详细配置->对象

i、母板

1、没有views
2、Abstract：设置为母板

ii、视图

1、需要设置views
2、在views里面需要设置视图的名字（每一个分栏都对应着一个视图）
3、如果有一个分栏中有多个页面需要展示 是通过（导航）跳转到其他页面，每一个页面视图的名字都是相同的

5、也是通过otherwise重新定向页面
6、每一个路由里面的内容，是通过UI-View展示

Ionic：UI框架
Ionic里面包含路由，路由使用的是uirouter
分栏：
外层：ion-tabs

Tabs-颜色：设置分栏的背景颜色
Tabs-icon-方向：图标的位置
Tabs-icon-only：设置只有图标没有文字

内层：ion-tab -> 每一个分栏都对一个视图 -> 每一个视图都对应着多个页面

icon-on：选中时候的图标
icon-off：未选中时候的图标
Title：分栏的标题（图标底部的文字）

内容的展示：
Tabs中 每一个tab都对应着 需要展示的视图，这个视图可以使用ion-nav-view表示 通过name的属性来区分不同视图。
在index中视图也是通过ion-nav-view来展示，具体展示的内容根据路由对应视图的名字决定

视图部分：
两层：
Ion-view：包含导航栏设置的部分

设置导航栏的标题：view-title
设置导航栏上的按钮：ion-nav-buttons
Side:left(默认) right
设置多个按钮 在ion-nav-buttons中添加

Ion-content：只用于设置展示内容的部分

ionic：中设置安卓平台分栏在底部和导航栏在底部标题居中
在config中添加$ionicConfigProvider：

$ionicConfigProvider.platform.android.tabs.position("bottom");
$ionicConfigProvider.platform.android.navBar.alignTitle("center");