Posted by Clayton Casteli On July - 17 - 2015 1 Comment

O AngularJS é um framework javascript que pode ser adicionado a uma página html pela tag 'script'.
Esse framework estente atributos html através das diretivas 'directives' e realiza o bind dos dados através das expressões 'expressions'.

Diretivas comuns na construção de uma aplicação AngulaJS.

  • A diretiva ng-app define uma aplicação AngularJS.
  • A diretiva ng-controller especifica a classe controller que contém toda a lógica de uma aplicação angulaJS, funções, valores;
  • A diretiva ng-model faz o bind do value em uma tag html para uma propriedade no escopo de controlador; ex: input, select, textarea,
  • A diretiva ng-bind faz o bind dos dados da aplicaçao para a view html, também podemos utilizar a expression {{ expression }}.
  • A diretiva ng-init initialize variáveis em uma aplicação AngularJS.

Após explicadas vamos mostrar uma aplicação angular simples, apenas para reforçar os conceitos mostrados acima

Angular JS Developer Guide

<pre><?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- ng-app application -->
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
    var dir = angular.module("myApp", []);
    dir.controller("myController", function($scope) {
      
      <!--criação de uma array -->
        $scope.peopleList = [ {
            nome : "Clayton"
        }, {
            nome : "Christiane"
        }, {
            nome : "Regiane"
        } ];

       <!-- criação de uma variavel simples nome -->
       $scope.nome = "Clayton";

        $scope.color = "None";
        
        <!-- criação de uma funcao -->
        $scope.addColor = function(option) {
            
            $scope.color = option.color;            
        };
        
        <!-- criação de uma funcao -->
        $scope.addPeople = function(people) {
            
            $scope.peopleList.push(people);
            delete $scope.people;
        };

    });
</script>

<title>title</title>
</head>
<!-- controller -->
<body ng-controller="myController">

    <!-- ng-model faz o bind do nome para a variável de scopo do controller-->
    Nome: <input type="text" ng-model="nome"/> 

    <!-- ng-bind  faz o bind da variável nome do scopo para a view -->
<h3 ng-bind="nome"></h3>
</body>
</html>

Esse post mostra uma aplicação simples em Angular Js, com a criação de uma aplicação, o controller onde dados e funções são gerenciados bem como a ações de algumas diretivas para fazer o bind dos dados.

Diretivas

As diretivas estedem o vocabulário HTML e permintem criarmos novos comportamentos ou mesmo desenvolver nossos proprios componentes reutilizavéis.As diretivas são aplicadas em ettributos, elementos, class, comentários.

ngRepeat Diretiva utilizada para fazer iteração em arrays.

<table>
 <thead>
  <tr>
   <th>Nome</th>
  </tr>
 </thead>
 <tbody>
  <tr ng-repeat="people in peopleList">
   <td><span ng-bind="people.nome"></span></td>
  </tr>
 </tbody>
 </table>

ngModel Para fazer o bind de um elemento a uma propriedade do scopo.

<!-- o Valor digitado aqui estara disponivel na variavél valor do $scope -->
 <input type="text" ng-model="color" placeholder="Qual a cor?" />

ngBind Para fazer o bind de uma propriedade do escopo no elemento

<!-- quando a variavél color for preenchida poderá ser vista aqui. -->
<h3 ng-bind="color"></h3>

ngClick Possibilita o bind de um comportamento associado ao evento de click

<!-- Será adicionada ao array de pessoas peopleList -->
<input type="text" ng-model="people.nome" placeholder="Digite o nome da pessoa" />
<button ng-click="addPeople(people)">Park</button>

ngOptions Essa diretiva pode ser utilizada para fazer o carregamento de dados em um elemento select.

<select ng-model="people.nome" ng-options="nome for people in peopleList">
 Nomes
 </select>

ngShow ou ngHide Para alterar a visibilidade de um código

<!-- Caso seja maior que zero mostra -->
<div ng-show="peopleList.length > 0">
   Não esta vazia.
 </div>

<!-- Caso seja maior que zero não mostra -->
<div ng-hide="peopleList.length > 0">
 Esta vazia
 </div>

ngIf Embora possa ser usada com a mesma finalidade de ngShow essa diretiva evita que o elemento seja renderizado caso não passe pelo teste do if.

<div ng-if="peopleList.length > 0">
 Há itens
 </div>

ngInclude Para incluir fragmentos de código HTML.

<div ng-include="'menu-lateral.html'"></div>

About the author

Clayton Casteli Atua com desenvolvimento de software, J2EE, C/C++, IBM BPM. É entusiasta de novas tecnologias, principalmente open source. Formado em Engenharia da Computação pela PUCCAMP-SP, Pós-Graduado pela UNICAMP em Engenharia de Software com enfase em SOA e Pós-Graduado em Business Intelligence pelo IBTA.

Be Sociable, Share!

One Response so far.

  1. Allan BC says:

    Um dos melhores tutoriais sobre angular que eu vi na internet. Está de parabéns!!!


Protected by WP Anti Spam