AngularJS - Trabalhando com ngApp

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:
  • 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


<!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:
  • 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.


Código fonte

Comentários

Postar um comentário

Popular Posts

Criando arquivos de log com Log4J

Monitorando o Tomcat com Java VisualVM

AngularJS - Formatando Datas com o Filter Date

Injeção de dependências em Java EE usando @Inject, @EJB e @Resource ?

Gerenciamento de Transações com EJB - Parte 2

Configurando o arquivo application.properties do SpringBoot

JBoss AS 7 - Instalação e Configuração

Lendo e Manipulando arquivos CSV com Java

Métodos Utilitários da Classe String

Criando uma Aplicação com Spring Boot e MongoDB