1. 모듈이란 무엇입니까?
많은 애플리케이션에는 초기화, 로딩 (와이어 의미) 및 출시 응용 프로그램을위한 주요 방법이 있습니다. Angular Application에는 주요 방법이 필요하지 않습니다. 대신 모듈은 응용 프로그램이 시작된 방법에 대한 지정된 목적, 설명적인 설명을 가진 선언적 형태를 제공합니다. 이를 수행하는 데 몇 가지 장점이 있습니다.
2. 기본
우리는 Hello World 모듈을 만드는 방법을 알고 싶어합니다. 다음은 다음과 같이주의를 기울여야 할 몇 가지 주요 사항입니다.
모듈 API (http://code.angularjs.org/1.0.2/docs/api/angular.module)
참고 <html ng-app = "myapp">에 언급 된 MyApp 모듈은 런처가 정의한 MyApp 모듈을 시작할 수 있도록합니다.
<! docType html> <html lang = "Zh-Cn"ng-app = "myApp"> <head> <meta charset = "utf-8"> <title> 기본 </title> <style type = "text/css"> .ng-cloak {display : none; } </style> </head> <body> <div> {{ '키티'| greet}} </div> <script src = "../ Angular-1.0.1.js"type = "text/javaScript"> </script> <script type = "text/javaScript"> var simplemodule = angular.Module ( "myApp", []); simplemodule.filter ( "greet", function () {return function (name) {return "hello" + name + "!";}}); </script> </body> </html>3. (권장 설정) 권장 설정
위의 예는 간단하지만 대규모 응용 프로그램은 아닙니다. 다음과 같이 응용 프로그램을 여러 모듈로 분할하는 것이 좋습니다.
이 부서의 이유는 테스트 할 때 종종 테스트를 어렵게 만드는 초기화 코드를 무시해야하기 때문입니다. 코드를 별도의 모듈로 나누면 테스트에서 해당 코드를 쉽게 무시할 수 있습니다. 이러한 방식으로 테스트를 위해 해당 모듈을로드하는 데 더 집중할 수 있습니다.
위는 단지 제안 일뿐입니다. 원하는대로 만들 수 있습니다.
4. 모듈 로딩 및 종속성 (모듈로드 및 종속성)
모듈은 응용 프로그램을 시작하는 과정에서 적용되는 블록을 실행하는 구성 모음입니다. 가장 간단한 형태로 두 가지 유형의 블록으로 구성됩니다.
1. 구성 블록 : 공급자 등록 및 구성 프로세스 중에 실행되었습니다. 제공자와 상수 (상수?) 만 구성 블록에 주입 할 수 있습니다. 이는 서비스가 구성되기 전에 서비스가 실행되는 사고를 피하는 것입니다.
2. 실행 블록 : 인젝터가 생성되어 응용 프로그램을 시작하는 데 사용됩니다. 인스턴스와 상수 만 실행 블록에 주입 할 수 있습니다. 프로그램 작동 중에 추가 시스템 구성 실행을 피하는 것입니다.
Angular.Module ( 'myModule', []). config (function (Injectables) {// pruess-injector // 구성 블록의 예는 다음과 같습니다. // 필요한 것과 N을 얻을 수 있습니다. run (function (injectables) {// instance-injector // 런 블록의 예는 다음과 같습니다. // 필요한 것과 N을 얻을 수 있습니다.a) 구성 블록
모듈에서이를 수행하는 편리한 방법은 구성 블록과 동등합니다. 예를 들어:
Angular.Module ( 'myModule', []). 값 ( 'a', 123). 공장 ( 'a', function () {return 123;}). 지시문 ( 'Directivename', ...). 필터 ( 'filtername', ...); //는 Angular.Module ( 'myModule', [])와 같습니다. config (function ($ prose, $ compileProvider, $ FilterProvider) {$ prose.value ( 'a', 123) $ prossory ( 'a', function () {return 123;}) $ compileProvider.directive ( 'Directivename', ...). $ filterprovider.register ( 'Filtername';});구성 블록이 적용되는 순서는 등록 된 순서와 일치합니다. 일정한 정의의 경우, 추가 사례, 즉 구성 블록의 시작 부분에 배치 된 정의가 추가 된 경우입니다.
b) 실행 블록 (응용 프로그램 블록)
실행 블록은 Angular의 주요 방법에 가장 가까운 것입니다. 런 블록은 응용 프로그램을 시작하기 위해 실행 해야하는 코드입니다. 모든 서비스 구성 및 인젝터가 생성 된 후에 실행됩니다. 실행 블록에는 일반적으로 장치 테스트가 더 어려운 코드가 포함되어 있습니다. 이러한 이유로,이 코드는 단위 테스트에서 무시할 수 있도록 별도의 모듈로 정의되어야합니다.
c) 종속성 (종속성)
모듈은 다른 모듈을 나열 할 수 있습니다. 모듈에 의존한다는 것은 모듈 (다른 모듈에 의존 해야하는 모듈, 요청자)이로드되기 전에 요청 된 모듈 (신뢰할 수있는 모듈)을로드해야 함을 의미합니다. 다시 말해, 요청 된 모듈의 구성 블록은 구성 블록 또는 필요한 모듈 이전에 실행되며 여기를 설명하는 방법?). 런 블록도 마찬가지입니다. 다른 모듈이 필요한 여러 모듈이 있더라도 각 모듈은 한 번만로드 할 수 있습니다.
d) 비동기 적재 (비동기 적재)
모듈은 스크립트를 VM에로드하여 작업을 수행하지 않고 $ 인젝터 구성을 관리하는 방법 중 하나입니다. 이제 스크립트로드를 위해 특별히 설계된 기성품 프로젝트가 있으며 각도에서도 사용할 수 있습니다. 로딩 중에 모듈은 아무것도하지 않기 때문에 어떤 순서로든 VM에로드 할 수 있습니다. 스크립트 로더는이 기능을 사용하여 병렬 로딩을 수행 할 수 있습니다.
5. 단위 테스트
가장 간단한 형태의 단위 테스트에서 하나는 테스트에서 응용 프로그램의 하위 집합을 인스턴스화 한 다음 실행하는 것입니다. 중요한 것은 각 인젝터에 대해 각 모듈이 한 번만로드 될 것임을 알아야합니다. 일반적으로 응용 프로그램에는 하나의 인젝터 만 있습니다. 그러나 테스트에서 각 테스트 케이스에는 인젝터가있어 각 VM에서 모듈이 여러 번로드됩니다. 모듈을 올바르게 구축하면 다음 예에서와 같이 단위 테스트에 도움이됩니다.
이 예에서는 다음 모듈이 정의되었다고 가정 할 준비를합니다.
Angular.Module ( 'greetMod', []). factory ( 'Alert', function ($ wind
몇 가지 테스트 사례를 작성해 봅시다.
설명 ( 'myApp', function () {// 응용 프로그램 응답의 모듈을로드 한 다음 $ 창을 모의 버전으로 다시 작성하는 지정된 테스트 모듈을로드합니다. // Window.Alert ()가 수행 될 때이 작업을 수행하면 실제 경고 창에 의해 차단되기 때문에 테스터가 정지되지 않습니다 (여기서 Module) (GEREETMOD). 실제 $ 창은 value ( '$ wind inject (greet, $ wind 모듈 ($ provers) {$ provers.value ( 'alert', alertspy);