Injeção de dependência do AngularJS
O que é injeção de dependência
A explicação no wiki é: a injeção de dependência (DI) é um padrão de design de software no qual uma ou mais dependências (ou serviços) são injetadas (ou passadas por referência) em um objeto separado (ou cliente) e depois se tornam parte do estado do cliente.
Esse padrão separa a criação de comportamentos de dependência do cliente, o que torna a programação vagamente acoplada e segue os princípios de reversão de dependência e responsabilidade única. Em contraste direto com o padrão do localizador de serviço, permite que o cliente entenda como o cliente usa o sistema para encontrar dependências
Em uma palavra-se você não tiver nada para fazer, não venha até mim, eu irei até você se tiver algo para fazer.
AngularJS fornece um bom mecanismo de injeção de dependência. Os 5 componentes principais a seguir são usados como injeção de dependência:
valor
fábrica
serviço
Provedor
constante
valor
O valor é um objeto JavaScript simples que passa valores para o controlador (fase de configuração):
var mainApp = angular.module ("mainApp", []); // Crie o objeto Valor "DefaultInput" e passe os dados mainApp.Value ("DefaultInput", 5); ... // injetar "DefaultInput" no controlador mainApp.Controller ('calccontroller', função ($ scope, scope, scope, scope.nutumMumming, calcinput; $ scope.result = calcservice.square ($ scope.number);fábrica
A fábrica é uma função que retorna um valor. Criado quando o serviço e o controlador exigem.
Geralmente usamos funções de fábrica para calcular ou retornar valores.
// Defina um módulo var mainApp = angular.module ("mainApp", []); // Crie "MathService" usado para multiplicar o produto de dois númerosMainApp.Factory ('MathService', function () {var factory = {}; fábrica. // Injetar a fábrica "MathService" no serviço mainApp.service ('calcservice', function (mathservice) {this.square = function (a) {return MathService.multiply (a, a);}}); ...Provedor
Em AngularJS, um serviço, fábrica etc. são criados através do provedor (estágio de configuração).
Um método de fábrica get () é fornecido no provedor, usado para retornar valor/serviço/fábrica.
// Defina um módulo var mainApp = angular.module ("mainApp", []); ... // Crie serviço usando provedor Definir um método para calcular o produto de dois números mainApp.config (function ($ fornece) {$ fornece.Prider ('MathService', function () {this. $ Get = function () {fatoria b;} retornar a fábrica;constante
A constante (constante) é usada para passar valores numéricos durante a fase de configuração. Observe que essa constante não está disponível durante a fase de configuração.
mainApp.Constant ("configparam", "valor constante");
Exemplo
Os exemplos a seguir fornecem uma demonstração de vários mecanismos de injeção de dependência acima.
<html> <head> <meta charset = "utf-8"> <title> injeção de dependência angularJS </ititle> </ad Head> <body> <h2> angularjs aplicação simples </h2> <div ng-app = "mainApp" ng --Controller = "calccontroller"> <p> enter um número: <ing: <ing: <ng-ng-controller = "calccontroller"> <p> enter um número: <ing: <ing: <ng-ng-controller = "calccontroller"> <p> ente ng-click = "Square ()"> x <pup> 2 </pup> </butut> <p> Resultado: {{resultado}} </p> </div> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.mins"> " angular.module ("mainApp", []); mainApp.config (function ($ fornece) {$ fornece.Provider ('MathService', function () {this. $ get = function () {var factory = {}; factory.multiply = function (a, b) {return a * b;} retorna fábrica;});}); }); mainApp.value ("DefaultInput", 5); mainApp.Factory ('MathService', function () {var factory = {}; factory.multiply = function (a, b) {return a * b;} retorna fábrica;}); MainApp.Service ('CalcService', function (MathService) {this.square = function (a) {return MathService.multiply (a, a);}}); mainApp.Controller ('calccontroller', função ($ scope, calcservice, defaultInput) {$ scope.number = defaultInput; $ scope.Result = calcservice.square ($ scope.number); $ scope.square = function () {$ scope.Result = callservice); </script> </body> </html>Resultados em execução:
O exposto acima é a classificação de dados para injetar dependências do AngularJS. Continuaremos a adicioná -lo mais tarde. Espero que possa ajudar amigos que desenvolvem o AngularJs.