Mecanismo de injeção de dependência em angularJS
DI é um poderoso mecanismo angularJS, ajuda a injetar um objeto definido de uma biblioteca de terceiros no aplicativo angular, que é passado como um elemento no array como o 2º parâmetro ao instanciar o módulo angularJS, com base na maneira como o código entenda, isso ajuda a se referir ao objeto da biblioteca, mas sem usar a instrução de referência direta, é a técnica de fazer uma função depender do módulo em tempo de execução sem codificá-la.
Veja mais sobre injeção de dependência na wikipedia: https://en.wikipedia.org/wiki/Dependency_injection
Os programadores podem dividir o aplicativo em muitos componentes diferentes (componente), e podem injetar de um componente para outro, o mecanismo de modularização no aplicativo angularJS facilita a configuração, reutilização, atualização de atualização e componentes de teste. O injetor embutido (objeto injetado padrão) será responsável por criar componentes (componentes), ordenando dependências, fornecendo-as a outros componentes quando necessário.
Como mencionado, o mecanismo de injeção torna o código mais reutilizável, por exemplo, se queremos criar um recurso que precisa ser reutilizado em várias situações diferentes na aplicação, pense em definir um business.common services e reutilizá-los injetando-os como uma dependência .
Alguns dos componentes e objetos que o angularJS injeta na aplicação através do mecanismo de injeção:
- valor
- Fornecedor
- Constante
- Fábrica
- Serviço
Mục lục
Valor
Este é um método do módulo, ele ajuda o programador a definir um objeto (objeto), string(número), ou número(número) e injetá-los no controlador durante a fase de configuração (fase de inicialização). . Muitas vezes é usado para injetar valores no servidor, controlador, facetory.
Veja o exemplo abaixo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dependency injection</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> </div> </body> <script> var myApp = angular.module('myApp', []); myApp.value("number",10); myApp.value("string","Hello"); myApp.value("object",{name:"Nguyen Van A",age:20}); myApp.value("array",["Nguyen Van A","Nguyen Van B","Nguyen Van C"]); myApp.controller('myController', function($scope,number,string,object,array){ $scope.number = number; $scope.string = string; $scope.object = object; $scope.array = array; console.log($scope.number); console.log($scope.string); console.log($scope.object); console.log($scope.array); }); </script> </html>Resultado ao executar o programa:
Fornecedor
AngularJs usa o método provider() para criar um serviço ou fábrica durante a fase de configuração (ao iniciar e configurar o aplicativo), um provedor é uma função de fábrica separada junto com o $get() e o valor de retorno, fábrica ou serviço ( é um pouco confuso, mas veja o exemplo. Ele diz ao angualrJS como criar um serviço injetável (o negócio é injetável, então o provedor define o serviço e é criado através do serviço) embutido é $provide
Considere o exemplo abaixo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example Provide</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myCtrl"> <button ng-click="DisplayProvider()" ng-disabled="flag">Display</button> <div ng-bind="ProviderOutput"></div> </div> </body> <script> var app = angular.module('myApp', []); app.provider("myProvider", function () { this.$get = function () { return { Display: function () { return "Display from services"; } }; }; }); app.controller('myCtrl', function ($scope, myProvider) { $scope.ProviderOutput = "Provider outoput"; $scope.DisplayProvider = function () { $scope.flag = true; $scope.ProviderOutput = myProvider.Display(); } }); </script> </html>Este é o exemplo mais básico de como usar o provedor para criar serviços injetáveis no controller, como podemos ver, o método Display de myProvider já pode ser chamado, e o objeto myProvider é injetado no controller para uso, similar a outros objetos injetáveis.
Além disso, ainda podemos definir funções através dos métodos app.config(), app.run() (métodos que serão executados quando a configuração do aplicativo iniciar ou o aplicativo iniciar), então as funções também são injetáveis através do mecanismo de injeção.
Constante
No angularJS, o método config() não pode passar uma instância do serviço ou o valor definido através do método value() como parâmetro, então não é possível injetar um valor ou uma entidade nele. No entanto, ainda é possível injetar uma constante como provedor de serviço durante a configuração. Isso significa que a constante ajuda a passar valores durante a configuração, e também pode ser usada enquanto a aplicação está em execução (tempo de execução). )
Comprovado através do exemplo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dependency injection</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> </div> </body> <script> var myApp = angular.module('myApp', []); myApp.value("testnumber",100); myApp.config(function($provide,testnumber){ console.log(testnumber); }); myApp.controller('myController', function($scope,testnumber){ }); </script> </html>Após a execução, o navegador dá um erro:
para constantes, podemos injetar valores em config() ou run(), até mesmo alterar o valor. No entanto, não faz muito sentido porque mesmo que o valor da constante tenha sido alterado na configuração, a camada do controlador e os dados da variável ainda são identificados por valor ao inicializar (constante é uma constante, sem alteração no valor. valor ao longo do programa) Veja o exemplo abaixo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dependency injection</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> {{testnumber}} </div> </body> <script> var myApp = angular.module('myApp', []); myApp.constant("testnumber",100); myApp.config(function($provide,testnumber){ console.log($provide); testnumber = 1000; console.log(testnumber); }); myApp.controller('myController', function($scope,testnumber){ $scope.testnumber = testnumber; }); </script> </html> Bài viết liên quan:
Dịch vụ thiết kế Wesbite
