A injeção de dependência é um padrão de design de software fornecido em um componente que substitui a codificação de suas dependências dentro de um componente difícil. Isso reduz um componente de dependências de posicionamento, configuração de dependência. Isso ajuda a tornar os componentes reutilizáveis, mantidos e testados.
AngularJS fornece um mecanismo de injeção de dependência supremo. Ele fornece um componente principal injetável que depende um do outro.
valor
fábrica
Servir
Provedor
Sempre
valor
Os valores são objetos JavaScript simples que são usados para passar valores durante os controladores de fase de configuração.
// define um modulevar mainApp = angular.module ("mainApp", []); // Crie um objeto de valor como "defaultInput" e passa um data.mainApp.value ("defaultInput", 5); ... // injetar o valor no controlador usando seu nome "defaultInput" mainApp.Contoller ('' calcller, 'calcller,' calcller, 'calcller,' scalcTer ('scontput ”, scontroller; //' injeção 'calcloter,' scontroller, 'scalcTerl); $ scope.number = DefaultInput;fábrica
A fábrica é usada para retornar o valor da função. Ele cria valor de acordo com a demanda, sempre que um serviço ou controlador precisar dele. Geralmente usa uma função de fábrica para calcular e retornar o valor correspondente
// define um modulevar mainApp = angular.module ("mainApp", []); // cria uma fábrica "MathService" que fornece um método multiplique para retornar a multiplicação de dois númerosMainApp.Factory ('MathService', function () {var factory {}; // Injete o "MathService" da fábrica em um serviço para utilizar o método multiplique da fábrica.mainapp.service ('calcservice', function (mathservice) {this.square = function (a) {return mathservice.multiply (a, a);}}); ...Servir
Um serviço é um único JavaScript que contém um conjunto de objetos de função para executar determinadas tarefas. O serviço usa a função Service () e injeta na definição do controlador.
// define um modulevar mainApp = angular.module ("mainApp", []); ... // Crie um serviço que define um quadrado de método para retornar o quadrado de um número.mainApp.service ('calcservice', function (mathService) {this.square = function (a) {retornar mathservice.molly (a); o controlinainapApp.Controller ('calccontroller', função ($ scope, calcservice, defaultInput) {$ scope.number = defaultInput; $ scope.Result = calcService.square ($ scope.number);Provedor
O provedor usa o serviço, a fábrica, etc. Durante a fase de configuração do processo de criação interna do AngularJS (como durante a própria inicialização do AngularJS). Os scripts mencionados abaixo podem ser usados para criar, criamos o MathService com antecedência. O provedor é um método especial de fábrica e get () para retornar valor/serviço/fábrica.
// define um modulevar mainApp = angular.module ("mainApp", []); ... // Crie um serviço usando provedor que define um quadrado de método para retornar o quadrado de um número.mainApp.config (function ($ provendo) {$ fornece.provider ('mathservice', function () {this. {return a * b;} retorna fábrica;constante
As constantes são usadas para considerar os fatos configurando valores de fase, os valores não podem ser passados durante a fase de configuração.
mainApp.Constant ("configparam", "valor constante");
exemplo
Os exemplos a seguir mostrarão todas as instruções acima.
testangularjs.html
<html> <head> <title> injeção de dependência angularJS </ititle> </ad Head> <body> <h2> Aplicação de amostra de angularjs </h2> <div ng-app = "mainApp" ng-controller = "calccontroller"> <p> Enter um número: <input Type = "número" ng-model = " ng-click="square()">X<sup>2</sup></button> <p>Result: {{result}}</p> </div> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> <script> var mainApp = 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>resultado
Open textangularjs.html em um navegador da web. Os resultados são os seguintes.
O exposto acima é a coleta de informações para a injeção de dependência do AngularJS. Continuaremos a adicionar informações relevantes no futuro. Obrigado pelo seu apoio a este site!