angularJs 前端的页面分解与组装

实现前端页面的复用

将分解的页面写成directive. 例如下面这个样子：

Java代码  

1. angular.module('pageComponents', [], function($compileProvider){  
2.   $compileProvider.directive('commonHeader', function($compile) {  
3.     return {  
4.       templateUrl: 'templete/common/common_header.html',  
5.       replace: true,  
6.       transclude: false,  
7.       restrict: 'A',  
8.       scope: false  
9.     };  
10.   });  
11.   $compileProvider.directive('commonFooter', function($compile) {  
12.     return {  
13.       templateUrl: 'templete/common/common_footer.html',  
14.       replace: true,  
15.       transclude: false,  
16.       restrict: 'A',  
17.       scope: false  
18.     };  
19.   });  
20. });  

 事实上，还可以更进一步，将templateUrl写成可传入的参数。但是那样的话就跟下面这个方法差不多了。

使用ng-include非常简单。请注意src的参数是表达式，如果要传静态的字符串参数，请用引号将参数包裹起来。就像下面这个例子。

Java代码  

1. <!-- header -->  
2. <ng-include src="'common_header.html'"></ng-include>  
3.           
4. <div class="container">  
5.     <!-- angular ng-view -->  
6.     <div ng-view></div>  
7.     <!-- /angular ng-view -->  
8. </div>  
9.           
10. <!-- Footer -->  
11. <ng-include src="'common_footer.html'"></ng-include>  

对ng-include稍作处理，可以实现更复杂的功能。例如下面这个动态加载表单页面的例子，就是通过变换ng-include的src参数实现的。src中的字符串会作为表达式处理（可以是$scope中的变量），所以直接写名字的话需要使用引号。

Java代码  

1. $compileProvider.directive("dynamicFormInput", ['$http', '$templateCache',  
2.   function($http, $templateCache) {  
3.     return {  
4.       restrict : 'E',  
5.       scope : {  
6.         model : '=',  
7.         section : '='  
8.       },  
9.       template : '<ng:include src="tpl"></ng:include>',  
10.       link : function(scope, iElement, iAttrs) {  
11.         switch(scope.section.sectionTypeId) {  
12.           case 1:  
13.             $http.get('partials/survey/textInput.html', {  
14.               cache : $templateCache  
15.             });  
16.             scope.tpl = "partials/survey/textInput.html";  
17.             break;  
18.           case 2:  
19.             $http.get('partials/survey/selectOneOption.html', {  
20.               cache : $templateCache  
21.             });  
22.             scope.tpl = "partials/survey/selectOneOption.html";  
23.             break;  
24.           case 6:  
25.             if (scope.section.sectionId == 19) {  
26.               $http.get('partials/survey/addressSelection.html', {  
27.                 cache : $templateCache  
28.               });  
29.               scope.tpl = "partials/survey/addressSelection.html";  
30.             }  
31.             break;  
32.         }  
33.       }  
34.     }  
35. }]);  

最后必须说明的是，这三种方法实质上都是利用ajax来加载模板。使用ajax来实现页面分解这样的功能，相比传统的使用后台动态脚本语言的方案，必然会 带来额外的开销。事实上，不光AngularJS是这样，我所接触过的所有前端框架都是如此。这是浏览器端的宿命。这里所造成的负载和与后台动态脚本语言之间的优劣，只能由技术主管自己权衡。

ng-include

假设在我们的 controller 中

Java代码  

1. $scope.myPrimitive = 50;  
2. $scope.myObject    = {aNumber: 11};  

每一个 ng-include 会生成一个子 Scope，每个子Scope 都继承父Scope。

Java代码  

1. <script type="text/ng-template" id="/tpl1.html">  
2.   <input ng-model="myPrimitive">  
3.   </script>  
4.   <div ng-include src="'/tpl1.html'"></div>  
5.   
6. <script type="text/ng-template" id="/tpl2.html">  
7.   <input ng-model="myObject.aNumber">  
8.   </script>  
9.   <div ng-include src="'/tpl2.html'"></div>  

输入（比如”77″）到第一个 input 文本框，则子 Scope 将获得一个新的 myPrimitive 属性，覆盖掉父 Scope 的同名属性。这可能和你预想的不一样。

输入（比如”99″）到第二个 input 文本框，并不会在子 Scope 创建新的属性，因为 tpl2.html 将 model 绑定到了一个对象属性（an object property），原型继承在这时发挥了作用，ngModel 寻找对象 myObject 并且在它的父 Scope 中找到了。

如果我们不想把 model 从 number 基础类型改为对象，我们可以用 $parent 改写第一个模板：

Java代码  

1. <input ng-model="$parent.myPrimitive">  

输入（比如”22″）到这个文本框也不会创建新属性了。model 被绑定到了父 scope 的属性上（因为 $parent 是子 Scope 指向它的父 Scope 的一个属性）。