angularJs 前端的页面分解与组装

实现前端页面的复用

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

angular.module('pageComponents', [], function($compileProvider){
  $compileProvider.directive('commonHeader', function($compile) {
    return {
      templateUrl: 'templete/common/common_header.html',
      replace: true,
      transclude: false,
      restrict: 'A',
      scope: false
    };
  });
  $compileProvider.directive('commonFooter', function($compile) {
    return {
      templateUrl: 'templete/common/common_footer.html',
      replace: true,
      transclude: false,
      restrict: 'A',
      scope: false
    };
  });
});

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

 

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

<!-- header -->
<ng-include src="'common_header.html'"></ng-include>
        
<div class="container">
    <!-- angular ng-view -->
    <div ng-view></div>
    <!-- /angular ng-view -->
</div>
        
<!-- Footer -->
<ng-include src="'common_footer.html'"></ng-include>

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

$compileProvider.directive("dynamicFormInput", ['$http', '$templateCache',
  function($http, $templateCache) {
    return {
      restrict : 'E',
      scope : {
        model : '=',
        section : '='
      },
      template : '<ng:include src="tpl"></ng:include>',
      link : function(scope, iElement, iAttrs) {
        switch(scope.section.sectionTypeId) {
          case 1:
            $http.get('partials/survey/textInput.html', {
              cache : $templateCache
            });
            scope.tpl = "partials/survey/textInput.html";
            break;
          case 2:
            $http.get('partials/survey/selectOneOption.html', {
              cache : $templateCache
            });
            scope.tpl = "partials/survey/selectOneOption.html";
            break;
          case 6:
            if (scope.section.sectionId == 19) {
              $http.get('partials/survey/addressSelection.html', {
                cache : $templateCache
              });
              scope.tpl = "partials/survey/addressSelection.html";
            }
            break;
        }
      }
    }
}]);

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

 

ng-include

假设在我们的 controller 中

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

 

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

<script type="text/ng-template" id="/tpl1.html">
  <input ng-model="myPrimitive">
  </script>
  <div ng-include src="'/tpl1.html'"></div>

<script type="text/ng-template" id="/tpl2.html">
  <input ng-model="myObject.aNumber">
  </script>
  <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 改写第一个模板：

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

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