집 > 기사 > 웹 프론트엔드 > AngularJS의 여러 가지 종속성 주입 방법

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

php中世界最好的语言원래의: 2018-03-16 17:17:481806검색

이 문서는 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 최종 가이드

개념

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