AngularJS에는 다음과 같은 몇 가지 주요 기능이 있습니다.
1 MVC
2 모듈 식
3 명령 시스템
4 양방향 데이터 바인딩
AngularJS의 모듈화를 살펴 보겠습니다.
먼저, 모듈화를 구현 해야하는 이유에 대해 이야기 해 봅시다.
1 모듈의 재사용 가능성이 추가되었습니다
2. 로딩 순서의 사용자 정의를 실현하기 위해 모듈을 정의하십시오
3 단위 테스트에서 모든 것을로드 할 필요는 없습니다.
이전 예제에서 컨트롤러 코드는 스크립트 태그에 직접 작성되므로 선언 된 기능이 전역이므로 최선의 선택이 아닙니다.
모듈화 방법을 살펴 보겠습니다.
<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';}]); </스크립트>먼저 글로벌 변수 각도를 통해 모듈 MyAppModule을 만듭니다.
Angular.Module ( 'myApp', []);
첫 번째 매개 변수는 메인 함수의 함수와 유사한 페이지의 각도의 진입 점을 식별하는 바운드 애플리케이션 앱 이름입니다.
두 번째 매개 변수 []는 종속 모듈을 식별합니다.
모듈 사용 방법을 살펴 보겠습니다!
<! 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에 바인딩하면 괜찮습니다.
스크립트에서는 모듈을 통해 필터와 컨트롤러를 만듭니다.
필터의 목적은 문자열 수정을 추가하는 것입니다.
컨트롤러의 기능은 변수를 초기화하는 것입니다.
프로그램의 실행 결과는 다음과 같습니다.
위는 AngularJS의 모듈 식 정보 분류입니다. 우리는 향후 관련 정보를 계속 추가 할 것입니다. 이 웹 사이트를 지원 해주셔서 감사합니다!