Pular para o conteúdo principal

AngularJS - Conhecendo o Framework

Olá pessoal, hoje iremos começar uma série de tutoriais falando sobre o AngularJS, que é um framework JavaScript que veem se tornando muito popular entre os frameworks de front-end.

O  Framework AngularJS

O AngularJS é um framework JavaScript mantido pelo Google para o desenvolvimento de aplicações ricas para Web, sua principal característica é a forma de trabalho, onde suas diretivas estendem os componentes do HTML utilizando marcações. 

Para detalhes sobre o AngularJS podemos visitar o site oficial, onde também encontramos exemplos, links para downloads, cursos, etc.

Site oficial: https://angularjs.org/
Site com tutoriais e exemplos: http://www.w3schools.com/angular/

Começando com AngularJS

Como qualquer outro framework JavaScript, tudo começa com uma importação do arquivo principal do framework:


<!DOCTYPE html>
<html>
  <head>
    <title>Exemplo AngularJS</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  </head>
  <body>
  
  </body>
</html>


Conhecendo as Diretivas

As diretivas do AngularJS, são extensões dos atributos das tags HTML, as diretivas possuem as seguintes caraterísticas:
  • Começam com o prefixo ng-(nome da diretiva);
  • São tags que o AngularJS usa para manipular seus eventos e ações;
  • São colocadas diretamente na tag HTML, por isso que o framework tem o comportamento de extensão do HTML.

Seguindo a normalização do HTML 5, ao invés de usar o prefixo ng-(nome da diretiva) é recomendado usar data-ng-(nome da diretiva).

Vamos agora analisar 3 principais diretivas do AngularJS:
  • data-ng-app: Responsável por inicializar uma aplicação feita com AngularJS, geralmente é adicionada a um elemento pai ma hierarquia de tags do HTML;
  • data-ng-model: Responsável por marcar um ponto de entrada de dados, geralmente aplicada em tags de formulários;
  • data-ng-bind: Utilizada para exibição de dados processados pelo AngularJS.

Exemplo Básico com AngularJS

Agora para mostrar o funcionamento do framework e suas diretivas, vamos montar um exemplo onde entraremos com um dado, e iremos exibi-lo automaticamente na tela:


<!DOCTYPE html>
<html data-ng-app="">
  <head>
    <title>Exemplo AngularJS</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  </head>
  <body>
    <div>
      <p>Digite seu Nome: <input type="text" data-ng-model="nome" /></p>
      <p>Seu nome é: <span data-ng-bind="nome"></span></p>
    </div>
  </body>
</html>

Nos próximos tutorias iremos evoluir os exemplos, utilizando outros comportamentos e diretivas do framework AngularJS.

Download dos exemplos: Conhecendo AngularJS

Até a próxima.

Comentários

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…