Os benefícios da injeção de dependência (DI) não serão mais discutidos, e aqueles que usaram a estrutura da primavera a conhecem. Como estrutura de JS em primeiro plano, o AngularJS também fornece suporte para DI, que é um recurso que o JavaScript/JQuery não possui. DI relacionado aos angulares incluem angular.module (), angular.injector (), $ injetor e $ fornece. Para um contêiner DI, ele deve ter três elementos: registro de serviço, declaração de dependência e aquisição de objetos. Por exemplo, na primavera, o registro do serviço é implementado através da tag <ean> do arquivo de configuração XML ou da anotação @Repository, @Service, @Controller e @Component; A aquisição do objeto pode ser implementada pelo ApplicationContext.getBean (); A declaração de dependências pode ser configurada no arquivo XML, ou pode ser declarada no código Java usando @Resource e outras anotações. No angular, o módulo e o $ fornece são equivalentes ao registro do serviço; O injetor é usado para obter objetos (o Angular completará automaticamente a injeção de dependências); Existem três maneiras de declarar dependências no angular. A seguir, é apresentada uma introdução ao DI angular desses 3 aspectos.
1. Angular.module () cria, obtém e registra módulos em angular
O angular.module () é um local global para criar, registrar e recuperar módulos angulares. Quando passou dois ou mais argumentos, um novo módulo é criado. Se aprovada apenas um argumento, um módulo existente (o nome foi aprovado como o primeiro argumento para o módulo) é recuperado.
// Passar mais de um parâmetro significa um novo módulo; Uma matriz vazia significa que o módulo não depende de outros módulos var cremeModule = angular.module ("mymodule", []); // existe apenas um parâmetro (nome do módulo), que significa obter o módulo // se o módulo não existir, a estrutura angular "reará uma exceção varmmodule = angular; alerta (createModule == getModule);Esta função pode criar novos módulos ou obter módulos existentes. Seja para criar ou obter, é distinguido pelo número de parâmetros.
angular.module (nome, [requer], [configfn]);
Nome: Tipo de string, representando o nome do módulo;
Requer: uma matriz de strings, representando a lista de outros módulos dos quais o módulo depende. Se você não confiar em outros módulos, use uma matriz vazia;
Configfn: usado para fazer algumas configurações para este módulo.
Agora sabemos como criar e obter módulos, então quais são exatamente os módulos? Existe apenas uma frase no guia oficial do desenvolvedor: você pode pensar em um módulo como um contêiner para as diferentes partes de seus controladores de aplicativos, serviços, filtros, diretrizes etc. Não entendo muito bem agora. Significa aproximadamente que um módulo é uma coleção de algumas funções, como um todo composto por elementos filhos, como controladores, serviços, filtros, instruções etc. Não posso explicar agora, então deixarei para trás primeiro.
2. O relacionamento entre $ fornece e módulo
O Serviço de Oferta $ possui vários métodos para registrar componentes com o $ injetor. Muitas dessas funções também são expostas no angular.
Como mencionado anteriormente: módulo e fornecimento são usados para registrar serviços no injetor. Verifique a API oficial e você poderá ver que o $ fornece fornece fornece (), constant (), value (), fábrica () e serviço () para criar serviços de várias naturezas; Angular.Module também fornece esses 5 métodos de registro de serviço. De fato, as funções dos dois são exatamente as mesmas, usadas para registrar serviços com o contêiner DI no injetor.
O automóvel sob a API oficial inclui $ fornece e $ injetor, módulo implícito que é adicionado automaticamente a cada $ injetor. Literalmente, cada injetor tem esses 2 serviços implícitos. Mas na versão 1.2.25, sinto que não há como obter o $ fornece no injetor. Eu não sei por que isso é? De um modo geral, você não precisa exibir esse serviço, basta usar a API fornecida no módulo.
var injector = angular.injector (); alert (injector.has ("$ fornece")); // FalsEalert (injetor.has ("$ injetor"); // true3. Angular.Injector ()
Você também pode obter o injetor usando angular.injector (); mas não está ligado ao módulo. Essa abordagem não faz sentido, equivale a criar um contêiner DI vazio e não há serviço nele, como os outros podem usá -lo? A maneira correta é especificar os módulos que precisam ser carregados ao criar o injetor.
// Crie módulo MyModule e registre o serviço var mymodule = angular.module ('mymodule', []); mymodule.service ('myService', function () {this.my = 0;}); // crie hermodule e registre o serviço var hermodule = 0;}); []); Hermodule.service ('Herservice', function () {this.her = 1;}); // carrega o serviço var injector = angular.injector (["myModule", "Hermodule"]); alert (injector.get.get ("myService"). my);Se vários módulos forem carregados, os serviços em vários módulos poderão ser obtidos através do injetor retornado. Neste exemplo, se apenas o MyMoudle for carregado, o injetor obtido não poderá acessar os serviços sob Hermoudle. É particularmente importante observar aqui: angular.injector () pode ser chamado várias vezes e cada vez que retorna o objeto injetor recém -criado.
var injetor1 = angular.injector (["myModule", "Hermodule"]); var injetor2 = angular.injector (["myModule", "Hermodule"]); alert (injetor1 == injetor2); // false
4. Três maneiras de declarar dependências no angular
A Angular fornece três maneiras de obter dependências: inferência, anotação e métodos embutidos.
// Crie módulo MyModule e registre o serviço var mymodule = angular.module ('myModule', []); mymodule.service ('myService', function () {this.my = 0;}); // obtenha injetor injetor = o angular.injector ("mymodule); inferenceInjector.invoke (function (myService) {alert (myService.my);}); // a segunda anotação de função explícita (servicea) {alert (servicea.my);}; explicit. inLineInjector.invoke (['myService', function (servicea) {alert (servicea.my);}]);Entre eles, os métodos de anotação e inline não requerem o nome do parâmetro da função, que é recomendado; O método de inferência requer que o nome do parâmetro e o nome do serviço sejam consistentes. Se o código JS for compactado ou ofuscado, haverá problemas com a função e esse método não será recomendado.
O exposto acima é uma compilação das informações injetadas pela dependência do AngularJS. Continuaremos a adicionar informações relevantes no futuro. Obrigado pelo seu apoio a este site!