Upload
cristiano-pires-martins
View
1.108
Download
6
Embed Size (px)
Citation preview
ANGULARJSpor: Cristiano Pires Martins
fonte: http://javascriptbrasil.com
http://tableless.com.br http://www.w3schools.com https://www.angularjs.org
http://www.devmedia.com.br
Introdução
➤ AngularJS é o mais novo lançamento do time de desenvolvedores do Google. Diferentemente de outros frameworks JavaScript, ele adota uma abordagem mais ligada à sintaxe HTML, funcionando como uma espécie de extensão da linguagem.
➤ AngularJS is a JavaScript framework. It is a library written in JavaScript.
➤ AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:
➤ <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
Material➤ Fonte:
➤ https://developers.google.com/speed/libraries/#angularjs
➤ AngularJS Home Page: https://angularjs.org/ (muito bom) ➤ AngularJS Guide: http://docs.angularjs.org/guide/overview
➤ Tutorial Oficial do AngularJS: http://docs.angularjs.org/tutorial
➤ Materiais: ➤ https://material.angularjs.org/latest/
➤ https://github.com/angular/material-start ➤ Exemplos práticos: http://javascriptbrasil.com/2013/10/23/aprenda-angularjs-com-estes-5-exemplos-praticos/
➤ Depuração no Chrome:
➤ https://github.com/angular/batarang ➤ Batarang - Extensão para Debug do Chrome:
➤ https://www.youtube.com/watch?v=q-7mhcHXSfM&feature=youtu.be
➤ Cursos: ➤ em vídeo: http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro
➤ http://www.devmedia.com.br/exemplo-basico-usando-angularjs-curso-completo-de-angularjs-aula-2/32149
➤ em vídeo: http://egghead.io/lessons ➤ em vídeo: https://dicasdolampada.wordpress.com/2013/10/15/videos_angularjs/
Pré-requisitos
➤ Conhecer:
➤ HTML
➤ CSS
➤ JavaScript
AngularJS Extends HTML
➤ AngularJS extends HTML with ng-directives.
➤ The ng-app directive defines an AngularJS application.
➤ The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
➤ The ng-bind directive binds application data to the HTML view.
http://www.w3schools.com/angular/angular_intro.asp
Exemplo 1
<!DOCTYPE html><html><script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><body><div ng-app="" ng-init="firstName='John'"><p>The name is <span ng-bind="firstName"></span></p></div></body></html>
Exemplo 2
<!DOCTYPE html><html lang="en-US"><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><body><div ng-app=""> <p>Name : <input type="text" ng-model="name"></p> <h1>Hello {{name}}</h1></div></body></html>
Examples explained
➤ AngularJS starts automatically when the web page has loaded.
➤ The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.
➤ The ng-model directive binds the value of the input field to the application variable name.
➤ The ng-bind directive binds the innerHTML of the <p> element to the application variable name.
http://www.w3schools.com/angular/angular_intro.asp
AngularJS Directives
➤ As you have already seen, AngularJS directives are HTML attributes with an ng prefix.
➤ The ng-init directive initialize AngularJS application variables.
http://www.w3schools.com/angular/angular_intro.asp
<div ng-app="" ng-init="firstName='John'"><p>The name is <span ng-bind="firstName"></span></p></div>
AngularJS Expressions
➤ AngularJS expressions are written inside double braces: {{ expression }}.
➤ AngularJS will "output" data exactly where the expression is written:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
http://www.w3schools.com/angular/angular_intro.asp
História
➤ A versão 1.0 do AngularJS saiu em 2012.
➤ Miško Hevery, um funcionário da Google, começou a trabalhar com AngularJS em 2009.
➤ A idea foi tão boa que hoje o projeto é oficialmente apoiado pelo Google.
Estrutura Inicial
➤ Uma aplicação web básica informando uma nova propriedade na tag do arquivo: ng-app.
<html ng-app> <head> <title>Lista de compras</title> <script src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script> </head> <body> </body></html>
http://tableless.com.br/criando-uma-aplicacao-simples-com-angularjs/
➤ O atributo ng-app na tag informa que o DOM, além de HTML, é também um documento AngularJS.
Estrutura Inicial
➤ Essa propriedade pode ser utilizada em qualquer elemento do DOM — em alguns casos, apenas uma parte do seu HTML será uma aplicação Angular.
<html ng-app> <head> <title>AngularJS - Tableless</title> <script src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>
</head> <body> <input type="text" ng-model="nome"> <p>Olá, Tableless! Meu nome é: {{ nome }}</p> </body>
</html>
http://tableless.com.br/criando-uma-aplicacao-simples-com-angularjs/
O atributo ng-app na tag informa que o DOM, além de HTML, é também um documento AngularJS.
O framework define o elemento com o atributo ng-app como a raiz da aplicação.
Explicação do Código
➤ Ao carregar o HTML no navegador e digitar qualquer coisa no input, o parágrafo é atualizado automaticamente. Perceberam: nada em JavaScript?
➤ A propriedade ng-model funciona como um canal entre a view e o form. Ela pode ser utilizada em inputs do tipo texto, selects, textareas, checkboxes e radio buttons.
➤ O model, seus dados e suas validações ficam automaticamente disponíveis no escopo da nossa aplicação.
➤ A associação de dados é feita através do famoso “bigode-bigode” ({{ }}), passando nomes presentes no escopo (o model nome).
http://tableless.com.br/criando-uma-aplicacao-simples-com-angularjs/
Enfim, javascript!
➤ Chegou a hora de escrever o primeiro código JavaScript. Criando um controller para aplicação que carrega uma lista inicial de ítens. Os ítens são armazenados no escopo da aplicação ($scope).
function ListaComprasController($scope) { $scope.itens = [
{produto: 'Leite', quantidade: 2, comprado: false}, {produto: 'Cerveja', quantidade: 12, comprado: false} ];}
http://tableless.com.br/criando-uma-aplicacao-simples-com-angularjs/
Exibindo os ítens<div ng-controller="ListaComprasController"> <table> <thead> <tr> <th>Produto</th> <th>Quantidade</th> </tr> </thead> <tbody> <tr ng-repeat="item in itens"> <td><strong>{{ item.produto }}</strong></td> <td>{{ item.quantidade }}</td> </tr> </tbody> </table></div>
http://tableless.com.br/criando-uma-aplicacao-simples-com-angularjs/
Adicionar um novo bloco HTML com a tabela de listagem dos produtos:
Explicando
➤ Duas novidades foram apresentadas no HTML anterior:
➤ O atributo ng-controller informa o nome do controller JavaScript responsável pelo bloco contido no elemento, no caso o controller ListaComprasController definido anteriormente.
➤ O atributo ng-repeat executa um loop na variável itens declarada no escopo da aplicação, retornando cada item e imprimindo o produto e a quantidade em uma linha da tabela. O formato é: <retorno> in <coleção>.
http://tableless.com.br/criando-uma-aplicacao-simples-com-angularjs/
Adicionando Produtos
➤ Para não ficar apenas com 4 linhas de JavaScript, será adicionada uma funcionalidade que inclui ítens em na lista de compras.
➤ O primeiro passo é criar um formulário que será responsável pela ação:
<form class="form-inline" name="formItem"> <input type="text" ng-model="item.produto">
<input type="number" ng-model="item.quantidade"> <button ng-click="adicionaItem()">adicionar ítem</button></form>
http://tableless.com.br/criando-uma-aplicacao-simples-com-angularjs/
O atributo ng-model está sendo utilizando novamente para definir um model para os inputs. O controller passa a receber diretamente informações sobre esses campos.
ng-click
➤ A novidade dessa vez fica por conta do atributo ng-click, que recebe uma função que precisa ser declarada no controller:
function ListaComprasController($scope) { $scope.itens = [ {produto: 'Leite', quantidade: 2, comprado: false}, {produto: 'Cerveja', quantidade: 12, comprado: false} ]; $scope.adicionaItem = function () { $scope.itens.push({produto: $scope.item.produto, quantidade: $scope.item.quantidade, comprado: false}); $scope.item.produto = $scope.item.quantidade = ''; };}
http://tableless.com.br/criando-uma-aplicacao-simples-com-angularjs/
Explicando
➤ Ao clicar no botão, o produto é adicionado à tabela.
➤ Aqui o model poderia estar realizando diversas validações disponíveis na API do framework entre outras coisas.
➤ Porém, no exemplo, apenas foi adicionado um novo item à lista de produtos e em seguida os models foram limpos (os campos do formulário).
Teste
➤ Por ser um framework que demanda um código JavaScript mais estruturado, fica bem simples testar essa aplicação. Utilizando Jasmine (http://tableless.com.br/testando-seu-codigo-jquery-com-jasmine-parte-1/), por exemplo, poderia facilmente testar o controller dessa forma:
describe('Lista Compras Unitário', function () { describe('ListaComprasController', function () { beforeEach(function () { this.$scope = {}; this.controller = new ListaComprasController(this.$scope); }); it('deve criar "itens" com 2 ítens', function () { expect(this.$scope.itens.length).toBe(2); }); describe('adicionaItem', function () { it('deve adicionar um novo ítem à lista com dados do escopo', function () { this.$scope.item = {}; this.$scope.item.produto = 'Carne'; this.$scope.item.quantidade = 5; this.$scope.adicionaItem(); expect(this.$scope.itens.length).toBe(3); expect(this.$scope.itens[2].produto).toBe('Carne'); expect(this.$scope.itens[2].quantidade).toBe(5); expect(this.$scope.itens[2].comprado).toBeFalse; }); }); });});
http://tableless.com.br/criando-uma-aplicacao-simples-com-angularjs/
Código disponível…
➤ https://github.com/tableless/exemplos/tree/gh-pages/angularjs/lista-compras/