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.

AngularJS Directives
➤ As you have already seen, AngularJS directives are HTML
attributes with an ng prefix.
➤ The ng-init directive initialize AngularJS application variables.
<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>

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>
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).

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}
];
}

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>
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>.

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>
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 = '';
};
}

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;
});
});
});
});

Código disponível…
➤ https://github.com/tableless/exemplos/tree/gh-pages/
angularjs/lista-compras/

Java script aula 10 - angularjs

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Java script aula 10 - angularjs

Semelhante a Java script aula 10 - angularjs (20)

Mais de Cristiano Pires Martins

Mais de Cristiano Pires Martins (9)

Java script aula 10 - angularjs