Hoje iremos continuar a serie de tutorias sobre o AngularJS, nesse tópico falaremos sobre as principal diretiva do framework, que é a ngApp.
O Que são Módulos ?
O AngularJS é um framework baseado em módulos, ou seja, com ele conseguimos dividir nossa aplicação em várias partes, com isso ganhamos em alguns pontos, tais como:
No exemplo acima, temos um código mais complexo e detalhado, vamos nos atentar no funcionamento da diretiva ngApp:
Até a próxima.
O Que são Módulos ?
O AngularJS é um framework baseado em módulos, ou seja, com ele conseguimos dividir nossa aplicação em várias partes, com isso ganhamos em alguns pontos, tais como:
- Facilidade de Manutenção: Pois conseguimos realizar uma alteração em um módulo especifico, sem a necessidade de alterar o resto da aplicação;
- Reuso: Conseguimos reaproveitar códigos em varias partes da nossa aplicação, até mesmo podemos reaproveitar em aplicações diferentes, Ex: um módulo de validação onde podemos ter validadores de CPF e CNPJ, que são comuns em sistemas corporativos.
Usando a diretiva ngApp
Como já sabemos para trabalhar com o AngularJS, precisamos criar, utilizar, e estender módulos, e para inicializar uma aplicação, temos que declarar em nossa view a diretiva ngApp, que é a responsável por determinar o escopo da aplicação nas páginas html, vamos acompanhar alguns exemplos:
1- Uso sem código JavaScript
Como já sabemos para trabalhar com o AngularJS, precisamos criar, utilizar, e estender módulos, e para inicializar uma aplicação, temos que declarar em nossa view a diretiva ngApp, que é a responsável por determinar o escopo da aplicação nas páginas html, vamos acompanhar alguns exemplos:
1- Uso sem código JavaScript
<!DOCTYPE html> <html data-ng-app=""> <head> <title>AngularJS - Trabalhando com ngApp</title> </head> <body> <h2>Exemplo sem o uso de código JavaScript</h2> Soma: {{1 + 10}} </body> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></scrict> </html>
No exemplo acima temos alguns detalhes importantes a serem analisados:
2- Uso com código JavaScript
- Declaramos o data-ng-app na tag html, ou seja, em todo escopo da nossa página será possível trabalhar com recursos do framework;
- Não criamos nenhum código JavaScript, com isso não precisamos atribuir um nome a diretiva, basta apenas declarar como data-ng-app="".
2- Uso com código JavaScript
<!DOCTYPE html> <html data-ng-app="exemploAngular"> <head> <title>AngularJS - Trabalhando com ngApp</title> </head> <body data-ng-controller="exemploCtrl as ctrl"> <h2>Exemplo de uso com código JavaScript</h2> Soma: {{ctrl.soma}} </body> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <script type="text/javascript"> angular.module("exemploAngular", []); angular.module("exemploAngular").controller("exemploCtrl", [function(){ this.soma = (1 + 10); }]); </script> </html>
No exemplo acima, temos um código mais complexo e detalhado, vamos nos atentar no funcionamento da diretiva ngApp:
- No código JavaScript, criamos um módulo chamado exemploAngular, para criação de módulos utilizamos a seguinte sintaxe: angular.module(nome_do_modulo, []), onde:
- nome_do_modulo: Nome do módulo desejado;
- []: Outros módulos, que o nosso módulo terá dependência.
- Referenciamos nosso módulo exemploAngular novamente utilizando a tag html, através de data-ng-app="exemploAngular".
Agora conhecemos o funcionamento da diretiva ngApp, como criar módulos, e como vincular um módulo a nossa pagina html.
Até a próxima.
excelente
ResponderExcluir