Módulos em AngularJS
- 24-07-2022
- Toanngo92
- 0 Comments
Em angularJs, um módulo é um componente que contém todos os outros componentes em angularJS, como controladores, serviços, filtros, diretivas… ou qualquer coisa que possa ser referenciada através do módulo. No angularJS fazemos toda a funcionalidade em módulos, e uma página HTML tem apenas um módulo, e este módulo pode ser usado para inicializar e iniciar uma aplicação.
Considere o exemplo abaixo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example Module</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="myApp"> </body> <script> var app = angular.module('myApp', []); console.log(app); </script> </html>
Resultados ao fazer login no console do navegador
Analise o código acima:
- Linha 10: no corpo, há um atributo html chamado ng-app , o valor dentro é "myApp". Isso é chamado de diretiva, dizendo ao angularJS que este é o módulo da aplicação, ao inicializar o módulo sob a camada de script, passaremos este nome "myApp" para inicializar
- Linha número 14: var app = angular.module('myApp', []); Aqui, declaramos a variável app e atribuímos o valor igual ao valor de retorno do método .module() do objeto angular, este método passa 2 parâmetros, o primeiro parâmetro é a string 'myApp' corresponde exatamente ao valor da diretiva ng-app em a estrutura da tag html, o 2º parâmetro neste exemplo é um array vazio [], nos próximos artigos, falaremos sobre passar valores para este array e conceituar como dependência . Neste contexto, não estamos passando nenhuma dependência , então este array é declarado vazio
- Linha 15: logamos a variável app no navegador e vemos que esta variável app é um objeto, contendo vários métodos como controller, component, filter, service…
Pelo menos, até o presente post, entendemos que o módulo principal é o maior objeto do angularJS e este objeto é o container para outros componentes filhos em uma aplicação angularJS.