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(路由地址)');

          }