Unit03： 模块化设计 、 路由模块 、 动画模块
【Angular Js】
方向一：
面试题：Angular Js最大的不足/应用时需要注意的地方？
原生的ES/JS/DOM中只有html元素特定事件的监听机制，没有监听数据的机制；
$digest队列：消化吸收数据；
view中每写一个表达式{{}}、ng-repeat指令等，就会在$digest队列中创建一个对应的监听函数，只要$scope范围内的数据发生改变，$scope就会遍历范围内所有的监听函数从而改变view的数据，如果数据太多，会影响性能，
解决方法：创建多个controller，这样每个controller中的数据就少一些;
【$interval与setInterval】
$interval修改model数据，底层会立即遍历一遍$digest队列；
setInterval()即使改变了数据，也不会遍历$digest队列；
$interval(function(){$scope.count++},1000)
等价于
$interval(function(){$scope.count++; $digest()/$apply()},1000) //强制遍历$digest队列；
1.依赖注入
dependency
若某个函数调用时需要其它的对象作为形参；此函数依赖于形参对象；
如何解决依赖关系：
1）主动创建
var c1=new Car(); 主动创建依赖对象；
var d1=new Driver(c1); 传递依赖对象；
2）被动注入(Injection)方式；
moudle.controller('',function($scope,$interval){});
Angular中的ng-controller指令在实例化控制器对象时,会根据指定的形参名，创建出控制器所依赖的对象；并注入给控制器对象 -- 依赖注入(Dependency Inject)现象；
注意：
1- Angular在创建控制器对象时，会根据形参列表中的每个形参的名称来创建依赖的对象，所以控制器申明函数不能声明Augular无法识别的形参名 -- Angular只提供了这一种注入方式 -- 根据形参名来注入对象；
2- 若项目中使用了压缩程序，默认会把函数的形参名精简为一个字母，会导致Angular的依赖注入失败；
解决方案：
moudle.controller('myctrl',['$scope','$interval',function(a,b){ }]);
2.可以被注入的对象：所有的service/provider都可以被注入；
1) $log:可以提供五个级别的日志；
2）$http:提供异步的HTTP（AJAX）请求的服务；
$http.get()
$http.post()
$http.put()
$http.delete()
用法：
1- $http({method: 'GET', url: '/someUrl'})
.success(Function(data, status, headers, config) { })
.error(Function(data, status, headers, config) { });
2- $http.get('/someUrl').success(successCallback);
$http.post('/someUrl', data).success(successCallback);
3) $location
rand(1,999) php里随机整数；
3.ng模块中提供的过滤器（filter）
把model数据以特定的格式呈现；
- lowercase
HTML: {{ uppercase_expression | lowercase}}
JS: $filter('lowercase')();
- uppercase
HTML: {{ uppercase_expression | uppercase}}
JS: $filter('uppercase')();
- number
HTML: {{ uppercase_expression | number}}
HTML: {{ uppercase_expression | number:小数位数}}
JS: $filter('number')(number, fractionSize);
- currency
HTML: {{ currency_expression | currency }}
HTML: {{ currency_expression | currency : '￥'}}
JS: $filter('currency')(amount, symbol)
- date
HTML: {{ date_expression | date : format}}
如： {{p.birthday | date:'yyyy-MM-dd HH:mm:ss'}}
JS: $filter('date')(date, format)
4.web中多页应用与单页应用；
Mutiple Page Application
Single Page Application
多页应用:
项目中有多个完整的页面；
使用超链接(js)跳转；
所有的页面请求:同步 -- 客户端在等待服务器响应的时候，浏览器一片空白；
不便于实现两个页面间的切换过场动画；
浏览器需要不停的创建DOM树；
每个页面都有加载自己的css、js文件；
单页应用:
整个项目中只有一个完整的HTML页面，其他html都是片段，只包含DIV；
使用超链接(js)伪跳转；
所有的"伪页面请求":异步 -- 客户端在等待下一个页面到来时，任然可以显示前一个页面；
实现两个“伪页面”切换过场动画；
浏览器只需要创建一个完整的DOM树，此后的页面切换只是再换某个div的内容；
css、js文件只需要加载一次；
手动实现单页应用：
1.创建一个完整的HTML页面，引入所有的css、js，body中需要一个 伪页面容器，如div
2.在创建多个 伪页面；只有HTML片段；
3.客户端请求HTML页面，同时在url中追加一个特殊标记(伪页面名称)；如：index.html#/start（路由地址）
4.浏览器要用js解析伪页面名称；查找字典，找到该名称对应的 伪页面url；
window.location.hash/
5.客户端发起的ajax请求，获取伪页面内容，加载到index的伪页面容器；
6.【ngRoute模块】
Route:路由：通过某条线路找目标内容
ngRoute:模块的目标，就是根据浏览器中的URl中的一个特殊地址标记，查找到该标记对应的页面，并异步加载到当前页面的ngView指令中；使用步骤：
1）创建唯一的html页面，声明容器ngView指令，引入angular.js angular-route.js
2）创建模块页面
3) 创建module 声明依赖ng ngRoute两个模块；
4）在module中配置路由字典
5）使用浏览器测试
http://IP地址/index.html#/strat;
7.ngRoute模块中伪页面跳转；
连接 <a href="#/m(路由地址)" >跳转到main</a>
js
<button ng-click="jump()">
跳转到detail
</button>
$scope.jump=function(){
$location.path('/d(路由地址)');
}
