Módulo AngularJS
O módulo define um aplicativo.
Um módulo é um contêiner para diferentes partes de um aplicativo.
Um módulo é um contêiner para o controlador de aplicativos.
O controlador geralmente pertence a um módulo.
Criar módulos
Você pode criar módulos através da função angular.Module dos angulares:
<div ng-app = "myApp"> ... </div> <cript> var app = angular.module ("myApp", []); </script>O parâmetro "MyApp" corresponde ao elemento HTML que executa o aplicativo.
Agora você pode adicionar controladores, instruções, filtros etc. no seu aplicativo AngularJS.
Adicione um controlador
Você pode usar a diretiva NG-Controller para adicionar o controlador do aplicativo:
Instância de AngularJS
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. ng-Controller = "myctrl"> {{primeironame + "" + lastName}} </div> <cript> var app = angular.module ("myApp", []); app.Controller ("myctrl", function ($ scope) {$ scope.firstny = "; "Doe";}); </script> </body> </html>Efeito de corrida:
John Doe
Você pode aprender mais sobre os controladores no capítulo do controlador AngularJS.
Adicionar comando
O AngularJS fornece muitas instruções internas que você pode usar para adicionar funcionalidade ao seu aplicativo.
Para obter instruções completas, consulte o Manual de Referência do AngularJS.
Além disso, você pode usar módulos para adicionar suas próprias instruções para o seu aplicativo:
Instância de AngularJS
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. RUNOOB-DIRECTION> </div> <cript> var app = angular.module ("myApp", []); App.Directive ("RUNOOBDIRECTION", function () {return {Model: "Eu o criei no construtor diretivo!"};}); </cript> </body> </Html>Resultados em execução:
Eu o criei no construtor diretivo!
Você pode aprender mais sobre as diretrizes no capítulo Diretivas AngularJS.
Módulos e controladores estão incluídos nos arquivos JS
Normalmente, os aplicativos AngularJS incluem módulos e controladores nos arquivos JavaScript.
No exemplo a seguir, "MyApp.js" contém o definidor do módulo de aplicativo, e o arquivo "myctrl.js" contém o controlador:
Instância de AngularJS
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. ng-Controller = "myctrl"> {{primeironame + "" + lastName}} </div> <script src = "myapp.js"> </script> <script src = "myctrl.js"> </script> </body> </html>Resultados em execução:
John Doe
myApp.js
var app = angular.module ("myApp", []);
Nota Na definição do módulo, o parâmetro [] é usado para definir as dependências do módulo.
Os colchetes [] indicam que o módulo não tem dependências. Se houver uma dependência, o nome da dependência será escrito nos colchetes.
myctrl.js
App.Controller ("myctrl", function ($ scope) {$ scope.firstname = "John"; $ scope.lastName = "doe";});As funções afetam o espaço para nome global
As funções globais devem ser evitadas em JavaScript. Porque eles são facilmente substituídos por outros arquivos de script.
O módulo AngularJS permite que todas as funções sejam escopo sob este módulo, evitando esse problema.
Quando a biblioteca será carregada?
Nota: Em nossa instância, todas as bibliotecas AngularJS são carregadas na cabeça do documento HTML.
Para aplicações HTML, geralmente é recomendável colocar todos os scripts na parte inferior do elemento <body>.
Isso aumentará a velocidade de carregamento da página da Web, porque o carregamento de HTML não está sujeito ao carregamento do script.
Em nossas várias instâncias do AngularJS, você verá que a biblioteca AngularJS está carregada na área <ad Head> do documento.
Em nosso caso, o AngularJS é carregado no elemento <head>, porque a chamada para o Angular.Module só pode ser feita após a carga da biblioteca.
Outra solução é carregar a biblioteca AngularJS no elemento <body>, mas deve ser colocada em frente ao seu script angularJS:
Instância de AngularJS
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. ng-Controller = "myctrl"> {{primeironame + "" + lastName}} </div> <cript> var app = angular.module ("myApp", []); app.Controller ("myctrl", function ($ scope) {$ scope.firstny = "; "Doe";}); </script> </body> </html>Resultados em execução:
John Doe
O exposto acima é uma compilação das informações do módulo AngularJS e continuaremos a adicioná -las mais tarde. Espero que possa ajudar a programar amigos.