AngularJS 의존성 주입
의존성 주입이란 무엇입니까?
Wiki에 대한 설명은 다음과 같습니다. Dependency Injection (DI)은 하나 이상의 종속성 (또는 서비스)이 별도의 객체 (또는 클라이언트)에 주입 된 다음 클라이언트 상태의 일부가되는 소프트웨어 설계 패턴입니다.
이 패턴은 클라이언트 종속성 동작의 생성을 분리하여 프로그래밍을 느슨하게 결합시키고 종속성 반전 및 단일 책임의 원칙을 따릅니다. 서비스 로케이터 패턴과 직접 대조적으로 클라이언트가 클라이언트가 시스템을 사용하여 종속성을 찾는 방법을 이해할 수 있습니다.
한마디로, 당신이 할 일이 없다면, 나에게 오지 말고, 할 일이 있다면 당신에게 갈 것입니다.
AngularJS는 좋은 의존성 주입 메커니즘을 제공합니다. 다음 5 가지 핵심 구성 요소는 종속성 주입으로 사용됩니다.
값
공장
서비스
공급자
끊임없는
값
값은 컨트롤러 (구성 단계)로 값을 전달하는 간단한 JavaScript 객체입니다.
var mainApp = angular.Module ( "mainApp", []); // 값 객체 "defaultInput"을 생성하고 data mainApp.Value ( "defaultInput", 5); ... // "defaultInput"를 컨트롤러에 넣습니다. CONCCONTROLLER ( 'calccontroller', function ($ scope, defaultInput) {$ scope.number = defaultinput); $ scope.result = calcservice.square ($ scope.number); scope = function () {$ scope.result = compservice.square ($ scope.number);공장
공장은 값을 반환하는 함수입니다. 서비스 및 컨트롤러가 필요할 때 생성됩니다.
일반적으로 우리는 값을 계산하거나 반환하기 위해 공장 기능을 사용합니다.
// 모듈 정의 var mainApp = angular.module ( "mainApp"); // 두 숫자 mainApp.factory ( 'mathService', function () {var factory = {}; factory.multiply = function (a, b) {return a * b}}) // 서비스 mainApp.service ( 'comcservice', function (mathservice) {this.square = function (a) {return mathservice.multiply (a, a);})에 공장 "Mathservice"를 주입합니다.공급자
AngularJS에서는 서비스, 공장 등이 제공자 (구성 단계)를 통해 생성됩니다.
공장 메소드 get ()는 제공자에게 제공되며 값/서비스/공장을 반환하는 데 사용됩니다.
// 모듈 정의 var mainApp = angular.Module ( "mainApp", []); ... // 제공자를 사용하여 서비스 생성 두 숫자의 제품을 계산하는 메소드를 정의합니다. mainApp.config (function ($ provery) {$ provery.provider ( 'mathservice', function () {this. $ get = function () {retory am ({a); multiply = a); b;끊임없는
상수 (상수)는 구성 단계에서 숫자 값을 전달하는 데 사용됩니다. 이 상수는 구성 단계에서 사용할 수 없습니다.
mainapp.constant ( "configparam", "constant value");
예
다음 예제는 위의 의존성 주입 메커니즘의 몇 가지 시연을 제공합니다.
<html> <head> <meta charset = "utf-8"> <title> angularjs 종속성 주입 </title> </head> <h2> angularjs 간단한 응용 프로그램 </h2> <div ng-app = "ng-controller ="calccontroller "> ng-click = "square ()"> x <sup> 2 </sup> </sup> </button> <p> 결과 : {{result}} </p> </div> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </script> < Angular.Module ( "MainApp", []); mainApp.config (function ($ pross) {$ prose.provider ( 'mathservice', function () {this. $ get = function () {var factory = {}; factory.multiply = function (a, b) {return a * b;} 반환 공장;};}); }); mainApp.Value ( "DefaultInput", 5); mainApp.Factory ( 'mathservice', function () {var factory = {}; factory.multiply = function (a, b) {return a * b;} return factory;}); MainApp.Service ( 'calcservice', function (mathservice) {this.square = function (a) {return mathservice.multiply (a, a);}}); mainApp.controller ( 'calccontroller', function ($ scope, calcservice, defaultInput) {$ scope.number = defaultInput; $ scope.result = compservice.square ($ scope.number); $ scope.square = function () {$ scope.result = compservice.square ($ scope.square.square); </script> </body> </html>실행 결과 :
위의 것은 AngularJS 종속성을 주입하기위한 데이터의 정렬입니다. 나중에 계속 추가 할 것입니다. Angularjs를 개발하는 친구들을 도울 수 있기를 바랍니다.