Falamos muito sobre os conceitos de MVC, MVVM e MVP e criamos um exemplo básico com o angularjs, agora vamos desenvolver uma aplicação um pouco mais complexa.
Quero fazer uma aplicação para lembrar os aniversários dos meu amigos.
Esta aplicação terá o nome e a data de nascimento nada mais.
Começaremos criando dentro da pasta do servidor uma pasta onde estarão nossos arquivos.
Minha estrutura de pasta ficou assim htdocs/appAniversario.
Dentro da pasta appAniversario criei outra pasta chamada js, onde ficará nosso arquivo app.js
Na raiz da nossa pasta appAniversario criaremos o index.html, nele estará contida nossa view.
Começaremos pelo arquivo app.js
function loadPage () { angular.module("appAniversario", []) .controller("appController",function($scope){ $scope.nameApp = 'Lista de Aniversário'; }); } window.load = loadPage();
Mesma ladainha de sempre, criei uma função loadPage que chamará o arquivo após todo o DOM ser completamente carregado.
Dentro da função loadPage temos nossa primeira linha de código em angular.
Estou criando um modulo e dizendo que seu nome é appAniversario, o segundo parâmetro recebe as dependências deste modulo, como nós ainda não estamos trabalhando com dependências ele recebe uma array vazia.
Na segunda linha informo ao angular que este modulo terá um controller, e que o nome dele será appController, o segundo parâmetro declaramos uma função que recebera $scope como parâmetro.
O que é o $scope?
$scope é um objeto javascript que é responsável em ligar a view com o controller, nos controllers os dados do model são acessados via $scope.
E dentro do controller na terceira linha atribuímos para objeto $scope um atributo chamado appName que recebe como valor ‘Lista de Aniversário’.
index.html
<html ng-app="appAniversario"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Lista aniversário</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script src='js/app.js'></script> <head> <body ng-controller="appController"> <div ng-bind="nameApp"></div> </body> </html>
A primeira diretiva que usamos no nosso HTML é a diretiva ng-app, esta diretiva é responsável por desigar o elemento raiz do aplicativo, normalmente colocamos nas tags html ou body, ela recebe o nome do nosso modulo angular que é appAniversario.
Ainda dentro da tag head, importamos nossos códigos javascript.
Estou usando o angular que está hospedado no servidor do google, mas você pode fazer download e utilizar um local também.
O segundo script que estou importando é o próprio app.js, que contem nosso modulo angular.
Dentro da tag body estou declarando a diretiva ng-controller que recebe como valor o appController, que é nosso controller angular. Desta forma todo meu body ou corpo da página html terá como controller o appController, se eu tiver mais que um controller na minha página, posso declara-los dentro de divs, assim cada um será responsável por uma view.
Deixando um pouco mais claro.
Estou declarando que meu body é uma view que é controlada pelo appController.
Quando executarmos o index.html na tela aparecerá escrito ‘Lista de Aniversário’, que é o valor do ng-bind dentro da div, ‘nameApp’.
nameApp é um atributo de $scope, porem não precisamos declarar $scope.nameApp, a nossa view automaticamente entende que nameApp é um atributo de scope, basta colocarmos este atributo dentro de ng-bind.
Outra forma de exibir os dados é usando abre e fecha chaves duas vezes e passando o valor do atributo que queremos imprimir, por exemplo:
<div>{{nameApp}}</div>
é a mesma coisa que:
<div ng-bind="nameApp"></div>
Nossa lista de aniversário só tem o titulo até agora, temos que implementar o nome e a data de nascimento dos nossos amigos para que possamos exibir na tela.
Então dentro do nosso controller criaremos um novo atributo para nosso $scope que receberá um array de objetos.
$scope.pessoas = [ {nome:'José', nascimento:'22/09/1983'}, {nome:'Tati', nascimento:'30/06/1982'}, {nome:'Rafael', nascimento:'01/07/1990'}, {nome:'Carolina', nascimento:'14/12/1987'} ];
Agora temos dentro do nosso controller uma lista dos nossos amigos e a data de aniversário deles, temos que exibir então na nossa view.
<body ng-controller="appController"> <div>{{nameApp}}</div> <div> {{pessoas[0].nome}} - {{pessoas[0].nascimento}} {{pessoas[1].nome}} - {{pessoas[1].nascimento}} {{pessoas[2].nome}} - {{pessoas[2].nascimento}} </div> </body>
Somente alterei o body do nosso html, optei por exibir o nome do nosso app usando o “{ { } }” ao invés do ng-bind e dentro de uma outra div eu listei o nome e a data de nascimento do atributo pessoas do nosso $scope, no entanto toda vez que adicionar mais um objeto dentro da nossa array pessoas tenho que vir e adicionar mais uma linha no html.
Existe solução para isso?
O angular tem uma diretiva chamada ng-repeat que funciona muito parecido com um for in.
<body ng-controller="appController"> <div>{{nameApp}}</div> <div ng-repeat="p in pessoas"> {{p.nome}} - {{p.nascimento}} </div> </body>
Perceba o quanto nosso código diminuiu, ficando assim mais fácil para dar manutenção.
A diretiva ng-repeat recebe pessoas, que é nosso array de objetos dentro do nosso controller, e falamos para ela que cada objeto ficará guardado dentro de uma variável “p”, e depois imprimimos os valores de “p”.
O resultado será este
Bognar Junior 
Excelente explicação ! Encontrar uma nova forma de entender esse assunto nunca é demais.
Obrigada !!
Muito boa essa introdução, parabéns.