Um módulo AngularJS define um aplicativo.
O módulo é um recipiente para as diferentes partes de uma aplicação.
O módulo é um recipiente para os controladores da aplicação.
Controladores sempre pertencer a um módulo.
Criando um módulo
Um módulo é criado usando a função AngularJS angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>O parâmetro "myApp" refere-se a um elemento HTML na qual o aplicativo será executado.
Agora você pode adicionar controladores, directivas, filtros, e mais, para a sua aplicação AngularJS.
Adicionando um controlador
Adicionar um controlador para a sua aplicação, e referem-se ao controlador com o ng-controller directiva:
Exemplo
<div ng-app="myApp" ng-controller= "myCtrl" >
{{ firstName + " " + lastName }}
</div>
<script>
var
app
= angular.module( "myApp" ,
[]);
app.controller( "myCtrl" , function($scope) {
$scope.firstName
= "John";
$scope.lastName
= "Doe";
});
</script>
Tente você mesmo " Você vai aprender mais sobre os controladores mais adiante neste tutorial.
Adicionando uma directiva
AngularJS tem um conjunto de directivas internas em que você pode usar para adicionar funcionalidade a sua aplicação.
Para uma referência completa, visite o nosso AngularJS directiva de referência .
Além disso, você pode usar o módulo para adicionar suas próprias diretrizes para suas aplicações:
Exemplo
<div ng-app="myApp" w3-test-directive></div>
<script>
var app =
angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
template : "I was made in a directive constructor!"
};
});
</script> Tente você mesmo " Você vai aprender mais sobre diretrizes mais tarde neste tutorial.
Módulos e controladores de Arquivos
É comum em aplicações AngularJS para colocar o módulo e os controladores em arquivos JavaScript.
Neste exemplo, "myApp.js" contém uma definição de módulo de aplicação, enquanto que "myCtrl.js" contém o controlador:
Exemplo
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app=" myApp "
ng-controller=" myCtrl ">
{{ firstName + " " + lastName }}
</div>
<script src=" myApp.js "></script>
<script src=" myCtrl.js "></script>
</body>
</html>
Tente você mesmo " myApp.js
var app = angular.module( "myApp" , []);
 | O parâmetro [] na definição do módulo podem ser utilizados para definir os módulos dependentes. |
|---|
| Sem o parâmetro [], você não está criando um novo módulo, mas a recuperação de um já existente. |
|---|
myCtrl.js
app.controller( "myCtrl" , function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
As funções podem poluir o espaço global
funções globais deve ser evitado em JavaScript. Eles podem ser facilmente substituídas ou destruídas por outros scripts.
AngularJS módulos reduz este problema, mantendo-se todas as funções locais para o módulo.
Quando carregar a biblioteca
Embora seja comum em aplicações HTML para colocar scripts de no final do <body> elemento, é recomendável que você carregar a biblioteca AngularJS quer no <head> ou no início do <body> .
Isto é porque as chamadas para angular.module só pode ser compilado depois da biblioteca ter sido carregado.
Exemplo
<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp"
ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp",
[]);
app.controller("myCtrl", function($scope) {
$scope.firstName
= "John";
$scope.lastName
= "Doe";
});
</script>
</body>
</html>
Tente você mesmo "