1. O que é um módulo?
Muitos aplicativos têm um método principal para inicialização, carregamento (o significado dos fios?) E lançamento de aplicativos. A aplicação angular não requer o método principal. Em vez disso, o módulo fornece um formulário declarativo com um objetivo especificado, descrição descritiva de como o aplicativo é iniciado. Existem várias vantagens em fazer isso:
2. O básico
Estamos ansiosos para saber como fazer o módulo mundial do Hello funcionar. Aqui estão algumas coisas importantes para prestar atenção:
API do módulo (http://code.angularjs.org/1.0.2/docs/api/angular.module)
Observe o módulo MyApp mencionado em <html ng-app = "myApp">, que permite que o lançador inicie o módulo MyApp que definimos.
<! Doctype html> <html lang = "zh-cn" ng-app = "myApp"> <head> <meta charset = "utf-8"> <title> Basics </title> <style type = "text/css"> .ng-cloak {display: nenhum; } </style> </head> <body> <div> {{'kitty' | Greet}} </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> var simplemodule = angular.module ("myApp", []); SimpleModule.Filter ("Greet", function () {Return function (nome) {return "hello" + name + "!";}}); </script> </body> </html>3. (Configuração recomendada) Configuração recomendada
Embora o exemplo acima seja simples, não é um aplicativo em larga escala. Recomendamos dividir seu aplicativo em vários módulos da seguinte forma:
O motivo dessa divisão é que, quando estamos testando, geralmente precisamos ignorar o código de inicialização que dificulta o teste. Ao dividir o código em módulos separados, é fácil ignorar esse código nos testes. Dessa forma, podemos nos concentrar mais em carregar o módulo correspondente para teste.
O exposto acima é apenas uma sugestão, você pode fazê -lo como quiser.
4. Carregamento e dependências do módulo (carregamento e dependências do módulo)
Um módulo é uma coleção de configurações que executam blocos aplicados no processo de iniciar o aplicativo. Em sua forma mais simples, consiste em dois tipos de blocos:
1. Blocos de configuração: executados durante o processo de registro e configuração do provedor. Somente provedor e constante (constante?) Podem ser injetados em blocos de configuração. Isso é para evitar o acidente de que o serviço é executado antes da configuração do serviço.
2. Run Blocks: Execute após o injetor ser criado e usado para iniciar o aplicativo. Somente instâncias e constantes podem ser injetadas no bloco de corrida. Isso deve evitar a execução adicional da configuração do sistema durante a operação do programa.
angular.module ('mymodule', []). config (function (injetable) {// provider-injetor // Aqui está um exemplo de bloco de configuração // podemos obter n coisas que necessárias // podemos injetar fornecedores (não instâncias, não instâncias) no bloco de configuração}). RUN (function (injetável) {// Instance-injetor // Aqui está um exemplo de bloco de execução // podemos obter n coisas que necessárias // podemos apenas injetar instâncias (instâncias) (não provedores) no bloco de execução});a) blocos de configuração
Existe uma maneira conveniente de fazê -lo no módulo, o que é equivalente a configurar o bloco. Por exemplo:
angular.module ('mymodule', []). valor ('a', 123). fábrica ('a', function () {return 123;}). Diretiva ('DirectiveName', ...). filtro ('filterame', ...); // é equivalente a angular.module ('mymodule', []). config (function ($ fornece, $ compileProvider, $ filterProvider) {$ provene.Value ('a', 123) $ provendo.factory ('a', function () {return 123;}) $ compileProvider.directive ('DirectiveName', ...). $ filterprovider.register ('filter., ...);A ordem em que os blocos de configuração são aplicados é consistente com a ordem em que são registrados. Para definições constantes, é um caso adicional, ou seja, a definição constante colocada no início dos blocos de configuração.
b) Executar blocos (bloco de aplicativos)
Run Block é a coisa mais próxima do método principal do Angular. O bloco de corrida é o código que deve ser executado para iniciar o aplicativo. Ele será executado depois que todas as configurações e injetores de serviço forem criados. Os blocos de execução geralmente contêm código mais difícil de unidade de teste. Por esse motivo, esses códigos devem ser definidos em um módulo separado para que possam ser ignorados nos testes de unidade.
c) Dependências (dependências)
Um módulo pode listar outros módulos de que depende. Contar com um módulo significa que o módulo solicitado (confiável) deve ser carregado antes de solicitar o módulo (o módulo que precisa depender de outros módulos, o solicitante) é carregado. Em outras palavras, o bloco de configuração do módulo solicitado será executado antes dos blocos de configuração ou do módulo exigindo, como explicar o ou aqui?). O mesmo vale para o bloco de execução. Cada módulo só pode ser carregado uma vez, mesmo que existam vários outros módulos que o exigem.
d) Carga assíncrona (carregamento assíncrono)
O módulo é uma das maneiras de gerenciar a configuração $ injetor, sem fazer nada com o carregamento de scripts na VM. Atualmente, existem projetos prontos que são projetados especificamente para carregamento de scripts e também podem ser usados no Angular. Como os módulos não fazem nada durante o carregamento, eles podem ser carregados na VM em qualquer ordem. Os carregadores de script podem usar esse recurso para executar o carregamento paralelo.
5. Teste de unidade
Na forma mais simples de teste de unidade, um é instanciar um subconjunto de um aplicativo no teste e executá -los. É importante ressaltar que precisamos perceber que, para cada injetor, cada módulo será carregado apenas uma vez. Geralmente, um aplicativo possui apenas um injetor. Mas nos testes, cada caso de teste possui seu injetor, o que significa que em cada VM, o módulo será carregado várias vezes. Construir o módulo corretamente ajudará a testes de unidade, como no exemplo a seguir:
Neste exemplo, nos preparamos para assumir que o seguinte módulo é definido:
Angular.Module ('GreetMod', []).Vamos escrever alguns casos de teste:
describe('myApp', function() { // Load the module of the application response, and then load the specified test module that rewrites $window to the mock version. // Do this, when window.alert() is performed, the tester will not stop because it is blocked by the real alert window // Here is an example of overwriting configuration information in the test beforeEach(module('greetMod', function($provide) {// It seems that A janela $ é para substituir o seguinte fornece.value ('$ window', {alerta: jasmine.createspy ('alerta')}); injeção (função (cumprimenta, $ window) {greet ('mundo'); espera ($ window.alert) .toavebeencalledWith ('hello world!');})); Module (função ($ fornece) {$ fornece.Value ('Alert', alertapy);});