+

Formação Front-End (Angular JS + Boostrap)

Julian Cesar dos Santos

Versão 1.1
 Agenda

Aula 1 – Introdução ao JavasScript (JS)

Aula 2 – Introdução ao AngularJS

Aula 3 – AngularJS // Directives

Aula 4 – AngularJS // Controllers

Aula 5 – AngularJS // Services

Aula 6 – AngularJS // Views

Aula 7 – Requisições AJAX

Aula 8 – Armazenamento Local

Aula 9 – Bootstrap e Responsividade

Aula 10 – Projeto Final

Curso Front-End (AngularJS + Bootstrap) 2

 O que o Curso NÃO abordará


Ferramentas

IDE

Bower

Grunt

Node (NPM)

Outras Bibliotecas Auxiliares

Curso Front-End (AngularJS + Bootstrap) 3

 IDE?!


Eclipse

[Link]

Curso Front-End (AngularJS + Bootstrap) 4

 Aula 01
Introdução ao JavaScript

+
Curso Front-End (AngularJS + Bootstrap)
 JavaScript

O que é?

JavaScript é uma linguagem de programação interpretada.
Foi originalmente implementada como parte dos
navegadores web para que scripts pudessem ser
executados do lado do cliente e interagissem com o
usuário sem a necessidade deste script passar pelo
servidor, controlando o navegador, realizando
comunicação assíncrona e alterando o conteúdo do
documento exibido.

Curso Front-End (AngularJS + Bootstrap) 6

 JavaScript

Para que foi criado?

O uso primário de JavaScript é escrever funções que são
embarcadas ou incluídas em páginas HTML e que
interagem com o Modelo de Objeto de Documentos
(DOM) da página. Alguns exemplos deste uso são:

abrir uma nova janela com controle programático sobre seu
tamanho, posição e atributos;

validar valores de um formulário para garantir que são aceitáveis
antes de serem enviados ao servidor;

mudar imagens à medida que o mouse se movimenta sob elas.

Curso Front-End (AngularJS + Bootstrap) 7

 JavaScript

DOM!?

O Modelo de Objeto de Documento (do inglês Document
Object Model - DOM) é uma convenção multiplataforma
e independente de linguagem para representação e
interação com objetos em documentos HTML, XHTML e
XML.

Para apresentar um documento como uma página HTML,
a maioria dos navegadores utilizam um modelo
internacional similar ao DOM. Os nós de cada documento
são organizados em uma estrutura de árvore, chamada de
árvore DOM, com o nó superior denominado "Document
object" (objeto Documento).

Curso Front-End (AngularJS + Bootstrap) 8

 JavaScript

Funções

Crie uma pasta JavaScript no seu Desktop e dentro um
arquivo chamado [Link]

Adicione o seguinte conteúdo dentro:
Tag que informa ao navagador
<script type="text/javascript"> que dentro é um código JS
function square(number) {
return number * number; Declaração da função e
} o seu parâmetro de entrada

[Link](square(2)); Retorno da função

</script>

Chamada da função e
envia da saída para o console

Abra o arquivo [Link] com o Chrome
Curso Front-End (AngularJS + Bootstrap) 9
 JavaScript

Ferramenta de Desenvolvedores

Em todos os navegadores mais modernos existe uma
ferramenta nativa que oferece algumas funcionalidades
que permitem ajudar no desenvolvimento

Para acessar a ferramenta de desenvolvimento do
Chromium aperte a tecla F12

No caso do exemplo anterior da raíz quadrada a aba
Console ficará da seguinte maneira

Saída da linha:
[Link](square(2));

Curso Front-End (AngularJS + Bootstrap) 10

 JavaScript

Funções

Outra maneira de escrever a mesma coisa:

<script type="text/javascript">
var square = function (number) {
return number * number;
}

[Link](square(2));
</script>

Curso Front-End (AngularJS + Bootstrap) 11

 JavaScript

Funções Aninhadas
<script type="text/javascript">

function operations(number1) {
function sum(number2) {
return number1 + number2;
}
return sum;
}
var func_sum = operations(3);
var result1 = func_sum(5);
[Link](result1);
var result2 = operations(3)(5);
[Link](result2);
</script>

[Link]
Curso Front-End (AngularJS + Bootstrap) 12
 JavaScript

Debug

Com a Ferramenta do Desenvolvedor aberta (F12) acesse
a aba Source

Arquivo que
Iremos manipular

Código do Arquivo

Curso Front-End (AngularJS + Bootstrap) 13

 JavaScript

Debug

Para iniciar a depuração selecione uma linha clicando no
número da linha, selecionaremos a linha 6 e atualize a
página (F5) para rodar novamente o script

Controles de
depuração

Breakpoint

Situação das
variáveis

Curso Front-End (AngularJS + Bootstrap) 14

 JavaScript

Objetos JSON Função que altera
function myFunc(theObject) { o fabricante do objeto
[Link] = "Toyota";

} Objeto do meu carro

var mycar = { make: "Honda", model: "Accord", year: 1998 };

[Link]([Link]); Mostra o fabricante

do meu carro

myFunc(mycar); Chama a função de

alteração de fabricante

[Link]([Link]);
Mostra novamente o
fabricante do meu carro
Especificação JSON: [Link]
Curso Front-End (AngularJS + Bootstrap) 15
 JavaScript

Hierarquia do objeto JavaScript

function Exemplo() {

[Link] = 'Isso é uma propriedade.',

[Link] = function() {

return 'Isso é um metódo';

var objeto = new Exemplo(); NEW!?

[Link]([Link]),

[Link]([Link]());

Curso Front-End (AngularJS + Bootstrap) 16

 JavaScript

Try...Catch

try {

throw "myException";

} catch (e) {

[Link](e);

} finally {

[Link]("Always execute");

Curso Front-End (AngularJS + Bootstrap) 17

 Aula 02
Introdução ao AngularJS

+
Curso Front-End (AngularJS + Bootstrap)
 AngularJS // Introdução

O que é?

O AngularJS é um framework baseado em MVC (Models
Views Controls). O propósito do AngularJS é tirar a View e
até o Controller do servidor, sendo assim você trabalha
somente com arquivos .html estáticos, e quando precisar
de dados é realizado uma requisição via AJAX, assim todo
o processo é processado via Client, dando a possibilidade
de você criar HTML dinâmico, com isso você ganha muita
velocidade em sua aplicação, sem depender do servidor
para criar seu HTML.

AngularJS é o que o HTML teria sido se tivesse

sido projetado para desenvolvedor aplicações.

Curso Front-End (AngularJS + Bootstrap) 19

 AngularJS // Introdução

AngularJS vs JQuery

[Link] é um framework. Na execução do [Link],
ocorre o carregamento, onde sua árvore DOM e
JavaScript é tranformada em um aplicativo angular. Isso
ocorre pois o código HTML com caracteres especiais
(diretivas e filtros angular) é compilado e o Angular realiza
uma vinculação entre Controller, Model e View

Já JQuery é uma biblioteca javascript para manipulação do
DOM (ex. mudança de cores de um elemento, eventos
onclick, animação, etc...). Na execução do JQuery, seu
código irá realizar chamadas a funções de uma biblioteca,
solicitado por algum evento DOM por exemplo

Curso Front-End (AngularJS + Bootstrap) 20

 AngularJS // Introdução

Conceitos

Template – HTML com marcação adicional

Directives – estender HTML com atributos personalizados
e elementos

Model – dados mostrados para o usuário na view com o
qual interage usuário

Scope – contexto em que o model é armazenado para que
os controllers, directives and expressions podem acessá-lo

Expressions – variáveis de acesso e funções de aplicação.

Filter – formata valores para serem mostrados para os
usuários

Curso Front-End (AngularJS + Bootstrap) 21

 AngularJS // Introdução

Conceitos (Cont.)

View – que o usuário vê (o DOM)

Data Binding – sincroniza os dados entre os Models e as
Views

Controller – lógica de negocio por trás da visualizaçao.

Module – um recipiente para as diferentes partes de um
aplicativo, incluindo controllers, services, filters, directives
que configura o Injector.

Service – conjunto de lógica de negócio reutilizável
independentes de views.

Curso Front-End (AngularJS + Bootstrap) 22

 AngularJS // Introdução

Vantagens

Manutenível

Flexível

Testável

Desacoplado

Curso Front-End (AngularJS + Bootstrap) 23

 AngularJS // Introdução

Principais Diretivas

ng-app: esta diretiva define uma aplicação AngularJS no
conteúdo HTML

ng-model: esta diretiva faz a ligação (bind) dos valores
entre a aplicação AngularJS e os campos do HTML

ng-bind: esta diretiva faz a ligação (bind) entre os dados da
aplicação AngularJS e as marcações do HTML

Curso Front-End (AngularJS + Bootstrap) 24

 AngularJS // Introdução

Primeiro App com AngularJS

Vamos para o nosso primeiro código!

Crie uma pasta AngularJS no seu Desktop e dentro um
arquivo chamado [Link]

Adicione o seguinte conteúdo dentro:
<html ng-app>
Inicializa o AngularJS e
<head>
informa o contexto do seu App

<script src="[Link]
</head>
<body>
<h1>Meu Primeiro App AngularJS </h1> Carrega o arquivo principal
</body> do framework
</html>

Abra o arquivo [Link] com o Chrome

Curso Front-End (AngularJS + Bootstrap) 25

 AngularJS // Introdução

Primeiro App com AngularJS

Adicione o seguinte conteúdo abaixo da tag H1:

Diretiva ng-model que faz a ligação

... entre a view e o model/variável
<div>
<label>Nome: </label>
<input type="text" ng-model="nome" placeholder="Digite seu nome" />
<h1> Olá, {{nome}}! </h1>
</div>
...
Mostra a variável

Curso Front-End (AngularJS + Bootstrap) 26

 AngularJS // Introdução

Primeiro App com AngularJS

ng-model: é utilizado em elementos de formulário, como
input, select e textarea. Ele faz uma interligação entre sua
View e o Model do AngularJS. Com ele é possível também
fazer o controle de validações do formulário,
possibilitando a captura do dado informado ao envio do
formulário.

{{variável}}: são as variáveis ou expressões do AngularJS,
quando ele é compilado ele substitui essa variável pelo
Model, tanto dentro de um input, como dentro de
Controllers e entre outros, ele reconhece as quatros
chaves, como uma chamada para alterar essa variável pelo
um valor.
No exemplo anterior a nossa variável é {{nome}}, pois foi
definido ao Model esta variável, como ng-model=”nome”.
Curso Front-End (AngularJS + Bootstrap) 27
 AngularJS // Introdução

Primeiro App com AngularJS

Encoding
...
<head>
<meta charset="UTF-8">
...
</head>
...


Teste de Expressão
...
</div>
<p>1 + 2 = {{ 1 + 2 }}</p>
</body>
...

Curso Front-End (AngularJS + Bootstrap) 28

 AngularJS // Introdução

Primeiro App com AngularJS

Resultado

Curso Front-End (AngularJS + Bootstrap) 29

 AngularJS // Introdução

Outro App com AngularJS
<html ng-app="myapp">
<head>
<script src="[Link]
</head>
<body>

<div ng-controller = "HelloController"

<h2>Welcome {{[Link]}} to the world!</h2>
</div>
Nosso primeiro Nosso primeiro
<script> módulo! controller!
[Link]("myapp", [])
.controller("HelloController", function($scope) {
$[Link] = {};
$[Link] = "AngularJS";
});
</script>
</body>
</html>

Curso Front-End (AngularJS + Bootstrap) 30

 Aula 03
AngularJS // Directives

+
Curso Front-End (AngularJS + Bootstrap)
 AngularJS // Directives

Diretivas

São usadas para extender as marcações do HTML

[Link]
Curso Front-End (AngularJS + Bootstrap) 32
 AngularJS // Directives

Diretiva ng-repeat

Esta diretiva repete elementos HTML para cada item
dentro de uma coleção
<div ng-app
ng-init="countries=[{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">

<h1>List of Countries with locale:</h1>

<ol>
<li ng-repeat="country in countries">
{{ 'Country: ' + [Link] + ', Locale: ' + [Link] }}
</li>
</ol>
</div>

<script src="[Link]

Curso Front-End (AngularJS + Bootstrap) 33

 AngularJS // Directives

Criando uma diretiva

Elas são muito úteis em várias situações, mas quando se
percebe que será necessario manipular o DOM dentro de
um controller muito provavelmente o correto é escrever
uma diretiva para essa função


Uma diretiva pode assumir algumas formas:

Como atributo: <a custom-button>Click me</a>

Como elemento: <custom-button>Click me</custom-button>

Como classe CSS: <a class="custom-button">Click me</a>

Como comentário: <!-- directive: custom-button -->

Curso Front-End (AngularJS + Bootstrap) 34

 AngularJS // Directives

Criando a minha própria diretiva
<script src="[Link]

<div ng-app="docsSimpleDirective" ng-controller="Controller">

<div my-customer></div>
</div>

<script>
[Link]('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
$[Link] = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])

.directive('myCustomer', function() {
return {
template: 'Name: {{[Link]}} Address: {{[Link]}}'
};
});
</script>

[Link]

Curso Front-End (AngularJS + Bootstrap) 35

 AngularJS // Directives

Detalhe Importante na Definição dos Nomes

Prefixo data- e x-: estes prefixos em qualquer diretiva é
ignorado, pois normalmente ele é usado para que o HTML
passe por algum validador

Normalização: converte os delimitadores :, -, ou _ no nome
em camelCase

Portanto: ng-bind, ng:bind, ng_bind, data-ng-bind e x-ng-

bind são a mesma coisa.

Boa pratica: prefira usar a opção de separação por hifen

(ng-bind para ngBind). E se quiser usar alguma ferramenta
de validação de HTML, use data- como prefixo (data-ng-
bind para ngBind).
Curso Front-End (AngularJS + Bootstrap) 36
 AngularJS // Directives

Detalhe Importante na Definição dos Nomes
<script src="[Link]

<div ng-app="docsBindExample" ng-controller="Controller">

Hello <input ng-model='name'> <hr/>
<span ng-bind="name"></span> <br/>
<span ng:bind="name"></span> <br/>
<span ng_bind="name"></span> <br/>
<span data-ng-bind="name"></span> <br/>
<span x-ng-bind="name"></span> <br/>
</div>

<script>
[Link]('docsBindExample', [])
.controller('Controller', ['$scope', function($scope) {
$[Link] = 'Teste de nomenclatura de diretivas';
}]);
</script>

Curso Front-End (AngularJS + Bootstrap) 37

 Aula 04
AngularJS // Controllers

+
Curso Front-End (AngularJS + Bootstrap)
 AngularJS // Controllers

Para que servem

Inicializar um escopo (variável $scope)

Adicionar comportamentos ao escopo (variável $scope)


Para que NÃO serve

Manipular a árvore DOM

Formatar campos

Filtrar saídas

Compartilhar código ou estados entre controllers

Gerenciar o ciclo de vida de outros componentes

Curso Front-End (AngularJS + Bootstrap) 39

 AngularJS // Controllers

Inicializando um Controller e seu Escopo

<script src="[Link]

<div ng-app="myApp" ng-controller="GreetingController">

{{ greeting }}
</div>

<script>
var myApp = [Link]('myApp',[]);

[Link]('GreetingController', ['$scope', function($scope) {

$[Link] = 'Hola!';
}]);
</script>

Foi usado uma anotação injeção de dependencia

para informar explicitamente a dependência
do Controller com relação ao serviço $scope

Curso Front-End (AngularJS + Bootstrap) 40

 AngularJS // Controllers

Adicionando um Comportamento no Controller

<script src="[Link]

<div ng-app="myApp" ng-controller="DoubleController">

Two times <input ng-model="num"> equals {{ double(num) }}
</div>

<script>
var myApp = [Link]('myApp',[]);

[Link]('DoubleController', ['$scope', function($scope) {

$[Link] = function(value) {
return value * 2;
};
}]);
</script>

Curso Front-End (AngularJS + Bootstrap) 41

 AngularJS // Controllers

O uso correto do Controller

De maneira geral o Controller não deve fazer muita coisa,
ele deve conter somente a lógica de negócio necessaria
para uma View

O caminho mais comum para manter o Controller limpo é
encapsular todo o trabalho que não for de negócio dentro
de Services e então usar estes por meio das dependências
do Controller
...

[Link]('Controller',['$scope','service', function($scope,service) {

...

}]);

...

Curso Front-End (AngularJS + Bootstrap) 42

 AngularJS // Controllers

Convenção do Prefixo ‘$’

É possível criar Services (Serviços), e foi criada uma
convenção com relação a serviços, escopos e outras
funcionalidades que já façam parte do próprio AngularJS,
sendo que para isso estes componentes tem como prefixo
o $, como o $scope

Não use $ como prefixo para evitar possiveis colisões de
nomes

Curso Front-End (AngularJS + Bootstrap) 43

 AngularJS // Controllers

Exemplo usando Pimentas!
<script src="[Link]
<div ng-app="spicyApp1" ng-controller="SpicyController">
<button ng-click="chiliSpicy()">Chili</button>
<button ng-click="jalapenoSpicy()">Jalapeno</button>
<p>The food is {{spice}} spicy!</p>
</div>
<script>
var myApp = [Link]('spicyApp1', []);
[Link]('SpicyController', ['$scope', function($scope) {
$[Link] = 'very';

$[Link] = function() {
$[Link] = 'chili';
};

$[Link] = function() {
$[Link] = 'jalapeno';
};
}]);
</script>

Curso Front-End (AngularJS + Bootstrap) 44

 AngularJS // Controllers

Funcionamento da Herança de Escopos
<scriptsrc="[Link]
<div ng-app="scopeInheritance" class="spicy">
<div ng-controller="MainController">
Hi {{name}}!
<div ng-controller="ChildController">
Hi {{name}}!
<div ng-controller="GrandChildController">Hi {{name}}!</div>
</div>
</div>
</div>
<style> [Link] div { border: solid 2px blue; } </style>
<script>
var myApp = [Link]('scopeInheritance', []);
[Link]('MainController', ['$scope', function($scope) {
$[Link] = 'Nikki';
}]);
[Link]('ChildController', ['$scope', function($scope) {
$[Link] = 'Mattie';
}]);
[Link]('GrandChildController', ['$scope', function($scope) {
$[Link] = 'Gingerbread Baby';
}]);
</script>

Curso Front-End (AngularJS + Bootstrap) 45

 AngularJS // Controllers

Funcionamento da Herança de Escopos (Cont.)
<script src="[Link]
<div ng-app="scopeInheritance" class="spicy">
<div ng-controller="MainController">
Hi {{name}}!
<div ng-controller="ChildController">
Hi {{name}}!
<div ng-controller="GrandChildController">Hi {{name}}!</div>
</div>
</div>
</div>
<style> [Link] div { border: solid 2px blue; } </style>
<script>
var myApp = [Link]('scopeInheritance', []);
[Link]('MainController', ['$scope', function($scope) {
$[Link] = 'Nikki';
}]);
[Link]('ChildController', ['$scope', function($scope) {
// Atribuição ao model excluída
}]);
[Link]('GrandChildController', ['$scope', function($scope) {
$[Link] = 'Gingerbread Baby';
}]);
</script>

Curso Front-End (AngularJS + Bootstrap) 46

 AngularJS // Controllers

Exemplo de Utilização de Controller
<script src="[Link]
<div ng-app="mainApp" ng-controller="studentController">
Enter first name:
<input type="text" ng-model="[Link]">
<br /> Enter last name:
<input type="text" ng-model="[Link]">
<br /> You are entering: {{[Link]()}}
</div>
<script>
var mainApp = [Link]("mainApp", []);
[Link]('studentController', function($scope) {
$[Link] = {
firstName: "Mahesh",
lastName: "Parashar",

fullName: function() {
var studentObject = $[Link];
return [Link] + " " + [Link];
}
};
});
</script>

Curso Front-End (AngularJS + Bootstrap) 47

 Aula 05
AngularJS // Services

+
Curso Front-End (AngularJS + Bootstrap)
 AngularJS // Services

O que é

Os Services são funções javascript e são responsáveis para
fazer apenas a tarefas específicas. Isso os torna uma entidade
individual que é de fácil manutenção e testável

Os serviços são normalmente injetado usando o mecanismo
de injeção de dependência do AngularJS

Por padrão o AngularJS fornece diversos serviços embutidos
como $http, $route, $window, $location, etc

Curso Front-End (AngularJS + Bootstrap) 49

 AngularJS // Services

O que é

Cada serviço é responsável por uma tarefa específica, por
exemplo, $http é usado para fazer chamadas ajax para obter
os dados do servidor.

O $route é utilizado para definir a informação de
redirecionamentos dentro do app, e assim por diante

Serviços embutidos sempre tem o prefixo $

Curso Front-End (AngularJS + Bootstrap) 50

 AngularJS // Services

Factory, Service e Provider

Existem 3 maneiras de criar um serviço:

Factory: pode retornar qualquer tipo de dado, não existe uma maneira
ou padrão explicito que você deva seguir para criar esses dados, você
precisa somente retornar algo


Service: trabalha muito parecido com o Factory, a direfença é que o
Service nos da como retorno uma uma instancia dele mesmo ao invés
de retornar um novo objeto como em Factory, em outras palavras é
como se estivese-mos utilizando um new ServiceName()


Provider: são muito parecidos com Services e Factories, mas são
completamente configurável, o que pode tornar eles um pouco mais
complexos. Você só precisa retornar seu serviço em uma função
chamada $get que nos dá a API publica daquele serviço, em outras
palavras o que vier dentro do nosso retorno em $get funciona
exatamente como um factory por exemplo.
Curso Front-End (AngularJS + Bootstrap) 51
 AngularJS // Services

Factory, Service e Provider

Factory:

[Link]('todoListService', function() { Cria as funções que

var todoList = []; serão retornadas
function addTodo(todo) {
// Sua implementação
}

function removeTodo(todo) {
// Sua implementação
}

return {
Retorna o objeto que
todoList: todoList,
addTodo: addTodo, contém as funções para
removeTodo: removeTodo serem usadas posteriormente
};
});

Curso Front-End (AngularJS + Bootstrap) 52

 AngularJS // Services

Factory, Service e Provider

Service:

[Link]('todoListService', function() {
[Link] = [];

[Link] = function (todo) { Cria as funções que

// Sua implementação serão utilizadas
}

[Link] = function (todo) {

// Sua implementação
}

});

Curso Front-End (AngularJS + Bootstrap) 53

 AngularJS // Services

Factory, Service e Provider

Provider:
[Link]('todoListService', function() {
var todoList = [];
return {
loadDefaults: function(newList) { Função de inicialização
todoList = newList;
},
$get: function() {
function addTodo(todo) { Cria as funções que
// Sua implementação
serão utilizadas
}
function removeTodo(todo) {
// Sua implementação
}

return {
todoList: todoList,
Retorna o objeto que
addTodo: addTodo, contém as funções para
removeTodo: removeTodo serem usadas posteriormente
};
}
};
});
Curso Front-End (AngularJS + Bootstrap) 54
 AngularJS // Services

Factory, Service e Provider
<script src="[Link]

<div ng-app="mainApp" ng-controller="CalcController">

<p>Enter a number: <input type="number" ng-model="number" /> </p>
<button ng-click="square()">X²</button>
<p>Result: {{result}}</p>
</div>

<script>
var mainApp = [Link]("mainApp", []);
[Link]('MathService', function() {
var factory = {};
[Link] = function(a, b) { return a * b }
return factory;
});
[Link]('CalcService', function(MathService) {
[Link] = function(a) { return [Link](a, a); }
});
[Link]('CalcController', function($scope, CalcService) {
$[Link] = function() { $[Link] = [Link]($[Link]); }
});
</script>

Curso Front-End (AngularJS + Bootstrap) 55

 AngularJS // Services

Values e Constants

Exemplo de Utilização:

var app = [Link]("mainApp", []);

[Link]('appInfoValue', {version: "2.0"} );

[Link]('appInfoConstant', {version: "2.0"} );

[Link]('MyController', ['$scope', 'appInfoValue', 'appInfoConstant', function($scope, appInfoValue,

appInfoConstant) {

$[Link] = [Link];

$[Link] = [Link];

}]);

Curso Front-End (AngularJS + Bootstrap) 56

 Aula 06
AngularJS // Views

+
Curso Front-End (AngularJS + Bootstrap)
 AngularJS // Views

O que é?

Até agora vimos diversas Views, pois elas nada mais são que
estruturas HTML que podem ou não ter Diretivas
customizadas e comportamentos especificos

As Views possuem diversos comportamentos que ajudam na
criação dos aplicativos, como:

Templates

Rotas

Filters

Forms

Entre outros

Curso Front-End (AngularJS + Bootstrap) 58

 AngularJS // Views

Directive ng-view

O AngularJS suporta o conteúdo de Single Page Application
(SPA) por meio de múltiplas Views em uma única página

Uma View é no código a diretiva ng-view ou data-ng-view
como vimos nas aulas anteriores

Exemplo de definição de uma View:
<div ng-app="mainApp">
...
<div ng-view></div>

</div>

Curso Front-End (AngularJS + Bootstrap) 59

 AngularJS // Views

Directive ng-template

A diretiva ng-template é usada para criar uma View HTML
dentro de uma tag script como o exemplo abaixo:
<div ng-app="mainApp">
...

<script type="text/ng-template" id="[Link]">

<h2> Add Student </h2>
{{message}}
</script>

</div>

Curso Front-End (AngularJS + Bootstrap) 60

 AngularJS // Views

Serviço $routeProvider

O routeProvider é um serviço chave que é configurado com
todas as URLs do sistema, mapeando todas elas para uma
View correspondente ou para um Template e atribuindo um
Controller a este caminho
$[Link]('/addStudent', {
templateUrl: '[Link]',
controller: 'AddStudentController'
}).when('/viewStudents', {
templateUrl: '[Link]',
controller: 'ViewStudentsController'
}).otherwise({
redirectTo: '/addStudent'
});

Curso Front-End (AngularJS + Bootstrap) 61

 AngularJS // Views
<script src="[Link]
<script src="[Link]
<div ng-app="mainApp">
<p><a href="#addStudent">Add Student</a></p> <p><a href="#viewStudents">View Students</a></p>
<div ng-view></div>
<script type="text/ng-template" id="[Link]"><h2> Add Student </h2> {{message}}</script>
<script type="text/ng-template" id="[Link]"><h2>View Students</h2> {{message}}</script>
</div>
<script>
var mainApp = [Link]("mainApp", ['ngRoute']);
[Link](['$routeProvider', function($routeProvider) {
$[Link]('/addStudent', {
templateUrl: '[Link]',
controller: 'AddStudentController'
}).when('/viewStudents', {
templateUrl: '[Link]',
controller: 'ViewStudentsController'
}).otherwise({
redirectTo: '/addStudent'
});
}]);
[Link]('AddStudentController', function($scope) {
$[Link] = "TEXTO DO AddStudentController";
});
[Link]('ViewStudentsController', function($scope) {
$[Link] = "TEXTO DO ViewStudentsController";
});
</script>

Curso Front-End (AngularJS + Bootstrap) 62

 AngularJS // Views

Filters

Os Filters podem ser aplicados a expressões dentro de Views
usando a seguinte sintaxe:
{{ expression | filter }}

Um exemplo seria:
{{ 12 | currency }} // Saída: $12.00

Curso Front-End (AngularJS + Bootstrap) 63

 AngularJS // Views

Filters (Cont.)

Os Filters podem ser aplicados no resultado de outro Filtro:
{{ expression | filter1 | filter2 | ... }}

Um Filter pode ter vários argumentos:
{{ expression | filter:argument1:argument2:... }}

Exemplo:
{{ 1234 | number:2 }} // Saída: 1,234.00

Curso Front-End (AngularJS + Bootstrap) 64

 AngularJS // Views

Filters em Controllers, Services e Directives

Para isso, injete uma dependência com o nome
<filterName>Filtro em seu Controller/Service/Directive

Por exemplo: um filtro chamado number é injetado usando o
numberFilter

Curso Front-End (AngularJS + Bootstrap) 65

 AngularJS // Views

Filters em Controllers, Services e Directives (Cont.)

Exemplo utilizando filterFilter: ele é um filtro que cria uma
coleção filtrada a partir de outra coleção
<script src="[Link]
<div ng-app="FilterInControllerModule" ng-controller="FilterController as ctrl">
<div>
All entries:<span ng-repeat="entry in [Link]">{{[Link]}}</span>
</div>
<div>
Contain an "a": <span ng-repeat="entry in [Link]"> {{[Link]}}</span>
</div>
</div>
<script>
[Link]('FilterInControllerModule', []).
controller('FilterController', ['filterFilter', function(filterFilter) {
[Link] = [{name: 'Tobias'}, {name: 'Jeff'}, { name: 'Brian' }, { name: 'Igor' }, { name: 'James' }, { name:
'Brad' }];
[Link] = filterFilter([Link], 'a');
}]);
</script>

Curso Front-End (AngularJS + Bootstrap) 66

 AngularJS // Views

Filters Customizados
<script src="[Link]
<div ng-controller="MyController" ng-app="myReverseFilterApp">
<input ng-model="greeting" type="text"><br>No filter: {{greeting}}<br>Reverse: {{greeting|reverse}}<br>Reverse+uppercase: {{greeting|
reverse:true}}<br>Reverse,filtered in controller: {{filteredGreeting}}
</div>
<script>
[Link]('myReverseFilterApp', [])
.filter('reverse', function() {
return function(input, uppercase) {
input = input || '';
var out = "";
for (var i = 0; i < [Link]; i++)
out = [Link](i) + out;
if (uppercase)
out = [Link]();
return out;
};
})
.controller('MyController', ['$scope', 'reverseFilter', function($scope, reverseFilter) {
$[Link] = 'hello';
$[Link] = reverseFilter($[Link]);
}]);
</script>

Curso Front-End (AngularJS + Bootstrap) 67

 AngularJS // Views

Manipulação de DOM com Directives
<script src="[Link]

<div ng-app="">
<input type="checkbox" ng-model="enableDisableButton">Disable Button
<button ng-disabled="enableDisableButton">Click Me!</button><br/>

<input type="checkbox" ng-model="showHide1">Show Button

<button ng-show="showHide1">Click Me!</button><br/>

<input type="checkbox" ng-model="showHide2">Hide Button

<button ng-hide="showHide2">Click Me!</button><br/>

<p>Total click: {{clickCounter}}</p>

<button ng-click="clickCounter = clickCounter + 1">
Click Me!
</button>
</div>

Curso Front-End (AngularJS + Bootstrap) 68

 AngularJS // Views

Forms

O AngularJS fornece vários eventos nativos que podem ser
associados a elementos HTML, seguem abaixo o eventos
suportados:

ng-click

ng-dbl-click

ng-mousedown

ng-mouseup

ng-mouseenter

ng-mouseleave

ng-mousemove

ng-mouseover

ng-keydown

ng-keyup

ng-keypress

ng-change
Curso Front-End (AngularJS + Bootstrap) 69
 AngularJS // Views

Forms

Exemplo simples usando ng-click
<script src="[Link]

<div ng-app="myapp" ng-controller="studentController">

<input name="firstname" type="text" ng-model="firstName">
<input name="lastname" type="text" ng-model="lastName">
<button ng-click="reset()">Reset</button>
</div>

<script>
[Link]("myapp", [])
.controller("studentController", function($scope) {
$[Link] = function() {
$[Link] = "Mahesh";
$[Link] = "Parashar";
}
$[Link]();
});
</script>

Curso Front-End (AngularJS + Bootstrap) 70

 AngularJS // Views

Forms
<script src="[Link]

<div ng-controller="ExampleController" ng-app="formExample">

<form novalidate class="simple-form">
Name: <input type="text" ng-model="[Link]" /><br />
E-mail: <input type="email" ng-model="[Link]" /><br />
<input type="button" ng-click="reset()" value="Reset" />
<input type="submit" ng-click="update(user)" value="Save" />
</form>
<pre>user = {{user | json}}</pre><pre>master = {{master | json}}</pre>
</div>

<script>
[Link]('formExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$[Link] = {};
$[Link] = function(user) { $[Link] = [Link](user); };
$[Link] = function() { $[Link] = [Link]($[Link]); };
$[Link]();
}]);
</script>

Curso Front-End (AngularJS + Bootstrap) 71

 AngularJS // Views

Forms – Validações

Adicione esta folha de estilos no exemplo anterior:
<style type="text/css">
.simple-form [Link]-touched {
background-color: #FA787E;
}

.simple-form [Link]-touched {
background-color: #78FA89;
}
</style>


E nos campos de nome e e-mail adione o atributo required:
Name: <input type="text" ng-model="[Link]" required /><br />
E-mail: <input type="email" ng-model="[Link]" required /><br />

Curso Front-End (AngularJS + Bootstrap) 72

 AngularJS // Views

Forms – Validações (Cont.)

Altere os campos para o seguinte código:
Name: <input type="text" ng-model="[Link]" name="uName" required="" /><br />
<div ng-show="form.$submitted || [Link].$touched">
<div ng-show="[Link].$[Link]">Tell us your name.</div>
</div>
E-mail: <input type="email" ng-model="[Link]" name="uEmail" required="" /><br />
<div ng-show="form.$submitted || [Link].$touched">
<span ng-show="[Link].$[Link]">Tell us your email.</span>
<span ng-show="[Link].$[Link]">This is not a valid email.</span>
</div>


Altere o botão de reset para o seguinte código:
<input type="button" ng-click="reset(form)" value="Reset" />


Altere a função de reset para o seguinte código:
$[Link] = function(form) {
if (form) {
form.$setPristine();
form.$setUntouched();
}
$[Link] = [Link]($[Link]);
};
Curso Front-End (AngularJS + Bootstrap) 73
 AngularJS // Views

Forms – Validações (Cont.)

Adicione o atributo name na tag form da seguinte maneira:
<form name="form" novalidate class="simple-form">

Curso Front-End (AngularJS + Bootstrap) 74

 AngularJS // Views

Forms – Atualização de Form

Por padrão, qualquer alteração no conteúdo irá desencadear
uma atualização do modelo e validação de formulário. Você
pode substituir esse comportamento usando a diretiva
ngModelOptions
<script src="[Link]

<div ng-app="customTriggerExample" ng-controller="ExampleController">

<form>
Name: <input type="text" ng-model-options="{ updateOn: 'blur' }" ng-model="[Link]" /><br />
Other data: <input type="text" ng-model="[Link]" />
</form>
<pre>username = "{{[Link]}}"</pre>
<pre>userdata = "{{[Link]}}"</pre>
</div>

<script>
[Link]('customTriggerExample', [])
.controller('ExampleController', ['$scope', function($scope) { $[Link] = {}; }]);
</script>

Curso Front-End (AngularJS + Bootstrap) 75

 AngularJS // Views

Forms – Atraso na Validação

É possível atrasar a atualização do modelo/validação usando a
chave debounce na diretiva ngModelOptions
<script src="[Link]

<div ng-app="debounceExample" ng-controller="ExampleController">

<form>
Name: <input type="text" ng-model="[Link]" ng-model-options="{ debounce: 500 }" /><br />
</form>
<pre>username = "{{[Link]}}"</pre>
</div>

<script>
[Link]('debounceExample', [])
.controller('ExampleController', ['$scope', function($scope) { $[Link] = {}; }]);
</script>


Outro exemplo de utilização seria:
ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"

Curso Front-End (AngularJS + Bootstrap) 76

 AngularJS // Views

Forms – Validação Customizada

O AngularJS possui várias validações padrão utilizando HTML
5, são elas:

text

number

url

email

date

radio

checkbox

required

pattern

minlength

maxlength

min

max

Curso Front-End (AngularJS + Bootstrap) 77

 AngularJS // Views

Forms – Validação Customizada (Cont.)

Se nenhuma das validações padrões atender é possível criar a
sua prórpia validação:
<script src="[Link]

<form name="form" ng-app="form-example1" class="css-form" novalidate>

Size (integer 0 - 10): <input type="number" ng-model="size" name="size" min="0" max="10" integer />{{size}}<br />
<span ng-show="[Link].$[Link]">The value is not a valid integer!</span><span ng-show="[Link].$[Link] ||
[Link].$[Link]">The value must be in range 0 to 10!</span>
</form>

<script>
var INTEGER_REGEXP = /^\-?\d+$/;
var app = [Link]('form-example1', []).directive('integer', function() { return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$[Link] = function(modelValue, viewValue) {
if (ctrl.$isEmpty(modelValue))
return true;
if (INTEGER_REGEXP.test(viewValue))
return true;
return false;
}; } }; });
</script>

Curso Front-End (AngularJS + Bootstrap) 78

 Aula 07
Requisições AJAX

+
Curso Front-End (AngularJS + Bootstrap)
 AngularJS // Requisições AJAX

O que é?

O AngularJS prove um controle de requisições asincronas via
HTTP(s) que funciona como um serviço para ler dados a partir
do servidor

O Angularjs precisa de um retorno com dados em formato
JSON

Segue um exemplo:
...

$[Link](url).success( function(response) {
$[Link] = response;
});

...

Curso Front-End (AngularJS + Bootstrap) 80

 AngularJS // Requisições AJAX

Uso comum
<script src="[Link]

<div ng-app="myapp" ng-controller="ajaxController">

{{retorno}}
</div>

<script>
[Link]("myapp", [])
.controller("ajaxController", ['$scope', '$http', function($scope, $http) {
$http({
method: 'GET',
url: '[Link]
}).then(function successCallback(response) {
$[Link] = response;
[Link]([Link]);
}, function errorCallback(response) {
$[Link] = response;
[Link]([Link]);
});
}]);
</script>

Curso Front-End (AngularJS + Bootstrap) 81

 AngularJS // Requisições AJAX

Outras Operações

$[Link]

$[Link]

$[Link]

$[Link]

$[Link]

$[Link]

$[Link]

Curso Front-End (AngularJS + Bootstrap) 82

 AngularJS // Requisições AJAX
<script
src="[Link]

<div ng-app="httpExample" ng-controller="FetchController">

<select ng-model="method" aria-label="Request
method"><option>GET</option><option>JSONP</option></select>
<input type="text" ng-model="url" size="80" aria-label="URL" />
<button id="fetchbtn" ng-click="fetch()">fetch</button>
<button id="samplegetbtn" ng-click="updateModel('GET', '[Link]
data/[Link]')">Sample GET</button>
<button id="samplejsonpbtn" ng-click="updateModel('JSONP',
'[Link]
%20Hero')">
Sample JSONP
</button>
<pre>http status code: {{status}}</pre><pre>http response data: {{data}}</pre>
</div>

Curso Front-End (AngularJS + Bootstrap) 83

 AngularJS // Requisições AJAX
<script>
[Link]('httpExample', [])
.controller('FetchController', ['$scope', '$http', function($scope, $http) {
$[Link] = function() {
$[Link] = null;
$[Link] = null;
$http({
method: $[Link],
url: $[Link]
}).then(function(response) {
$[Link] = [Link];
$[Link] = [Link];
}, function(response) {
$[Link] = [Link] || "Request failed";
$[Link] = [Link];
});
};
$[Link] = function(method, url) {
$[Link] = method;
$[Link] = url;
}; } ]);
</script>

Curso Front-End (AngularJS + Bootstrap) 84

 Aula 08
Armazenamento Local

+
Curso Front-End (AngularJS + Bootstrap)
 Armazenamento Local

O que é?

Um recurso do HTML5 permite salvar dados localmente no
navegador utilizando:

Local Storage: armazena dados sem data de expiração.
Armazenamento chave-valor, contudo no campo valor podemos
armazenar até 5MB de dados, podendo ser uma estutura JSON

[Link]

Session Storage: armazena dados para uma sessão (os dados são
perdidos quando a aba do navegador é fechada)

[Link]

Cookie: armazena pequena quantidade de dados com data de
expiração

Web SQL Database: também é possível armazenar localmente
utilizando uma base de dados SQL

[Link]

Curso Front-End (AngularJS + Bootstrap) 86

 Armazenamento Local

Como usar?

Todo o processo pode ser feito manualmente acessando o
objeto de armazenamento local do HTML5

Outra opção é utilizar alguma extenção do AngularJS para nos
poupar trabalho

Iremos utilizar a extenção angular-local-storage

Curso Front-End (AngularJS + Bootstrap) 87

 Armazenamento Local

angular-local-storage

Toda a documentação do funcionamento dela pode ser
encontrado no endereço:

[Link]

Curso Front-End (AngularJS + Bootstrap) 88

 Armazenamento Local

angular-local-storage - Exemplo
<script src="[Link]
<script src="[Link]

<div ng-app="myApp" ng-controller="MainCtrl">

<input type="text" ng-model="chave" />
<input type="text" ng-model="valor" />
<input type="button" ng-click="save(chave, valor)" value="Salvar" />
<input type="button" ng-click="restore(chave)" value="Recuperar" />
</div>

<script>
var myApp = [Link]('myApp', ['LocalStorageModule']);
[Link]('MainCtrl', function($scope, localStorageService) {
$[Link] = function(chave, valor) {
[Link](chave, valor);
}
$[Link] = function(chave) {
$[Link] = [Link](chave);
}
});
</script>

Curso Front-End (AngularJS + Bootstrap) 89

 Aula 09
Bootstrap e Responsividade

+
Curso Front-End (AngularJS + Bootstrap)
 Bootstrap e Responsividade

O que é?

Bootstrap: é o mais popular framework HTML, CSS, e JS para
desenvolvimento de projetos responsivo e focado para
dispositivos móveis na web.

Curso Front-End (AngularJS + Bootstrap) 91

 Bootstrap e Responsividade

O que é?

Responsividade: Um site responsivo muda a sua aparência e
disposição com base no tamanho da tela em que o site é
exibido. Então, se o usuário tem uma tela pequena, os
elementos se reorganizam para lhe mostrar as coisas principais
em primeiro lugar.

Curso Front-End (AngularJS + Bootstrap) 92

 Bootstrap e Responsividade

Curso Front-End (AngularJS + Bootstrap) 93

 Bootstrap e Responsividade

Como usar o bootstrap

Basta adicionar alguns arquivos externos no seu HTML

<!-- Última versão CSS compilada e minificada -->

<link rel="stylesheet" href="[Link]

<!-- Tema opcional -->

<link rel="stylesheet" href="[Link]

<!-- Última versão JavaScript compilada e minificada -->

<script src="[Link]

Curso Front-End (AngularJS + Bootstrap) 94

 Bootstrap e Responsividade

Como usar o bootstrap

Adicione os seus elementos HTML

<div class="container">
<form class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email">
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputP" class="form-control" placeholder="Password">
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>

Curso Front-End (AngularJS + Bootstrap) 95

 Bootstrap e Responsividade

Como usar o bootstrap (Cont.)

Altere o Tema

<link rel="stylesheet" href="[Link]

Curso Front-End (AngularJS + Bootstrap) 96

 Bootstrap e Responsividade

Grid System

É um sistema de grid que foca no desenvolvimento orientado
a dispositivos móveis e que dimensiona adequadamente 12
colunas com o tamanho do dispositivo ou tamanho de tela do
usuário.

Ele inclui classes pré-definidas para as opções de layout
facilitando o desenvolvimento

Curso Front-End (AngularJS + Bootstrap) 97

 Bootstrap e Responsividade

Grid System

Características basicas

As linhas devem ser colocadas dentro de uma DIV com a classe
.container (fixed-width) OU .container-fluid (full-width) para um
alinhamento correto

Use linhas para criar grupos horizontais de colunas

O conteúdo deve ser colocado dentro de colunas, e somente as
colunas podem ser elementos filhos de linhas

Curso Front-End (AngularJS + Bootstrap) 98

 Bootstrap e Responsividade

Grid System

Tamanhos de tela suportados

Extra small devices (<768px)

.col-xs-

Small devices Tablets (≥768px)

.col-sm-

Medium devices (≥992px)

.col-md-

Large devices Desktops (≥1200px)

.col-lg-

Curso Front-End (AngularJS + Bootstrap) 99

 Bootstrap e Responsividade

Grid System - Exemplo
<link rel="stylesheet" href="[Link]
<hr>
<div class="container">
<div class="visible-lg"><span class="label label-default">lg</span></div>
<div class="visible-md"><span class="label label-default">md</span></div>
<div class="visible-sm"><span class="label label-default">sm</span></div>
<div class="visible-xs"><span class="label label-default">xs</span></div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-xs-8 col-md-4">col-xs-8 col-md-4</div>
<div class="col-xs-4 col-md-8">col-xs-4 col-md-8</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-8">col-xs-6 col-sm-8</div>
<div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
</div>
</div>

Curso Front-End (AngularJS + Bootstrap) 100

 Bootstrap e Responsividade

Grid System

Mais informações sobre o funcionamento do Grid podem ser
encontrados no seguinte endereço:

[Link]

Curso Front-End (AngularJS + Bootstrap) 101

 Bootstrap e Responsividade

Botões - Cores

<link rel="stylesheet" href="[Link]

<button type="button" class="btn btn-default">Default</button>

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

Curso Front-End (AngularJS + Bootstrap) 102

 Bootstrap e Responsividade

Botões - Tamanhos

<link rel="stylesheet" href="[Link] />

<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
</p>

Curso Front-End (AngularJS + Bootstrap) 103

 Bootstrap e Responsividade

Botões

Mais informações podem ser encontrados no seguinte
endereço:

[Link]

Curso Front-End (AngularJS + Bootstrap) 104

 Bootstrap e Responsividade

Formulários

Os campos mais comuns suportados pelo HTML5 são: text,
password, datetime, datetime-local, date, month, time, week,
number, email, url, search, tel, and color

Por padrão os campos assumiram o tamanho da coluna que
ele foi colocado

Curso Front-End (AngularJS + Bootstrap) 105

 Bootstrap e Responsividade

Formulários

<link rel="stylesheet" href="[Link] />

<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" placeholder="Password">
<p class="help-block">Example block-level help text here.</p>
</div>
<button type="button" class="btn btn-default">Submit</button>
</form>

Curso Front-End (AngularJS + Bootstrap) 106

 Bootstrap e Responsividade

Formulários

Mais informações podem ser encontrados no seguinte
endereço:

[Link]

Curso Front-End (AngularJS + Bootstrap) 107

 Bootstrap e Responsividade

Classes Auxiliares

Cores de Fonte para Contextos
<p class="text-primary">...</p>
<p class="text-success">...</p>

Cores de Fundo para Contextos
<p class="bg-success">...</p>
<p class="bg-info">...</p>

Cores de Fundo para Contextos

<div class="center-block">...</div>

Curso Front-End (AngularJS + Bootstrap) 108

 Bootstrap e Responsividade

Classes Auxiliares

Mais informações podem ser encontrados no seguinte
endereço:

[Link]

Curso Front-End (AngularJS + Bootstrap) 109

 Bootstrap e Responsividade

Utilidades para Responsividade

Para um desenvolvimento rápido de aplicações amigáveis para
dispositivos móveis, existem classes CSS para mostrar e
ocultar o conteúdo de acordo com o tamanho da tela do
dispositivo.

Também existem classes CSS para alternar conteúdo quando
impresso

Curso Front-End (AngularJS + Bootstrap) 110

 Bootstrap e Responsividade

Utilidades para Responsividade

Mostrando/Ocultando conteúdos

Curso Front-End (AngularJS + Bootstrap) 111

 Bootstrap e Responsividade

Utilidades para Responsividade

Mostrando/Ocultando conteúdos para impressão

Curso Front-End (AngularJS + Bootstrap) 112

 Bootstrap e Responsividade

Utilidades para Responsividade

Mais informações podem ser encontrados no seguinte
endereço:

[Link]

Curso Front-End (AngularJS + Bootstrap) 113

 Aula 09
Projeto Final

+
Curso Front-End (AngularJS + Bootstrap)
 Projeto Final

Requisitos

Layout Responsivo
HEADER

Acessar a API REST

Funcionalidades

Listar Bookmarks

Adicionar Bookmark

Alterar Bookmark
MENU

Excluir Bookmark Início CONTENT
Listagem
Adicionar

Curso Front-End (AngularJS + Bootstrap) 115

 Projeto Final

Ambiente de Desenvolvimento

Eclipse Luna

[Link]
downloads/release/luna/SR2/[Link]


Jboss [Link]

Curso Front-End (AngularJS + Bootstrap) 116

 Projeto Final

Criação do Projeto

Configurando o Arquetipo Demoiselle no Eclipse

Acesse o menu Window > Preferences

Abra o menu lateral Maven > Archetypes

Clique no botão Add Remote Catalog

No campo Catalog File informe:

[Link]

No campo Description:

Demoiselle

Clique em OK

Curso Front-End (AngularJS + Bootstrap) 117

 Projeto Final

Criação do Projeto

Configurando o Servidor JBoss

Acesse o menu superior Window > Show View > Servers

Curso Front-End (AngularJS + Bootstrap) 118

 
Projeto Final

Criação do Projeto

Configurando o Servidor JBoss

Clique no link “No servers are avaliable. Click this link...”

Filtre e escolha o item Jboss AS 7.1

Clique em Next

Clique novamente em Next

No campo Home Directory escolha o caminho da pasta do Jboss
descompactada

Clique em Finish

Curso Front-End (AngularJS + Bootstrap) 119

 Projeto Final

Criação do Projeto

Novo Projeto

Acesse o menu superior no item File > New > Other...

Procure por Maven Project

Clique em Next

Next novamente

Escolha o catálogo Demoiselle e filtre por rest

Clique em Next

No group id informe [Link]

No Artifact id informe projetofinal

Clique em Finish

Curso Front-End (AngularJS + Bootstrap) 120

 Projeto Final

Criação do Projeto

Após a criação a aba Project Explorer ficará assim:

Curso Front-End (AngularJS + Bootstrap) 121

 Projeto Final

Limpando do Projeto

Vamos excluir alguns
arquivos e pastas que não
são necessários

Deixe o seu projeto com a
árvore de diretórios igual a
imagem ao lado

Curso Front-End (AngularJS + Bootstrap) 122

 Projeto Final

Retirando a obrigatoriedade de Login

No projeto não iremos abordar as questões de login, por isso é
necessário que na classe BookmarkREST dentro do pacote
[Link] todas as anotações @LoggedIn
sejam comentadas ou excluídas para que o projeto funcione
corretamente

Curso Front-End (AngularJS + Bootstrap) 123

 Projeto Final

HTML do [Link]
Vamos utilizar as
bibliotecas como
<!DOCTYPE html>
<html> recursos externos de
<head>
<meta charset="utf-8">
outros servidores
<title>Projeto Final</title>

<!-- Bootstrap CSS -->

<link rel="stylesheet" href="[Link] />
<!-- Bootstrap CSS Theme -->
<link rel="stylesheet" href="[Link]
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#/">Projeto Final</a>
</div>
</div>
</nav>

<!-- Libs (JQuery, Angular, Bootstrap) -->

<script src="[Link]
<script src="[Link]
<script src="[Link]
</body>
</html>

Curso Front-End (AngularJS + Bootstrap) 124

 Projeto Final

Publicação no JBoss

Clique com o botão direito sobre o projeto e acesse o menu
Run as > Run on Server

Escolha o servidor Jboss

Clique em Finish

O [Link] estará disponível no endereço:

[Link]

O ideal é acessar pelo navegador Chromium ou Chrome

Curso Front-End (AngularJS + Bootstrap) 125

 Projeto Final

Configurando o App AngularJS

Crie um arquivo [Link] na raíz da pasta scripts com o seguinte
conteúdo
'use strict';
var app = [Link]('projetofinal', ['ngRoute']);
[Link](['$routeProvider', function ($routeProvider) {
$[Link]('/home', {
templateUrl: 'views/[Link]',
controller: 'HomeController',
})
.when('/add', {
templateUrl: 'views/[Link]',
controller: 'AddController',
})
.when('/list', {
templateUrl: 'views/[Link]',
controller: 'ListController',
})
.when('/edit/:id', {
templateUrl: 'views/[Link]', // Vamos reutilizar a tela
controller: 'EditController',
})
.otherwise({
redirectTo: '/home',
});
}]);

Curso Front-End (AngularJS + Bootstrap) 126

 Projeto Final

Route Provider

Como iremos utilizar o Route Provider é necessário incluir um
outro componente do AngularJS da seguinte maneira:

...
<script src="[Link]

<!-- Route Provider -->

<script src="[Link]
</body>

...

Curso Front-End (AngularJS + Bootstrap) 127

 Projeto Final

Configuração

Adicionando o JS [Link]

...
<script src="[Link]

<!-- Main -->

<script src="scripts/[Link]"></script>
</body>
...

Curso Front-End (AngularJS + Bootstrap) 128

 Projeto Final

Configuração

Adicionando o atributo ng-app no HTML

Troque a linha:
<html>

Por
<html ng-app="projetofinal">

Curso Front-End (AngularJS + Bootstrap) 129

 Projeto Final

HTML do Menu

Adicione o seguinte trecho de código no [Link] para criar
o menu e o local aonde será inserido o html das suas páginas
acessadas:

...
</nav>

<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2">
MENU
</div>
<div class="col-sm-9 col-md-10" ng-view></div>
</div>
</div>

<!-- Libs (JQuery, Angular, Bootstrap) -->

...

Curso Front-End (AngularJS + Bootstrap) 130

 Projeto Final

Primeira Tela

Criando a tela home

Adicione o arquivo [Link] na raíz da pasta /scripts/controllers com o
seguinte conteúdo:
'use strict';
[Link]('HomeController', [ '$scope', function($scope) {
$[Link] = "Olá! Esta é a tela principal do sistema!";
}]);


Crie o arquivo [Link] na raíz da pasta /views com o seguinte
conteúdo:
{{title}}


Adicione o arquivo [Link] ao HTML do [Link]:
...
<script src="scripts/[Link]"></script>

<!-- Controllers -->

<script src="scripts/controllers/[Link]"></script>
</body>
...


Adicione
...
a seguinte linha
<link rel="stylesheet" href="[Link]
<style> .sidebar, .main { top: 75px; } </style>
</head>
...

Curso Front-End (AngularJS + Bootstrap) 131

 Projeto Final

Listagem - Criação da tela

Copie o arquivo [Link] para [Link] e altere o que for
necessário

Copie o arquivo [Link] para [Link]

Adicione o arquivo [Link] logo abaixo do [Link] dentro do
HTML do [Link]

Substitua o conteúdo do menu pelo seguinte código:
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li><a href="#/home">Início</a></li>
<li><a href="#/list">Listagem</a></li>
<li><a href="#/add">Adicionar</a></li>
</ul>
</div>
<div class="col-sm-9 col-md-10 main" ng-view></div>
</div>


Publique o projeto e visualise o resultado no navegador
Curso Front-End (AngularJS + Bootstrap) 132
 Projeto Final

Situação Atual

Curso Front-End (AngularJS + Bootstrap) 133

 Projeto Final

Listagem – Criação do Serviço

Crie o arquivo [Link] na raíz da pasta /scripts/services
com o seguinte conteúdo
'use strict';
[Link]('BookmarkService', [ '$http', '$q', function($http, $q) {
var services = {};
[Link] = function() {
var deferred = $[Link]();
$http({
url : 'api/bookmark',
method : "GET",
}).success(function(data) {
[Link](data);
}).error(function(data, status) {
[Link]([ data, status ]);
});
return [Link];
};
return services;
} ]);

Curso Front-End (AngularJS + Bootstrap) 134

 Projeto Final

Listagem – Criação do Serviço

Adicione o arquivo [Link] do serviço BookmarkService
ao [Link]
<script src="scripts/controllers/[Link]"></script>

<!-- Services -->

<script src="scripts/services/[Link]"></script>
</body>

Curso Front-End (AngularJS + Bootstrap) 135

 Projeto Final

Listagem – Tabela HTML

Substitua TODO o conteúdo do arquivo /views/[Link] para
o seguinte:
<h3>{{title}} <small>Listagem de todos os bookmarks cadastrados</small></h3>
<hr />
<button class="btn btn-primary" data-ng-click="new()">
<i class="glyphicon glyphicon-plus-sign"></i> Novo
</button>
<br/><br/>
<table class="table table-striped table-condensed">
<thead>
<tr>
<th>#</th>
<th width="30%">Description</th>
<th width="70%">Link</th>
<th></th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="b in bookmarks">
<th scope="row">{{[Link]}}</th>
<td>{{[Link]}}</td>
<td>{{[Link]}}</td>
<td class="text-nowrap">
<a data-ng-click="edit([Link])" class="btn btn-warning btn-xs">Alterar</a>
<a data-ng-click="delete([Link])" class="btn btn-danger btn-xs">Excluir</a>
</td>
</tr>
</tbody>
</table>

Curso Front-End (AngularJS + Bootstrap) 136

 Projeto Final

Listagem – Controller

Substitua TODO o conteúdo do arquivo
/scripts/controllers/[Link] para o seguinte:
'use strict';
[Link]('ListController', [ '$scope', '$location', 'BookmarkService',
function($scope, $location, BookmarkService) {
$[Link] = "LISTAGEM";
$[Link] = function () {
$[Link]('/add');
};
function findAll() {
[Link]().then(
function (data) {
$[Link] = data;
},
function (error) {
alert("Ocorreu um erro na requisição");
}
);
}
findAll();
}]);


Publique novamente no JBoss e visualiza no navegador

Curso Front-End (AngularJS + Bootstrap) 137

 Projeto Final

Situação Atual

Curso Front-End (AngularJS + Bootstrap) 138

 Projeto Final

Adicionar - Criação da tela

Copie o arquivo [Link] para [Link] altere o que for
necessário

Copie o arquivo [Link] para [Link]

Adicione o arquivo [Link] logo abaixo do [Link] dentro do
HTML do [Link]

Publique o projeto e visualise o resultado no navegador

Curso Front-End (AngularJS + Bootstrap) 139

 Projeto Final

Adicionar – Form

Substitua TODO o conteúdo do arquivo /views/[Link]:
<h3>{{title}} <small>Gestão do bookmark</small></h3>
<hr />
<form name="form" novalidate>
<div class="form-group row" ng-show="[Link] != undefined">
<div class="col-md-2">
<input class="form-control" disabled="disabled" type="text" ng-model="[Link]">
</div>
</div>
<div class="form-group">
<input name="uDescription" required type="text" class="form-control" ng-model="[Link]"
placeholder="Description">
<div ng-show="form.$submitted || [Link].$touched" class="has-error">
<div class="help-block" ng-show="[Link].$[Link]">Tell us the bookmark description</div>
</div>
</div>
<div class="form-group">
<input type="url" class="form-control" required name="uUrl" placeholder="URL" ng-model="[Link]">
<div ng-show="form.$submitted || [Link].$touched" class="has-error">
<span class="help-block" ng-show="[Link].$[Link]">Tell us the URL of bookmark.</span>
<span class="help-block" ng-show="[Link].$[Link]">This is not a valid URL.</span>
</div>
</div>
<button type="submit" class="btn btn-default" ng-click="save()">Submit</button>
</form>

Curso Front-End (AngularJS + Bootstrap) 140

 Projeto Final

Adicionar – Form

Adicione a função save no serviço do Bookmark
...
return [Link];
};
[Link] = function(bookmark) {
var deferred = $[Link]();
var id = [Link];
[Link] = null;
$http({
url: id ? 'api/bookmark/' + id : 'api/bookmark',
method: id ? "PUT" : "POST",
data: bookmark,
headers: {
'Content-Type': 'application/json;charset=utf8'
}
}).success(function(data) {
[Link](data);
}).error(function(data, status) {
[Link]([data, status]);
});
return [Link];
};
return services;
...

Curso Front-End (AngularJS + Bootstrap) 141

 Projeto Final

Adicionar – Form

Substitua TODO o conteúdo do arquivo [Link] por:
'use strict';
[Link]('AddController', ['$scope', '$location', 'BookmarkService',
function($scope, $location, BookmarkService) {
$[Link] = "Adicionar Bookmark";
$[Link] = {};
$[Link] = function () {
if ($[Link].$valid) {
[Link]($[Link]).then(
function (data) {
alert('Bookmark salvo com sucesso');
$[Link]('/list');
},
function (error) {
[Link](error);
alert('Erro ao salvar o Bookmark');
}
);
}
};
}]);

Curso Front-End (AngularJS + Bootstrap) 142

 Projeto Final

Alterar

Copie o arquivo [Link] para [Link] altere o que for
necessário

Adicione o arquivo [Link] logo abaixo do [Link] dentro do
HTML do [Link]

Curso Front-End (AngularJS + Bootstrap) 143

 Projeto Final

Alterar

Adicione a seguinte função ao ListController

$[Link] = function (id) {

$[Link]('/edit/' + id);
};

Curso Front-End (AngularJS + Bootstrap) 144

 Projeto Final

Adicionar

Substitua TODO o conteúdo do arquivo [Link] por:
'use strict';
[Link]('EditController', ['$scope', '$location', '$routeParams', 'BookmarkService',
function($scope, $location, $routeParams, BookmarkService) {
$[Link] = "Editar Bookmark";
var id = $[Link];
[Link](id).then(
function (data) {
$[Link] = data;
},
function (error) {
alert('Erro ao pegar Bookmark do servidor');
}
);
$[Link] = function () {
if ($[Link].$valid) {
[Link]($[Link]).then(
function (data) {
alert('Bookmark salvo NOVAMENTE com sucesso');
$[Link]('/list');
},
function (error) {
[Link](error);
alert('Erro ao salvar NOVAMENTE o Bookmark');
}
);
}
};
}]);

Curso Front-End (AngularJS + Bootstrap) 145

 Projeto Final

Adicionar

Adicione a função get no serviço do Bookmark
...
return [Link];
};
[Link] = function(id) {
var deferred = $[Link]();
$http({
url : 'api/bookmark/' + id,
method : "GET",
}).success(function(data) {
[Link](data);
}).error(function(data, status) {
[Link]([ data, status ]);
});
return [Link];
};
return services;
...

Curso Front-End (AngularJS + Bootstrap) 146

 Projeto Final

Remover

Adicione a seguinte função ao ListController

$[Link] = function (id) {

[Link](id).then(
function (data) {
findAll();
},
function (error) {
alert("Ocorreu um erro na requisição");
}
);
};

Curso Front-End (AngularJS + Bootstrap) 147

 Projeto Final

Remover

Adicione a função delete no serviço do Bookmark
...
return [Link];
};
[Link] = function(id) {
var deferred = $[Link]();
$http({
url: 'api/bookmark/' + id,
method: "DELETE"
}).success(function(data) {
[Link](data);
}).error(function(data, status) {
[Link]([data, status]);
});
return [Link];
};
return services;
...

Curso Front-End (AngularJS + Bootstrap) 148

 Fim!
Julian Cesar
juliancesar@[Link]
[Link]

+
Curso Front-End (AngularJS + Bootstrap)