AngularJS 모듈화 설명 및 예제 코드

AngularJS는 몇 가지 주요 특성을 가지고 있습니다. 예를 들어:

　　1 MVC

　　2 모듈화

　　3 지시 시스템

　　4 양방향 데이터 바인딩

그래서 이 편에서 AngularJS의 모듈화를 보겠습니다.

　　먼저 모듈화를 왜 구현해야 하는지 설명해 보겠습니다:

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

　　2 모듈을 정의하여 로드 순서를 사용자 정의할 수 있습니다.

　　3 단위 테스트에서는 모든 내용을 로드할 필요가 없습니다.

　　이전에 만든 몇 가지 예제에서는 컨트롤러 코드를 script 태그 안에 직접 적었습니다. 이렇게 선언된 함수들은 전역입니다. 당연히 최선이 아닙니다.

　　다음에 어떻게 모듈화하는지 보겠습니다:　　　　　　　

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

　　먼저, 전역 변수 angular을 통해 myAppModule 모듈을 생성합니다.

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

　　첫 번째 매개변수는 바인딩된 애플리케이션 app 이름입니다. 이 애플리케이션은 페이지에서 angular의 진입점을 나타내며, main 함수와 유사한 역할을 합니다。

　　두 번째 매개변수 [] 안에 의존 모듈을 표시합니다。

　　다음에 어떻게 모듈을 사용하는지 보겠습니다！

!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('myApp', []);
      myAppModule.filter('test', function(){
        return function(name){
          return 'hello, '+name+'!';
        };
      });
      myAppModule.controller('myAppCtrl', ['$scope', function($scope){
        $scope.name='xingoo';
      }]);
    </script>
  </body>
</html>

　　myApp를 ng에 직접 바인딩합니다。-app에 바로 적용하면 됩니다。

　　script에서는 모듈을 통해 filter와 컨트롤러를 생성합니다。

　　filter의 역할은 문자열 조각을 추가하는 것입니다。

　　컨트롤러의 역할은 변수를 초기화하는 것입니다。

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

　　　　　　　　　 이것이 AngularJS 모듈화에 대한 자료 정리입니다. 앞으로도 관련 자료를 계속 추가하겠습니다. 감사합니다.

고지사항: 본 내용은 인터넷에서 수집된 것으로, 저작권자는 본사이트가 아닙니다. 인터넷 사용자가 자발적으로 제공한 내용으로, 사이트는 소유권을 가지지 않으며, 인공 편집도 없으며, 관련 법적 책임도 부담하지 않습니다. 저작권 침해가 의심되는 내용이 있으면, notice#w로 이메일을 보내 주세요.3codebox.com에 대한 신고를 보내는 경우, #을 @으로 변경하십시오. 관련 증거를 제공하시면, 해당 내용이 확인되면 즉시 해당 내용을 삭제하겠습니다.

기본 튜토리얼

좋아하는 것