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;
        }
      }
    }
}]);

마지막으로 반드시 설명해야 할 것은 이 세 가지 방법은 실질적으로 모두 aax를 이용하여 템플릿을 불러오는 것이다.aax를 사용하여 페이지 분해와 같은 기능을 실현하는 것은 전통적인 백그라운드 동적 스크립트 언어를 사용하는 방안에 비해 반드시 추가 비용을 가져올 것이다.사실,angularjs만 그런 것이 아니라, 내가 접촉한 모든 전단 프레임워크는 이렇다.이것은 브라우저 측의 숙명이다.여기서 발생하는 부하와 백그라운드 동적 스크립트 언어 간의 우열은 기술 주관자가 스스로 평가할 수 밖에 없다.
 

ng-include

우리 컨트롤러에서

$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 텍스트 상자에 입력하면 tpl2 때문에 하위 Scope에서 새로운 속성을 만들지 않습니다.html는 모델을 하나의 대상 속성(an object property)에 귀속시켰는데 원형 계승은 이때 역할을 발휘했다.ngModel은 대상 my Object를 찾고 그의 아버지 Scope에서 찾았다.
모델을number 기본 형식에서 대상으로 바꾸고 싶지 않으면 $parent로 첫 번째 템플릿을 바꿀 수 있습니다.

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

이 텍스트 상자에 입력(예를 들어 22〃)을 해도 새 속성을 만들지 않습니다.모델은 부모 스코프의 속성에 귀속됩니다. ($parent는 하위 스코프가 부모 스코프를 가리키는 속성이기 때문입니다.)