AngularJS_AngularJS 모듈에 대한 자세한 설명
- WBOY원래의
- 2016-05-16 16:17:16874검색
Angularjs 모듈에 대해 이야기하기 전에 먼저 Angle에 대한 몇 가지 지식 포인트를 소개하겠습니다.
AngularJS는 전적으로 Javascript로 작성된 순수 클라이언트측 기술입니다. 웹 개발을 위한 기존 기술(HTML, CSS, Javascript)을 사용하여 웹 애플리케이션 개발을 더 빠르고 쉽게 만듭니다.
AngularJS가 애플리케이션 개발을 단순화하는 중요한 방법은 몇 가지 일반적인 하위 수준 개발 작업을 패키지하여 개발자에게 제공하는 것입니다. AngularJS는 이러한 하위 수준 작업을 자동으로 처리합니다. 여기에는 다음이 포함됩니다.
1.DOM 작업
2. 이벤트 모니터링 설정
3. 입력 검증. AngularJS가 이러한 작업의 대부분을 처리하므로 개발자는 반복적이고 오류가 발생하기 쉽고 낮은 수준의 코드를 작성하는 대신 애플리케이션의 비즈니스 논리에 더 집중할 수 있습니다.
AngularJS는 개발을 단순화하는 동시에 다음과 같은 몇 가지 뛰어난 기술을 클라이언트에 제공합니다.
1. 데이터, 비즈니스 로직, 뷰의 분리
2. 데이터와 뷰의 자동 바인딩
3. 일반 서비스
4. 종속성 주입(주로 집계 서비스에 사용됨)
5. 확장 가능한 HTML 컴파일러(전체가 JavaScript로 작성됨)
6. 테스트하기 쉬움
7. 이러한 기술에 대한 고객의 요구는 실제로 오랫동안 존재해 왔습니다.
동시에 AngularJS를 사용하여 단일 페이지 또는 다중 페이지 애플리케이션을 개발할 수도 있지만 주로 단일 페이지 애플리케이션을 개발하는 데 사용됩니다. AngularJS는 단일 페이지 애플리케이션에서 브라우저 기록 작업, 앞으로 및 뒤로 버튼, 컬렉션 작업을 지원합니다.
다음으로 angleJS 모듈에 대해 자세히 설명하겠습니다.
대부분의 애플리케이션에는 애플리케이션을 인스턴스화하고 구성하고 시작하는 데 사용되는 기본 메서드가 있습니다. 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>
<script>
var myAppModule = angular.module('myApp', []);
// configure the module.
// in this example we will create a greeting filter
myAppModule.filter('greet', function() {
return function(name) {
return 'Hello, ' + name + '!';
};
});
</script>
</head>
<body>
<div>
{{ 'World' | greet }}
</div>
</body>
</html>
위 예에서는 myApp 모듈을 사용하여 8f08cb147f69d67da71d45acc046f462에 지정하여 애플리케이션을 시작합니다.
위의 예는 작성하기는 매우 간단하지만 동일한 작성 방법을 사용하여 큰 애플리케이션을 작성하는 것은 적합하지 않습니다. 애플리케이션을 다음 모듈로 분할하는 것이 좋습니다.
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"></script>
</head>
<body>
<div ng-controller="XmplController">
{{ greeting }}!
</div>
</body>
</html>
[/code]
script.js:
[code]
angular.module('xmpl.service', []). //服务模块
value('greeter', { //自定义greeter对象
salutation: 'Hello',
localize: function(localization) {
this.salutation = localization.salutation;
},
greet: function(name) {
return this.salutation + ' ' + name + '!';
}
}).
value('user', { //自定义user对象
load: function(name) {
this.name = name;
}
});
angular.module('xmpl.directive', []); //指令模块
angular.module('xmpl.filter', []); //过滤器模块
angular.module('xmpl', ['xmpl.service', 'xmpl.directive', 'xmpl.filter']). //模块xmpl依赖于数组中的模块
run(function(greeter, user) {
// 初始化代码，应用启动时，会自动执行
greeter.localize({
salutation: 'Bonjour'
});
user.load('World');
})
// A Controller for your app
var XmplController = function($scope, greeter, user) {
$scope.greeting = greeter.greet(user.name);
}
이렇게 분할하는 이유는 초기화 코드가 테스트하기 더 어렵기 때문에 테스트에서 초기화 코드를 무시해야 하는 경우가 많기 때문입니다. 이를 분리하면 테스트 중에 쉽게 무시할 수 있습니다. 현재 테스트와 관련된 모듈만 로드하여 테스트를 더욱 구체적으로 만들 수도 있습니다. 위의 내용은 단지 제안일 뿐이므로 특정 상황에 따라 자유롭게 조정할 수 있습니다.
모듈은 시작 단계에서 애플리케이션에 첨부되는 구성 및 코드 블록의 모음입니다. 가장 간단한 모듈은 두 가지 유형의 코드 블록 컬렉션으로 구성됩니다.
구성 코드 블록 - 주입 공급자 주입 및 구성 단계에서 실행됩니다. 주입 공급자와 상수만 구성 블록에 주입할 수 있습니다. 이는 서비스가 구성되기 전에 조기에 초기화되는 것을 방지하기 위한 것입니다.
코드 블록 실행 - 인젝터가 생성된 후 실행되어 애플리케이션을 시작하는 데 사용됩니다. 인스턴스와 상수만 실행 블록에 주입될 수 있습니다. 이는 실행 후 시스템 구성이 발생하는 것을 방지하기 위한 것입니다.
코드 구현:
angular.module('myModule', []).
config(function(injectables) { // provider-injector 配置代码块
// This is an example of config block.
// You can have as many of these as you want.
// You can only inject Providers (not instances)
// into the config blocks.
}). run(function(injectables) { // instance-injector 运行代码块
// This is an example of a run block.
// You can have as many of these as you want.
// You can only inject instances (not Providers)
// into the run blocks
});
모듈에는 구성을 위한 몇 가지 편리한 방법도 있으며, 이를 사용하는 것은 코드 블록을 사용하는 것과 같습니다. 예:
angular.module('myModule', []).
value('a', 123).
factory('a', function() { return 123; }).
directive('directiveName', ...).
filter('filterName', ...);
// is same as
angular.module('myModule', []).
config(function($provide, $compileProvider, $filterProvider) {
$provide.value('a', 123)
$provide.factory('a', function() { return 123; })
$compileProvider.directive('directiveName', ...).
$filterProvider.register('filterName', ...);
});
$provide, $compileProvider, $filterProvider 등록 순서대로 구성 블록이 적용됩니다. 유일한 예외는 항상 구성 블록의 시작 부분에 배치되어야 하는 상수의 정의입니다.
실행 블록은 AngularJS에서 가장 메인 메소드와 유사한 것입니다. 실행 블록은 애플리케이션을 시작하는 데 사용되는 코드 조각입니다. 모든 서비스가 구성되고 모든 인젝터가 생성된 후에 실행됩니다. 실행 블록에는 테스트하기 어려운 코드가 포함되는 경우가 많기 때문에 단위 테스트 중에 무시할 수 있도록 별도의 모듈에 작성해야 합니다.
모듈은 다른 모듈을 종속성으로 나열할 수 있습니다. "모듈에 따라 달라집니다"는 종속 모듈이 이 모듈보다 먼저 로드되어야 함을 의미합니다. 즉, 종속 모듈의 구성 블록은 이 모듈의 구성 블록보다 먼저 실행됩니다. 실행 블록도 마찬가지입니다. 여러 모듈에 종속되어 있더라도 모든 모듈은 한 번만 로드할 수 있습니다.
모듈은 $injector 구성을 관리하는 데 사용되는 방법이며 스크립트 로딩과는 아무런 관련이 없습니다. 모듈 로딩을 제어하는 라이브러리는 인터넷에 많이 있으며 AngularJS와 함께 사용할 수 있습니다. 모듈은 로딩 중에 아무 작업도 수행하지 않으므로 순서나 병렬로 로드할 수 있습니다.