AngularJS 모듈에 대해 이야기하기 전에 먼저 Angular의 지식 포인트를 소개하겠습니다.
AngularJS는 순수한 클라이언트 기술로 전적으로 JavaScript로 작성되었습니다. 웹 개발 기술 (HTML, CSS, JavaScript)의 기존 기술을 사용하여 웹 애플리케이션 개발을보다 쉽고 쉽게 만듭니다.
AngularJS는 응용 프로그램 개발을 단순화합니다. 일부 일반적인 저수준 개발 작업을 포장하여 개발자에게 제공하는 것입니다. AngularJS는 이러한 저수준 작업을 자동으로 처리합니다. 여기에는 다음이 포함됩니다.
1. 돔 작동
2. 이벤트의 듣기를 설정하십시오
3. 입력 검증, AngularJS는 이러한 작업의 대부분을 처리하기 때문에 개발자는 응용 프로그램의 비즈니스 논리에 더 집중하고 덜 반복적이고 오류가 발생하며 낮은 수준 코드를 작성할 수 있습니다.
AngularJS는 개발을 단순화하고 있지만 다음을 포함하여 일부 절묘한 기술을 고객에게 제공합니다.
1. 데이터 분리, 비즈니스 논리 및보기
2. 데이터 및 뷰의 자동 바인딩
3. 일반 서비스
4. 의존성 주입 (주로 집계 서비스에 사용)
5. Extensible HTML 컴파일러 (전적으로 JavaScript에 의해 작성됨)
6. 테스트하기 쉽습니다
7. 이러한 기술에 대한 고객의 요구는 실제로 오랫동안 존재 해 왔습니다.
동시에 AngularJS를 사용하여 단일 페이지 또는 다중 페이지 응용 프로그램을 개발할 수도 있지만 주로 단일 페이지 응용 프로그램을 개발하는 데 사용됩니다. AngularJS는 단일 페이지 응용 프로그램에서 브라우저 기록 작업, 포워드 및 백 버튼 및 좋아하는 작업을 지원합니다.
다음으로 AngularJS의 모듈에 대해 자세히 설명해 봅시다.
대부분의 응용 프로그램에는 응용 프로그램을 인스턴스화, 구성 및 시작하는 주요 방법이 있습니다. AngularJS 응용 프로그램에는 주요 방법이 없지만 모듈을 사용하여 응용 프로그램을 시작 해야하는 방법을 선언합니다. 이 방법에는 다음과 같은 장점이 있습니다.
1. 시작 프로세스는 선언적이므로 이해하기가 더 쉽습니다.
2. 단위 테스트에서 모든 모듈을로드 할 필요가 없으므로이 방법은 단위 테스트를 작성하는 데 도움이됩니다.
3. 특정 상황에서 테스트에 추가 모듈을 추가 할 수 있습니다. 이러한 모듈은 구성을 변경할 수 있으며 엔드 투 엔드 테스트에 도움이 될 수 있습니다.
4. 타사 코드는 재사용 가능한 모듈로 포장 할 수 있습니다.
5. 모듈은 순서 또는 병렬 처리 순서로로드 될 수 있습니다 (모듈 자체의 실행이 지연되기 때문에).
예를 들어:
<! docType html> <html ng-app = "myapp"> <head> <script src = "http://code.angularjs.org/angular-1.0.2.min.js"> </script> <cript> var myappmodule = angular.module ( 'myapp', []); // 모듈을 구성합니다. //이 예에서 우리는 인사말 필터 myAppModule.filter ( 'greet', function () {return function (name) {return 'hello,' + name + '!';})를 만듭니다. </script> </head> <body> <div> {{ 'world'| greet}} </div> </body> </html>위의 예에서는 <html ng-app = "myapp">에서 지정하여 MyApp 모듈을 사용하여 응용 프로그램을 시작합니다.
위의 예는 쓰기가 매우 간단하지만 같은 방식으로 대규모 응용 프로그램을 작성하는 데 적합하지 않습니다. 권장 사항은 응용 프로그램을 다음 모듈로 나누는 것이 좋습니다.
1. 서비스 선언을하는 데 사용되는 서비스 모듈.
2. 지침 선언을하는 데 사용되는 지침 모듈.
3. 필터 선언을하는 데 사용되는 필터 모듈.
4. 초기화 코드가 포함 된 위 모듈에 의존하는 응용 프로그램 수준 모듈.
예를 들어:
<! docType html> <html ng-app = "xmpl"> <head> <script src = "http://code.angularjs.org/angular-1.0.2.min.js"> </script> <script src = "script.js "> </head> <div div. ng-controller = "xmplcontroller"> {{greeting}}! </div> </body> </html> [/code] script.js : [code] angular.module ( 'xmpl.service', []). // 서비스 모듈 값 ( 'greeter', {// custom greeter 객체 경례 : 'hello', localize : function (localization) {this.salation = localization.salutation;}, greet (name) {return this.salatution + '' + name + ';}}). 값 ( '사용자', {// 사용자 정의 사용자 객체로드 : 함수 (이름) {this.name = name;}}); Angular.Module ( 'xmpl.directive', []); // 명령 모듈 Angular.Module ( 'xmpl.filter', []); // 필터 모듈 Angular.Module ( 'xmpl', [ 'xmpl.service', 'xmpl.directive', 'xmpl.filter']). // 모듈 XMPL은 배열의 모듈 실행 (function (greeter, user) {// 코드 초기화. 응용 프로그램이 시작되면 greeter.LociLaINGE ({salutation : 'bonjour'}); user.load ( 'world'); appvar xmplcontroller = function ($ scope, greeter, greeter, greeter, greeter, greeter, greeter)에 따라 달라집니다. greeter.greet (user.name);}이 분할의 이유는 테스트에서 초기화 코드를 무시해야하기 때문입니다. 이러한 코드는 테스트하기가 더 어렵 기 때문입니다. 분할하면 테스트에서 쉽게 무시할 수 있습니다. 현재 테스트와 관련된 모듈 만로드하여 테스트가 더 구체적 일 수 있습니다. 위의 것은 단지 제안 일뿐입니다. 특정 상황에 따라 조정하도록 안심할 수 있습니다.
모듈은 시작 단계에서 응용 프로그램에 첨부 된 일련의 구성 및 코드 블록 모음입니다. 가장 간단한 모듈은 두 세트의 코드 블록으로 구성됩니다.
구성 코드 블록 - 주입 제공자 주입 및 구성 단계에서 실행합니다. 주입 제공자 및 상수 만 구성 블록에 주입 할 수 있습니다. 이는 서비스가 구성되기 전에 서비스가 미리 초기화되는 것을 방지하기위한 것입니다.
실행 코드 블록 - 인젝터가 생성 된 후에 실행되어 응용 프로그램을 시작하는 데 사용됩니다. 인스턴스와 상수 만 실행 블록에 주입 할 수 있습니다. 이는 작동 후 시스템 구성이 발생하는 것을 방지하기위한 것입니다.
코드 구현 :
Angular.Module ( 'myModule', []). config (function (injectables) {// prudider-injector config code block // 구성 블록의 예입니다. // 원하는만큼 이들 중 많은 것을 가질 수 있습니다. // 제공자 만 주입 할 수 있습니다 (인스턴스) // 구성 블록에만 주입 할 수 있습니다.}). run (function (injectables) {// 인스턴스 인젝터 구성 코드 블록 // 런 블록의 예입니다. // 원하는만큼 이들을 가질 수 있습니다. // 인스턴스 (제공자가 아님) 만 실행 블록에만 주입 할 수 있습니다});모듈에는 또한 몇 가지 쉬운 구성 방법이 있으며이를 사용하면 코드 블록을 사용하는 것과 같습니다. 예를 들어:
Angular.Module ( 'myModule', []). 값 ( 'a', 123). 공장 ( 'a', function () {return 123;}). 지시문 ( 'Directivename', ...). 필터 ( 'filtername', ...); //는 동일합니다. config (function ($ prose, $ compileProvider, $ FilterProvider) {$ prose.value ( 'a', 123) $ prossory ( 'a', function () {return 123;}) $ compileProvider.directive ( 'Directivename', ...). $ filterprovider.register ( 'Filtername';});구성 블록은 $ prover, $ compileprovider, $ filterprovider 및 $ filterprovider의 등록 순서대로 적용됩니다. 유일한 예외는 상수의 정의이며, 구성 블록의 시작 부분에 항상 배치해야합니다.
런닝 블록은 AngularJS의 주요 방법과 비슷합니다. 런 블록은 응용 프로그램을 시작하는 데 사용되는 코드입니다. 모든 서비스가 구성되고 모든 인젝터가 생성 된 후에 실행됩니다. 실행중인 블록에는 일반적으로 테스트하기 어려운 코드가 포함되어 있으므로 단위 테스트 중에 무시할 수 있도록 별도의 모듈로 작성해야합니다.
모듈은 다른 모듈을 종속성으로 나열 할 수 있습니다. "특정 모듈에 의존"란 모듈 앞에 종속 모듈을로드해야 함을 의미합니다. 즉, 종속 모듈의 구성 블록은이 모듈의 구성 블록 전에 실행됩니다. 달리기 블록도 마찬가지입니다. 여러 모듈에 의존하더라도 모든 모듈은 한 번만로드 할 수 있습니다.
모듈은 $ 인젝터 구성을 관리하는 데 사용되는 방법이며 스크립트로드와 관련이 없습니다. 인터넷에는 angularJS와 함께 사용할 수있는 제어 모듈을로드하기위한 많은 라이브러리가 있습니다. 로딩 중에 모듈은 아무것도하지 않기 때문에 어떤 순서로든 또는 병렬로로드 할 수 있습니다.