AngularJS의 여러 가지 종속성 주입 방법

이 문서는 AngularJsThe Definitive Guide

개념

종속성 주입을 참조합니다. 종속성 주입은 종속성의 하드코딩을 제거하여 런타임 시 종속성을 변경하거나 제거할 수 있는 디자인 패턴

입니다.

기능적 관점에서 의존성 주입은 자동으로 종속성을 미리 찾아내어 주입 대상의 종속 리소스에 알려줌으로써 대상이 필요할 때 즉시 리소스를 주입할 수 있도록 해줍니다.

AngularJS는 $injetor(인젝터 서비스)를 사용하여 종속성 쿼리 및 인스턴스화를 관리합니다.

사실 $injetor는 애플리케이션 모듈, 지시어, 컨트롤러

등을 포함하여 AngularJS의 모든 구성 요소를 인스턴스화하는 역할을 담당합니다.

런타임에 $injetor는 시작 시 모든 모듈을 인스턴스화하고 필요한 모든 종속성을 전달하는 역할을 담당합니다.

---

종속성 주입의 여러 방법

1. 추론 주입 문

명시적인 문이 없으면 AngularJS는 매개 변수 이름을 종속성의 이름으로 가정합니다.

AngularJS는 구문 분석을 위해 압축되지 않은 원본 매개변수 목록이 필요하므로 이 프로세스는 압축되지 않고 난독화되지 않은 코드에서만 작동합니다.

예: (모듈 및 컨트롤러 선언)

angular.module('myApp', [])
.factory('greeter', function() {
    return {
        greet: function(msg) {alert(msg);}
    }
})
.controller('MyController',function($scope, greeter) {//其中function中的greeter就是依赖注入
    $scope.sayHello = function() {
    greeter.greet("Hello!");
    };
});

<p ng-app="myApp">
    <p ng-controller="MyController">
        <button ng-click="sayHello()">Hello</button>
    </p></p>

AngularJS가 이 모듈을 인스턴스화할 때 Greetingr를 찾고 자연스럽게 이에 대한 참조를 전달합니다

2 명시적 주입 선언

AngularJS는 명시적인 방법을 제공합니다. 함수가 호출될 때 사용해야 하는 종속성을 명확하게 정의하는 것입니다.

이런 방식으로 종속성을 선언하면 소스 코드가 압축되고 매개변수 이름이 변경되더라도 정상적으로 작동할 수 있습니다.

var app=angular.module('myApp', [])
    .factory('greeter', function() {
        return {
            greet: function(msg) {alert(msg);}
        }
    });function MyController(renamed$scope, renamedGreeter) {
    renamed$scope.sayHello = function() {
        renamedGreeter.greet("Hello!");
    }};
MyController.$inject = ['$scope', 'greeter'];
app.controller('MyController', MyController);//注意这个语句，我这个例子弄了半天，各种报错，就是因为这个语句少了

함수에 대해 설정한 매개변수 이름은 $scope로, Greeter로 이름을 바꾼 다음

MyController.$inject=['$scope','greeter'];

를 사용하여 필요한 종속성을 MyController 함수에 명시적으로 주입합니다.

그래서 MyController 함수에서는

scope로 이름을 바꿨습니다. ,MyController.

scope', 'greeter']; Greeting자를 나타냅니다

---

3. 인라인 주입문

AngularJS에서 제공하는 마지막 주입문 방식은 언제든지 사용할 수 있는 인라인 주입문입니다.

함수 정의에서 인라인으로 매개변수를 전달할 수 있습니다. 또한 정의 중에 임시 변수를 사용하지 않습니다.

이 메소드는 실제로 앞서 언급한 $inject 속성을 통한 주입 선언과 완전히 동일합니다.

예: (위 예와 동일하며 js 부분만 수정됨)

angular.module('myApp', [])
    .factory('greeter', function() {
        return {
            greet: function(msg) {alert(msg);}
        }
    })
    .controller('MyController',  ['$scope', 'greeter', function($scope, greeter)  {
    //这里注入的方式不一样了
    //在定义一个AngularJS的对象时，行内声明的方式允许我们直接传入一个参数数组而不是一个函数。
    //数组的元素是字符串，它们代表的是可以被注入到对象中的依赖的名字，最后一个参数就是依赖注入的目标函数对象本身。
            $scope.sayHello = function() {
                greeter.greet("Hello!");
            };
        }]);

그래픽 없이도 데모 효과는 동일합니다

처리해야 할 것은 문자열 목록이므로 인라인 주입 문도 압축된 코드에서 정상적으로 실행될 수 있습니다.

이 문서는 AngularJs 최종 가이드

개념

종속성 주입은 종속성의 하드 코딩을 제거하는 디자인 패턴이므로 종속성이 런타임에 변경되거나 제거될 수도 있습니다.

기능적 관점에서 의존성 주입은 자동으로 종속성을 미리 찾아내어 주입 대상의 종속 리소스에 알려줌으로써 대상이 필요할 때 즉시 리소스를 주입할 수 있도록 해줍니다.

AngularJS는 $injetor(인젝터 서비스)를 사용하여 종속성 쿼리 및 인스턴스화를 관리합니다.

사실 $injetor는 애플리케이션 모듈, 지시문 및 컨트롤러를 포함하여 AngularJS의 모든 구성 요소를 인스턴스화하는 역할을 담당합니다.

런타임에 $injetor는 시작 시 모든 모듈을 인스턴스화하고 필요한 모든 종속성을 전달하는 일을 담당합니다.

---

종속성 주입의 여러 방법

1. 추론적 주입 선언

명시적인 선언이 없으면 AngularJS는 매개 변수 이름을 종속성 이름으로 가정합니다.

AngularJS는 구문 분석을 위해 압축되지 않은 원본 매개변수 목록이 필요하므로 이 프로세스는 압축되지 않고 난독화되지 않은 코드에서만 작동합니다.

예: (모듈 및 컨트롤러 선언)

angular.module('myApp', [])
.factory('greeter', function() {
    return {
        greet: function(msg) {alert(msg);}
    }
})
.controller('MyController',function($scope, greeter) {//其中function中的greeter就是依赖注入
    $scope.sayHello = function() {
    greeter.greet("Hello!");
    };
});

<p ng-app="myApp">
    <p ng-controller="MyController">
        <button ng-click="sayHello()">Hello</button>
    </p></p>

AngularJS가 이 모듈을 인스턴스화할 때 Greetingr를 찾고 자연스럽게 이에 대한 참조를 전달합니다

2. 함수가 호출될 때 사용해야 하는 종속성을 명확하게 정의합니다.

이런 방식으로 종속성을 선언하면 소스 코드가 압축되고 매개변수 이름이 변경되더라도 정상적으로 작동할 수 있습니다.

var app=angular.module('myApp', [])
    .factory('greeter', function() {
        return {
            greet: function(msg) {alert(msg);}
        }
    });function MyController(renamed$scope, renamedGreeter) {
    renamed$scope.sayHello = function() {
        renamedGreeter.greet("Hello!");
    }};
MyController.$inject = ['$scope', 'greeter'];
app.controller('MyController', MyController);//注意这个语句，我这个例子弄了半天，各种报错，就是因为这个语句少了

함수에 대해 설정한 매개변수 이름은 $scope로, Greeter로 이름을 바꾼 다음

MyController.$inject=['$scope','greeter'];

를 사용하여 필요한 종속성을 MyController 함수에 명시적으로 주입합니다.

그래서 MyController 함수에서는

scope로 이름을 바꿨습니다. ,MyController.

scope', 'greeter']; Greeting자를 나타냅니다

3. 인라인 주입문

---

AngularJS에서 제공하는 마지막 주입문 방식은 언제든지 사용할 수 있는 인라인 주입문입니다.

함수 정의에서 인라인으로 매개변수를 전달할 수 있습니다. 또한 정의 중에 임시 변수를 사용하지 않습니다.

이 메소드는 실제로 앞서 언급한 $inject 속성을 통한 주입 선언과 완전히 동일합니다.

예: (위 예와 동일하며 js 부분만 수정됨)

angular.module('myApp', [])
    .factory('greeter', function() {
        return {
            greet: function(msg) {alert(msg);}
        }
    })
    .controller('MyController',  ['$scope', 'greeter', function($scope, greeter)  {
    //这里注入的方式不一样了
    //在定义一个AngularJS的对象时，行内声明的方式允许我们直接传入一个参数数组而不是一个函数。
    //数组的元素是字符串，它们代表的是可以被注入到对象中的依赖的名字，最后一个参数就是依赖注入的目标函数对象本身。
            $scope.sayHello = function() {
                greeter.greet("Hello!");
            };
        }]);

처리해야 할 것은 문자열 목록이므로 인라인 주입 문도 압축된 코드에서 정상적으로 실행될 수 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

$watch, $apply 및 $digest의 데이터 바인딩 프로세스에 대한 자세한 설명

Html5 localStorage 사용 자세한 설명

AJAX 크로스 도메인 지식

위 내용은 AngularJS의 여러 가지 종속성 주입 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!