java script aula 10 - angularjs

23
ANGULARJS por: Cristiano Pires Martins fonte: http://javascriptbrasil.com http://tableless.com.br http://www.w3schools.com https://www.angularjs.org http://www.devmedia.com.br

Upload: cristiano-pires-martins

Post on 16-Feb-2017

1.113 views

Category:

Internet


6 download

TRANSCRIPT

Page 1: Java script   aula 10 - angularjs

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

Page 2: Java script   aula 10 - angularjs

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>

Page 3: Java script   aula 10 - angularjs

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/

Page 4: Java script   aula 10 - angularjs

Pré-requisitos

➤ Conhecer:

➤ HTML

➤ CSS

➤ JavaScript

Page 5: Java script   aula 10 - angularjs

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

Page 6: Java script   aula 10 - angularjs

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>

Page 7: Java script   aula 10 - angularjs

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>

Page 8: Java script   aula 10 - angularjs

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

Page 9: Java script   aula 10 - angularjs

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>

Page 10: Java script   aula 10 - angularjs

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

Page 11: Java script   aula 10 - angularjs

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.

Page 12: Java script   aula 10 - angularjs

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.

Page 13: Java script   aula 10 - 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.

Page 14: Java script   aula 10 - angularjs

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/

Page 15: Java script   aula 10 - 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/

Page 16: Java script   aula 10 - 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:

Page 17: Java script   aula 10 - angularjs

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/

Page 18: Java script   aula 10 - 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.

Page 19: Java script   aula 10 - angularjs

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/

Page 20: Java script   aula 10 - 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).

Page 21: Java script   aula 10 - angularjs

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:

Page 22: Java script   aula 10 - angularjs

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/

Page 23: Java script   aula 10 - angularjs

Código disponível…

➤ https://github.com/tableless/exemplos/tree/gh-pages/angularjs/lista-compras/