AngularJS 모듈화 상세 설명 및 예제 코드-CSS 튜토리얼-php.cn

AngularJS 모듈화 상세 설명 및 예제 코드

高洛峰

풀어 주다： 2016-12-28 14:02:56

원래의

1612명이 탐색했습니다.

AngularJS에는 다음과 같은 여러 주요 기능이 있습니다.

　1 MVC

　2 모듈화

　3 명령 시스템

　4 양방향 데이터 바인딩

이 글에서는 AngularJS의 모듈화에 대해 살펴보겠습니다.

먼저 모듈화를 구현하는 이유에 대해 이야기해 보겠습니다.

1 모듈의 재사용성을 높입니다.

2 모듈을 정의하여 로딩 순서를 맞춤 설정할 수 있습니다.

　3 유닛 테스트에서는 모든 콘텐츠를 로드할 필요는 없습니다

이전 예제에서는 컨트롤러 코드가 스크립트 태그에 직접 작성되었습니다. 이렇게 선언된 함수는 전역적이며 분명히 하나의 Best가 아닙니다. 선택.

모듈화하는 방법을 살펴보겠습니다.

<script type="text/javascript">
     var myAppModule = angular.module(&#39;myApp&#39;,[]);
      
     myAppModule.filter(&#39;test&#39;,function(){
       return function(name){
         return &#39;hello, &#39;+name+&#39;!&#39;;
       };
     });
 
     myAppModule.controller(&#39;myAppCtrl&#39;,[&#39;$scope&#39;,function($scope){
       $scope.name=&#39;xingoo&#39;;
     }]);
   </script>

로그인 후 복사

먼저 전역 변수 angle을 통해 myAppModule 모듈을 만듭니다.

angular.module('myApp',[ ]);

첫 번째 매개변수는 바인딩된 애플리케이션 앱의 이름입니다. 이 앱은 기본 기능의 역할과 유사하게 페이지에서 Angular의 진입점을 식별합니다.

두 번째 매개변수 []는 종속 모듈을 식별합니다.

모듈 사용법을 살펴보겠습니다!

<!doctype html>
<html ng-app="myApp">
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="myAppCtrl">
      {{name | test }}
    </div>
    <script type="text/javascript">
      var myAppModule = angular.module(&#39;myApp&#39;,[]);
       
      myAppModule.filter(&#39;test&#39;,function(){
        return function(name){
          return &#39;hello, &#39;+name+&#39;!&#39;;
        };
      });
 
      myAppModule.controller(&#39;myAppCtrl&#39;,[&#39;$scope&#39;,function($scope){
        $scope.name=&#39;xingoo&#39;;
      }]);
    </script>
  </body>
</html>

로그인 후 복사

myApp을 ng-app에 직접 바인딩하면 끝입니다.

스크립트에서는 모듈을 통해 필터와 컨트롤러를 만들었습니다.

필터의 기능은 문자열 수정을 추가하는 것입니다.

컨트롤러의 기능은 변수를 초기화하는 것입니다.

프로그램 실행 결과는 다음과 같습니다.

AngularJS 模块化详解及实例代码