Módulos AngularJS
- Página anterior Expressões AngularJS
- Próxima página Directivas AngularJS
O módulo AngularJS define uma aplicação.
O módulo é o contêiner de diferentes partes da aplicação.
O módulo é o contêiner do controlador da aplicação.
O controlador sempre pertence a um módulo.
Criar módulo
Usando funções AngularJS,angular.module Criar um módulo:
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
O parâmetro "myApp" se refere ao elemento HTML no qual o aplicativo será executado.
Agora, você pode adicionar controladores, diretivas, filtros e mais no aplicativo AngularJS.
Adicionar controlador
Adicione um controlador ao seu aplicativo usando ng-controller A diretiva faz referência ao controlador:
exemplo
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "Bill";
$scope.lastName = "Gates";
});
</script>
Você aprenderá mais sobre controladores mais tarde no tutorial.
Adicionar diretivas
O AngularJS tem um conjunto de diretivas built-in que você pode usar para adicionar funcionalidades ao aplicativo.
Para referência completa, acesse nossa referência de diretivas AngularJS.
Além disso, você pode usar módulos para adicionar suas próprias diretivas ao aplicativo:
exemplo
<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "Fui feito em um construtor de diretiva!"
};
});
</script>
Você detalhará mais tarde no tutorial sobre diretivas.
Módulos e controladores no arquivo
É comum em aplicações AngularJS colocar módulos e controladores em arquivos JavaScript.
Neste exemplo, "myApp.js" contém a definição do módulo da aplicação, enquanto "myCtrl.js" contém o controlador:
exemplo
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/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>
myApp.js
var app = angular.module("myApp", []);
Os parâmetros [] na definição do módulo podem ser usados para definir módulos dependentes.
Se não houver parâmetros [], você não está criando um novo módulo, mas recuperando um módulo existente.
myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "Bill";
$scope.lastName= "Gates";
});
As funções podem poluir o espaço de nomes global
É aconselhável evitar o uso de funções globais em JavaScript. Elas são facilmente sobreescritas ou danificadas por outros scripts.
Módulos AngularJS reduzem esse problema mantendo todas as funções locais no módulo.
quando carregar a biblioteca
Embora seja comum colocar scripts em aplicações HTML <body> no final do elemento é comum, mas é recomendado que você o faça <head> ou <body> no início da carga da biblioteca AngularJS.
Isto é porque só após a carga da biblioteca é que angular.module da chamada.
exemplo
<!DOCTYPE html>
<html>
<body>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/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 = "Bill";
$scope.lastName = "Gates";
});
</script>
</body>
</html>
- Página anterior Expressões AngularJS
- Próxima página Directivas AngularJS
