최근에 나는 권위있는 AngularJS 가이드를 읽고있었습니다. 여러 가지 이유로 (주로 돈이 없기 때문에, 나는 그것을 싫어하기 때문에, 전자 버전을 온라인으로 다운로드하기로 결정했습니다. 배우고 싶지 않지만 배우고 싶지 않습니까?
다행히 전자 책을 읽기 전에 약간 기본적이었습니다. 나는 양방향 데이터 바인딩에서 서비스에 이르기까지 비디오를 보면서 조금 배웠고, 지시 시스템에 이르기까지 다소 연락을 취했습니다. 또한 웹 특별 코스 선택 과제 중에 간단한 학생 수업 관리 시스템은 프론트 엔드의 AngularJS와 백엔드의 Nodejs와 백엔드의 Mongoose를 통해 구축되었습니다. 돈이 없기 때문에 Github에만 배치 할 수 있습니다. GitHub 주소 : 학생 관리 시스템, 포크에 오신 것을 환영합니다. 아래 주제에 가자 ...
=========================================================================================================
대상이 의존성을 제어 할 수있는 세 가지 방법이 있습니다.
(1) 내부적으로 종속성을 만듭니다.
(2) 글로벌 변수를 통한 참고 문헌;
(3) 필요한 경우 매개 변수를 통과하십시오.
의존성 주입은 세 번째 방식으로 달성됩니다. 다른 두 가지 방법은 글로벌 범위 오염, 격리를 매우 어렵게 만드는 등 다양한 문제를 가져올 것입니다. 종속성 주입은 런타임에 종속성을 변경하거나 제거 할 수 있도록 하드 코딩 된 종속성을 제거하는 설계 패턴입니다.
런타임에서 종속성을 수정하는 기능은 생산 환경에서 실제 객체 대신 조롱 된 객체를 사용할 수있는 고립 된 환경을 만들 수 있기 때문에 테스트에 이상적입니다.
기능적 관점에서, 종속성 주입은 자동으로 종속성을 사전에 찾아 주입 대상의 종속 자원에 알리므로, 대상이 필요할 때 자원을 즉시 주입 할 수 있도록한다.
다른 객체 나 라이브러리에 의존하는 구성 요소를 작성할 때는 구성 요소 간의 종속성을 설명해야합니다. 런타임 동안 인젝터는 종속성 인스턴스를 생성하고이를 종속 소비자에게 전달할 책임이 있습니다.
// 각도 문서화 함수에서 우수한 예제 SomeClass (greeter) {this.greeter = greeter;} someclass.prototype.greetname = function (name) {this.greeter.greet (name);}; // 샘플 코드는 글로벌 범위에서 컨트롤러를 생성한다는 점에 유의합니다.SomeClass는 런타임에 내부 인사말에 액세스 할 수 있지만 인사말을 참조하는 방법은 신경 쓰지 않습니다. 인사 인스턴스에 대한 참조를 얻기 위해 Someclass의 제작자는 종속성을 구성하고 전달할 책임이 있습니다.
위의 이유로 AngularJS는 $ InjeTor (인젝터 서비스)를 사용하여 종속성의 쿼리 및 인스턴스화를 관리합니다. 실제로 $ Injetor는 응용 프로그램 모듈, 지침 및 컨트롤러를 포함하여 AngularJS의 모든 구성 요소를 인스턴스화 할 책임이 있습니다.
런타임에 $ Injetor는 시작할 때 모든 모듈을 인스턴스화하고 필요한 모든 종속성을 전달할 책임이 있습니다.
예를 들어 다음 코드입니다. 이것은 모듈과 컨트롤러를 선언하는 간단한 응용 프로그램입니다.
Angular.module ( 'myapp', []). factory ( 'greeter', function () {return {return {reture : function (msg) {alert (msg);}}}). controller ( 'myController', function ($ scope, greeter) {$ scope.sayhello = function ());AngularJS 가이 모듈을 인스턴스화 할 때, 인사를 찾고 자연스럽게 참조를 전달합니다.
<div ng-app = "myapp"> <div ng-controller = "myController"> <button ng-click = "sayhello ()"> hello </button> </div> </div>
내부적으로 AngularJS의 처리 프로세스는 다음과 같습니다.
// 인젝터를 사용하여 응용 프로그램 var injector = angular.injector ([ 'ng', 'myApp']); // 인젝터 var $ 컨트롤러 = injector.get ( '$ controller')를 통해 $ 컨트롤러 서비스를로드합니다. myController = $ 컨트롤러 ( 'myController', {$ scope : scope});위의 코드는 Greeter를 찾는 방법을 지정하지 않지만 $ 인젝터가 우리를 위해 그것을 찾아로드하는 데 책임이 있기 때문에 제대로 작동합니다.
Angularjs는 주석 기능을 통해 인스턴스화 중에 전달 된 함수에서 매개 변수 목록을 추출합니다. 이 기능을 보려면 Chrome의 개발자 도구에 다음 코드를 입력하십시오.
> injector.annotate (function ($ q, greeter) {}) [ "$ q", "greeter"]AngularJS 응용 프로그램에서 $ 인젝터가 우리가 알고 있는지 여부에 관계없이 작동합니다. 컨트롤러를 작성할 때는 [] 태그가 사용되지 않거나 명시 적 선언이 없으면 $ 인젝터는 매개 변수 이름으로 의존성을 추론하려고합니다.
추론 된 주사 진술
명시적인 선언이없는 경우 AngularJS는 매개 변수 이름이 종속성의 이름이라고 가정합니다. 따라서 기능 객체의 toString () 메소드를 내부적으로 호출하고 함수 매개 변수 목록을 분석하고 추출하며 $ 인젝터를 통해 객체 인스턴스에 이러한 매개 변수를 주입합니다. 주입 과정은 다음과 같습니다.
injector.invoke (함수 ($ http, greeter) {});AngularJS는 구문 분석에 대한 원시 무모한 매개 변수 목록이 필요하기 때문에이 프로세스는 압축되지 않고 난독 화 된 코드에만 적용됩니다. 매개 변수 이름을 기준으로 추론하는 프로세스에서는 매개 변수 순서가 거의 중요하지 않습니다. AngularJS는 올바른 순서로 속성을 주입하는 데 도움이되기 때문입니다.
명시 적으로 선언을 주입합니다
AngularJS는 기능이 호출 될 때 사용 해야하는 종속성을 명확하게 정의하는 명시적인 방법을 제공합니다. 소스 코드가 압축되고 매개 변수 이름이 변경 되더라도 이러한 방식으로 종속성을 선언하면 여전히 제대로 작동 할 수 있습니다. $ 주입 속성은 선언의 명시 적 주입 기능을 구현하는 데 사용될 수 있습니다. 함수 객체의 $ 드라이던트 속성은 배열이고, 배열 요소의 유형은 문자열이며, 해당 값은 주입 해야하는 서비스의 이름입니다.
샘플 코드는 다음과 같습니다.
var acontrollerfactory = function acontroller ($ scope, greeter) {console.log ( "로드 된 컨트롤러", greeter); // ... 컨트롤러}; acontrollerfactory. $ inject = [ '$ scope', 'greeter']; // greeter service console.log ( "greeter service");} // 우리의 응용 프로그램 컨트롤러 Angular.Module ( 'myApp', []). 컨트롤러 ( 'myController', acontrollerFactory) .factory ( 'greeter', greeterservice); // 새로운 스코프 = Angular. ingular. ingular. 'myApp']), 컨트롤러 = 인젝터 ( '$ controller'), rootscope = injector.get ( '$ rootscope'), NewsCope = RootScope. $ new (); // Call Controller Controller ( 'myController', {$ scope : newscope});이 선언 방법의 경우, 매개 변수 순서는 매우 중요합니다. $ 주입 배열 요소의 순서는 주입 된 매개 변수의 순서에 하나씩 일치해야하기 때문입니다. 이 선언 방법은 선언의 관련 정보가 이미 함수 자체에 바인딩되므로 압축 코드로 실행할 수 있습니다.
라인 내 주사 명세서
AngularJS가 제공 한 선언을 주입하는 마지막 방법은 언제든지 사용할 수있는 인라인 주입 선언입니다. 이 방법은 실제로 구문 설탕이며, 이는 $ 주입 속성을 통해 선언을 주입하는 데 위에서 언급 한 원리와 정확히 동일하지만 함수가 정의 될 때 라인 내에서 매개 변수를 전달할 수 있습니다. 또한 정의 프로세스 중에 임시 변수를 사용하지 않습니다.
AngularJS 객체를 정의 할 때 인라인 선언을 통해 함수 대신 매개 변수 배열을 직접 전달할 수 있습니다. 배열의 요소는 문자열이며, 이는 객체에 주입 할 수있는 종속성의 이름을 나타냅니다. 마지막 매개 변수는 의존성 주입의 객체 객체 자체입니다.
예는 다음과 같습니다.
Angular.Module ( 'myApp'). 컨트롤러 ( 'myController', [ '$ scope', 'greeter', function ($ scope, greeter) {}]);처리해야 할 것은 문자열 목록이므로 인라인 주입 선언은 압축 코드에서 정상적으로 실행될 수 있습니다. 일반적으로 괄호와 배열을 선언하는 [] 기호로 사용됩니다.
위의 AngularJS 의존성 주입은 내가 당신과 공유하는 모든 내용입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.