Antes de falar sobre o módulo AngularJS, vamos primeiro apresentar alguns pontos de conhecimento do Angular:
AngularJS é uma tecnologia de cliente pura, escrita inteiramente em JavaScript. Ele usa tecnologias convencionais do desenvolvimento da Web (HTML, CSS, JavaScript) para tornar o desenvolvimento de aplicativos da Web mais rápido e mais fácil.
O AngularJS simplifica o desenvolvimento de aplicativos é empacotar algumas operações de desenvolvimento de baixo nível comuns para fornecê-las aos desenvolvedores. O AngularJS lidará automaticamente com essas operações de baixo nível. Eles incluem:
1. Operação de domínio
2. Configure a escuta dos eventos
3. Verificação de entrada, porque o AngularJS lidará com a maioria dessas operações, os desenvolvedores podem se concentrar mais na lógica de negócios do aplicativo e escrever um código menos repetitivo, propenso a erros e de baixo nível.
Embora o AngularJS esteja simplificando o desenvolvimento, ele também traz algumas tecnologias requintadas ao cliente, incluindo:
1. Separação de dados, lógica de negócios e visualizações
2. Ligação automática de dados e visualizações
3. Serviços gerais
4. Injeção de dependência (usada principalmente para serviços de agregação)
5. Compilador HTML extensível (escrito inteiramente por JavaScript)
6. Fácil de testar
7. A demanda do cliente por essas tecnologias existe há muito tempo.
Ao mesmo tempo, você também pode usar o AngularJS para desenvolver aplicativos de página única ou de várias páginas, mas é usado principalmente para desenvolver aplicativos de uma página única. O AngularJS suporta operações de histórico do navegador, botões para frente e traseiro e operações favoritas em aplicativos de uma página.
Em seguida, vamos explicar em detalhes o módulo de AngularJS.
A maioria dos aplicativos possui um método principal para instanciar, organizar e lançar aplicativos. Os aplicativos AngularJS não têm um método principal, mas usam módulos para declarar como o aplicativo deve ser iniciado. Este método tem as seguintes vantagens:
1. O processo de inicialização é declarativo, por isso é mais fácil de entender.
2. Nos testes de unidade, não há necessidade de carregar todos os módulos; portanto, esse método ajuda a gravar testes de unidade.
3. Módulos adicionais podem ser adicionados aos testes em situações específicas. Esses módulos podem alterar as configurações e podem ajudar com testes de ponta a ponta.
4. O código de terceiros pode ser embalado em módulos reutilizáveis.
5. Os módulos podem ser carregados em qualquer ordem de sequência ou paralelismo (porque a execução do próprio módulo é atrasada).
Por exemplo:
<! Doctype html> <html ng-app = "myApp"> <head> <script src = "http://code.angularjs.org/angular-1.0.2.min.js"> </sCript> <cript> var myAppmodule = angular.module ('pApp ', [script> <cript> var myAppmodule = angular.module ('pp'p'), [script> var myAppmodule = angular.module ('pApp ', [script> <cript> var myAppmodule = angular.module (' MyApp '; // Configure o módulo. // Neste exemplo, criaremos um filtro de saudação myAppmodule.Filter ('Greet', function () {return function (name) {return 'hello,' + name + '!';};}); </script> </head> <body> <div> {{'World' | Greet}} </div> </body> </html>No exemplo acima, usamos o módulo MyApp para iniciar o aplicativo especificando-o em <html ng-app = "myApp">.
O exemplo acima é muito simples de escrever, mas não é adequado para escrever aplicativos grandes da mesma maneira. Nossa recomendação é dividir seu aplicativo nos seguintes módulos:
1. Um módulo de serviço usado para fazer declarações de serviço.
2. Um módulo de instrução usado para fazer declarações de instruções.
3. Um módulo de filtro usado para fazer declarações de filtro.
4. Um módulo no nível do aplicativo que se baseia nos módulos acima, que contém o código de inicialização.
Por exemplo:
<! doctype html> <html ng-app = "xmpl"> <head> <script src = "http://code.angularjs.org/angular-1.0.2.min.js"> </script> <cript src = "script.js"> </script> </script> </script> </script> </script> </script> </script> Ng-Controller = "XMPLController"> {{Greeting}}! </div> </body> </html> [/code] script.js: [code] angular.module ('xmpl.service', []). // Valor do módulo de serviço ('cumprimentador', {// Saudação de objeto personalizado: 'hello', localize: function (localização) {this.salutação = localização.salutação;}, cumprimenta: function (name) {return this.salutação + '' + name + '!';}}). value ('user', {// Objeto de usuário personalizado carregamento: function (nome) {this.name = name;}}); angular.module ('xmpl.directive', []); // módulo de instrução angular.module ('xmpl.filter', []); // Módulo de filtro angular.module ('xmpl', ['xmpl.service', 'xmpl.directive', 'xmpl.filter']). // Módulo XMPL depende do módulo Run (função (GredeR, usuário) na matriz {// Inicialize o código. Quando o aplicativo iniciar, GreeTer.Localize ({Salutação: 'Bonjour'}); User.load ('World');}) // um controlador para o seu AppVar XmplContoller = functur. GERETER.GREET (User.Name);}O motivo dessa divisão é que você geralmente precisa ignorar o código de inicialização em seus testes, porque esses códigos são mais difíceis de testar. Ao dividi -lo, ele pode ser facilmente ignorado nos testes. O teste também pode ser mais específico carregando apenas módulos relacionados ao teste atual. O exposto acima é apenas uma sugestão, você pode ter certeza de ajustá -lo de acordo com sua situação específica.
Um módulo é uma coleção de uma série de configurações e blocos de código anexados ao aplicativo na fase de inicialização. Um módulo mais simples consiste em dois conjuntos de blocos de código:
Bloco de código de configuração - Execute durante a fase de injeção de injeção e configuração. Somente o provedor de injeção e as constantes podem ser injetados no bloco de configuração. Isso é para impedir que o serviço seja inicializado com antecedência antes de ser configurado.
Executar bloco de código - 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 impedir que a configuração do sistema ocorra após a operação.
Implementação de código:
angular.module ('mymodule', []). config (function (injetable) {// provedor-injector Código de configuração Block // Este é um exemplo de bloco de configuração. // Você pode ter tantos deles quanto quiser. // Você pode injetar apenas provedores (não instâncias) // nos blocos de configuração.}). RUN (function (injetables) {// Bloco de código de configuração do Injector Instância // Este é um exemplo de um bloco de execução. // Você pode ter o que quiser.Os módulos também têm algumas maneiras fáceis de configurar e usá -las é equivalente ao uso de blocos de código. Por exemplo:
angular.module ('mymodule', []). valor ('a', 123). fábrica ('a', function () {return 123;}). Diretiva ('DirectiveName', ...). filtro ('filterame', ...); // é o mesmo asangular.module ('mymodule', []). config (function ($ fornece, $ compileProvider, $ filterProvider) {$ provene.Value ('a', 123) $ provendo.factory ('a', function () {return 123;}) $ compileProvider.directive ('DirectiveName', ...). $ filterprovider.register ('filter., ...);Os blocos de configuração serão aplicados na ordem de registro em $ fornecendo, $ compileProvider, $ filterprovider e $ filterprovider. A única exceção é a definição de constantes, que sempre devem ser colocadas no início do bloco de configuração.
Os blocos de corrida são os mais parecidos com o método principal no AngularJS. Um bloco de corrida é um pedaço de código usado para iniciar o aplicativo. É executado depois que todos os serviços forem configurados e todos os injetores são criados. Os blocos de execução geralmente contêm algum código difícil de teste, para que sejam gravados em módulos separados para que possam ser ignorados durante o teste de unidade.
Um módulo pode listar outros módulos como suas dependências. "Depende de um determinado módulo" significa que o módulo dependente precisa ser carregado antes do módulo. Em outras palavras, o bloco de configuração do módulo dependente será executado antes do bloco de configuração deste módulo. O mesmo vale para os blocos de corrida. Qualquer módulo só pode ser carregado uma vez, mesmo que dependa de vários módulos.
Um módulo é um método usado para gerenciar a configuração $ injetor e não tem nada a ver com o carregamento do script. Existem muitas bibliotecas para carregar módulos de controle na Internet, que podem ser usados com o AngularJS. Como os módulos não fazem nada durante o carregamento, eles podem ser carregados em qualquer ordem ou em paralelo