AngularJS 모듈 메소드에 대한 자세한 설명_AngularJS

AngularJS란 무엇인가요?

AngularJs(이하 ng)는 동적 웹 애플리케이션을 설계하기 위한 구조적 프레임워크입니다. 우선, 이는 클래스 라이브러리가 아닌 프레임워크이며 EXT와 마찬가지로 웹 애플리케이션 설계를 위한 완전한 솔루션 세트를 제공합니다. 핵심은 실제로 HTML 태그의 향상이기 때문에 이는 단순한 자바스크립트 프레임워크 그 이상입니다.

HTML 태그 강화란 무엇인가요? 실제로 태그를 사용하여 페이지 논리의 일부를 완성할 수 있습니다. 구체적인 방법은 사용자 정의 태그, 사용자 정의 속성 등을 사용하는 것입니다. HTML에 기본이 아닌 이러한 태그/속성은 ng: 지시문에 이름이 있습니다. 이에 대해서는 나중에 자세히 설명합니다. 그렇다면 동적 웹 애플리케이션이란 무엇일까요? 기존 웹 시스템과 달리 웹 애플리케이션은 사용자에게 풍부한 작업을 제공할 수 있으며 URL 점프 없이 사용자 작업으로 뷰를 지속적으로 업데이트할 수 있습니다. ng 관계자는 또한 게임이나 이미지 처리 애플리케이션보다는 CRUD 애플리케이션, 즉 데이터 연산이 많은 애플리케이션 개발에 더 적합하다고 밝혔습니다.

이를 달성하기 위해 ng는 템플릿 메커니즘, 데이터 바인딩, 모듈, 지시문, 종속성 주입 및 라우팅을 포함한 몇 가지 훌륭한 기능을 도입했습니다. 데이터와 템플릿의 바인딩을 통해 지루한 DOM 작업을 없애고 비즈니스 로직에 집중할 수 있습니다.

또 다른 질문입니다. ng는 MVC 프레임워크인가요? 아니면 MVVM 프레임워크인가요? 공식 웹사이트에서는 ng의 디자인이 MVC의 기본 아이디어를 채택했다고 언급했지만, 코드를 작성할 때 실제로 ng-controller 명령을 사용하고 있기 때문에 완전히 MVC는 아닙니다(적어도 이름에서 보면 MVC입니다). ), 그러나 이것은 컨트롤러가 처리하는 비즈니스는 기본적으로 뷰와 상호 작용하는 것으로 MVVM에 매우 가까운 것으로 보입니다. 눈에 띄지 않는 공식 웹사이트 제목인 "AngularJS — Superheroic JavaScript MVW Framework"에 주목해 보겠습니다.

AngularJS의 모듈 클래스는 애플리케이션이 시작되는 방법을 정의하는 역할을 하며 선언을 통해 애플리케이션의 다양한 프래그먼트를 정의할 수도 있습니다. 이러한 기능을 어떻게 구현하는지 살펴보겠습니다.

1. Main 메소드는 어디에 있나요

Java 또는 Python 프로그래밍 언어를 사용하는 경우 AngularJS의 주요 메서드가 어디에 있는지 알고 싶을 수 있습니다. 모든 것을 시작하고 가장 먼저 실행되는 메소드는 어디에 있습니까? 모든 것을 인스턴스화하고 함께 모은 다음 애플리케이션에 실행을 시작하도록 지시하는 JavaScript 코드의 메서드는 어디에 있습니까?

사실 AngularJS에는 메인 메소드가 없습니다. AngularJS는 메인 메소드를 대체하기 위해 모듈이라는 개념을 사용합니다. 모듈을 사용하면 애플리케이션의 종속성과 애플리케이션을 조립하고 시작하는 방법을 선언적으로 설명할 수 있습니다. 이 방법을 사용하는 이유는 다음과 같습니다.

1. 모듈은 선언적입니다. 이는 쓰기가 더 쉽고 이해하기 쉽다는 것을 의미합니다. 읽는 것은 일반 영어를 읽는 것과 같습니다!

2. 모듈식입니다. 이로 인해 구성 요소와 종속성을 정의하는 방법을 생각하여 더 명확하게 만들 수 있습니다.

3. 테스트가 더 쉬워집니다. 단위 테스트에서는 선택적으로 모듈을 추가하고 단위 테스트할 수 없는 코드 내용을 피할 수 있습니다. 동시에 시나리오 테스트에서는 다른 추가 모듈을 로드하여 다른 구성 요소와 더 잘 작동할 수 있습니다.

예를 들어, 우리 애플리케이션에는 "MyAwesomeApp"이라는 모듈이 있습니다. HTML에서는 다음을 태그(또는 기술적으로는 모든 태그)에 추가하세요.

코드 복사 코드는 다음과 같습니다.

ng-app 지시문은 AngularJS에 MyAwesomeApp 모듈을 사용하여 애플리케이션을 시작하도록 지시합니다. 그렇다면 모듈은 어떻게 정의해야 할까요? 예를 들어 서비스, 지시문 및 필터에 대해 별도의 모듈을 정의하는 것이 좋습니다. 그런 다음 기본 모듈은 이러한 모듈에 대한 종속성을 선언할 수 있습니다.

모듈은 모두 훌륭하고 완전한 코드 블록이고 각 모듈에는 단 하나의 기능이 있으므로 모듈 관리가 더 쉬워집니다. 동시에 단위 테스트는 집중하는 모듈만 로드할 수 있으므로 초기화 횟수를 줄일 수 있고 단위 테스트가 더욱 정교해지고 집중됩니다.

2. 로딩 및 종속성

모듈 로딩 작업은 함수 이름에서 알 수 있는 두 가지 다른 단계에서 발생합니다. 이는 구성 코드 블록과 실행 코드 블록(또는 단계라고 함)입니다.

1.코드 블록 구성

이 단계에서는 AngularJS가 모든 데이터 소스를 연결하고 등록합니다. 따라서 데이터 소스와 상수만 Config 블록에 주입할 수 있습니다. 초기화 여부가 확실하지 않은 서비스는 주입할 수 없습니다.

2.코드블록 실행

Run 코드 블록은 애플리케이션을 시작하고 인젝터가 생성된 후 실행을 시작하는 데 사용됩니다. 이 시점 이후에는 시스템을 구성할 필요가 없도록 인스턴스와 상수만 Run 블록에 주입할 수 있습니다. AngularJS에서는 Run 블록이 기본 메서드와 가장 유사하다는 것을 알 수 있습니다.

3. 빠른 방법

모듈로 무엇을 할 수 있나요? 이를 사용하여 컨트롤러, 지시문, 필터 및 서비스를 인스턴스화할 수 있지만 모듈 클래스로 수행할 수 있는 작업이 훨씬 더 많습니다. 다음과 같이 구성된 API 메소드:

1.config(configFn)

이 방법을 사용하여 모듈이 로드될 때 완료해야 하는 일부 등록 작업을 수행할 수 있습니다.

2.상수(이름, 객체)

이 메서드가 먼저 실행되므로 이를 사용하여 애플리케이션 전체 상수를 선언하고 모든 구성(config 메서드) 및 인스턴스(컨트롤러, 서비스 등의 모든 후속 메서드) 메서드에서 사용할 수 있도록 할 수 있습니다.

3.controller(이름,생성자)

기본 기능은 나중에 사용할 수 있도록 컨트롤러를 구성하는 것입니다.

4.directive(이름,directiveFactory)

이 방법을 사용하여 앱에서 지시문을 만들 수 있습니다.

5.filter(이름,filterFactory)

이전 섹션에서 설명한 대로 명명된 AngularJS 필터를 만들 수 있습니다.

6.run(초기화Fn)

인젝터가 시작된 후 일부 작업을 수행하고 싶지만 사용자가 페이지를 사용할 수 있기 전에 이러한 작업을 수행해야 하는 경우 이 방법을 사용할 수 있습니다.

7.값(이름,객체)

                                                                                                                                                                           -  애플리케이션 전체에 값을 주입할 수 있습니다.

8.factory(이름,factoryFn)

클래스나 객체가 있고 이를 초기화하기 전에 일부 로직이나 매개변수를 제공해야 하는 경우 여기에서 팩토리 인터페이스를 사용할 수 있습니다. 팩토리는 특정 값(또는 개체)을 생성하는 기능을 담당합니다. 인사말 기능의 예를 살펴보겠습니다. 이 기능을 초기화하려면 인사말이 필요합니다.

function Greeter(salutation) {
 this.greet = function(name) {
 return salutation + ' ' + name;
};
}

인사말 기능의 예시는 다음과 같습니다.

myApp.factory('greeter', function(salut) {
 return new Greeter(salut);
});

그러면 다음과 같이 호출할 수 있습니다.

var myGreeter = greeter('Halo');

9.서비스(이름,객체)

팩토리와 서비스의 차이점은 팩토리는 전달된 함수를 직접 호출한 다음 실행 결과를 반환하는 반면, 서비스는 "new" 키워드를 사용하여 전달된 생성자를 호출한 다음 결과를 반환한다는 것입니다. 따라서 기존 그리터 팩토리는 다음 그리터 서비스로 대체될 수 있습니다.

myApp.service('greeter', Greeter);

每当我们需要一个greeter实例的时候，AngularJS就会调用新的Greeter()来返回一个实例。

10.provider(name,providerFn)

provider是这几个方法中最复杂的部分（显然，也是可配置性最好的部分）。provider中既绑定了factory也绑定了service，并且在注入系统准备完毕之前，还可以享受到配置provider函数的好处（也就是config块）。

我们来看看使用provider改造之后的greeter Service是什么样子：

myApp.provider('greeter', function() {
 var salutation = 'Hello';
 this.setSalutation = function(s) {
 salutation = s;
}
 function Greeter(a) {
 this.greet = function() {
 return salutation + ' ' + a;
}
}
 this.$get = function(a) {
 return new Greeter(a);
};
});

这样我们就可以在运行时动态设置问候语了（例如，可以根据用户使用的不同语言进行设置）。

var myApp = angular.module(myApp, []).config(function(greeterProvider) {
greeterProvider.setSalutation('Namaste');
});