Java script aula 10 - angularjs

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

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 ﬁle, 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 Oﬁcial 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 deﬁnes 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="ﬁrstName='John'"> <p>The name is <span ng-bind="ﬁrstName"></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 ﬁeld 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 ﬁrst 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 é oﬁcialmente 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 ﬁcam 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 deﬁnido 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 ﬁcar 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 ﬁca 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, ﬁca 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/

Java script aula 10 - angularjs

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Java script aula 10 - angularjs

Mais de Cristiano Pires Martins

Último

Java script aula 10 - angularjs