Pular para o conteúdo principal

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

Postagens mais visitadas deste blog

Utilizando LocalDate, LocalDateTime e LocalTime na Prática

Tudo bem pessoal, hoje iremos avaliar e analisar operações de manipulação de Datas envolvendo a JavaTime API introduzida no Java 8.

Exemplos da java.time API
Já se passaram alguns anos desde o lançamento do Java 8 e mesmo após este período, há empresas que desconhecem o poder da java.time API, esta foi uma nova API de datas introduzida no Java 8 visando resolver problemas que tínhamos com as velhas classes Date e Calendar.

Vamos mostrar vários exemplos práticos do uso da API:
Criação de objetos No exemplo abaixo, estamos criando os objetos para manipulação de datas, perceba que temos 3 tipos, sendo LocalDate para manipular datas, LocalDateTime para manipular data/hora e LocalTime para horas:
LocalDate localDate = LocalDate.now(); LocalDateTime localDateTime = LocalDateTime.now(); LocalTime localTime = LocalTime.now();
Utilizando formatação Aqui realizamos a operação de formatação, perceba que não foi necessário utilizar a classe SimpleDateFormat, que usaríamos em conjunto com D…

Lendo e Manipulando arquivos CSV com Java

Olá hoje veremos como realizar a leitura e manipulação de arquivos CSV com Java, mostrando que as novas versões da plataforma Java deixaram algumas tarefas simples de serem realizadas.

Exemplo de Arquivo Hoje em dia é comum ao realizar integrações ou carga de dados o uso de arquivos CSV, isto porque, este arquivo possui uma estrutura de fácil entendimento e simples de manipular na maioria das plataformas de desenvolvimento.

Para realizar a leitura dos dados vamos manipular um arquivo com as seguintes colunas: namecpfagephone address:

name;cpf;age;phone;address caio;123456789;20;1145223643;AvenidaPaulista vinicius;147852369;18;1125253625;AvenidaManoel sandra;963258741;30;1174587858;RuaTeixeira regina;125478522;40;1145254536;RuaFernando fernando;785245563;42;1145253669;RuaPereira augusto;456123014;50;1125363633;AvenidaPaulinia maria;456123789;10;1125455525;AvenidaNossaSenhora
Para representar os dados em objetos Java iremos utilizar a seguinte classe:

importlombok.AllArgsConstruc…

Versionamento de Banco Dados com Flyway

Olá pessoal, hoje iremos analisar e aprender como realizar o versionamento e gerenciamento das bases de dados relacionais utilizando o framework Flyway.

Versionamento de Banco Dados Ao trabalhar com desenvolvimento de sistemas é comum realizarmos o versionamento, isso porque uma aplicação pode necessitar de correções, novas funcionalidades e evoluções, onde para garantir a compatibilidade e cuidar do seu ciclo de vida, geramos versões onde é especificado quais itens estão presentes em cada release.
Vamos imaginar seguinte cenário: Sistema ERP1.0.0: Entrega dos módulos Financeiro e RH;1.1.0: Entrega do módulo Contas a Receber. Perceba que a ideia é controlar o que cada versão possui de diferente, e para controlar essas mudanças no lado da aplicação existem várias técnicas e ferramentas, mas e para controlar as mudanças no lado do Banco de dados ? 
Para isso podemos utilizar ferramentas de versionamento que ajudam a realizar este controle, a ferramenta que iremos utilizar é o Flyway.
Con…