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.
Marcadores:

Comentários

Postar um comentário

Postagens mais visitadas do Blog