AngularJS-e-Bootstrap

Prévia do material em texto

Formação Front-End (Angular JS + Boostrap)
Julian Cesar dos Santos
Versão 1.1
+
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 22
AgendaAgenda
 Aula 1Aula 1 – Introdução ao JavasScript (JS) – Introdução ao JavasScript (JS)
 Aula 2Aula 2 – Introdução ao AngularJS – Introdução ao AngularJS
 Aula 3Aula 3 – AngularJS // Directives – AngularJS // Directives
 Aula 4Aula 4 – AngularJS // Controllers – AngularJS // Controllers
 Aula 5Aula 5 – AngularJS // Services – AngularJS // Services
 Aula 6Aula 6 – AngularJS // Views – AngularJS // Views
 Aula 7Aula 7 – Requisições AJAX – Requisições AJAX
 Aula 8 Aula 8 – Armazenamento Local– Armazenamento Local
 Aula 9Aula 9 – Bootstrap e Responsividade – Bootstrap e Responsividade
 Aula 10Aula 10 – Projeto Final – Projeto Final
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 33
O que o Curso O que o Curso NÃONÃO abordará abordará
 FerramentasFerramentas
 IDE
 Bower
 Grunt
 Node (NPM)
 Outras Bibliotecas AuxiliaresOutras Bibliotecas Auxiliares
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 44
IDE?!IDE?!
 Eclipse Eclipse 
 https://jsfiddle.net/https://jsfiddle.net/ 
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap)
+
Aula 01Aula 01
Introdução ao JavaScriptIntrodução ao JavaScript
 
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 66
JavaScriptJavaScript
 O que é?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)Curso Front-End (AngularJS + Bootstrap) 77
JavaScriptJavaScript
 Para que foi criado?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)Curso Front-End (AngularJS + Bootstrap) 88
JavaScriptJavaScript
 DOM!?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)Curso Front-End (AngularJS + Bootstrap) 99
JavaScriptJavaScript
 FunçõesFunções
 Crie uma pasta JavaScript no seu Desktop e dentro um 
arquivo chamado index.html
 Adicione o seguinte conteúdo dentro:
<script type="text/javascript"><script type="text/javascript">
 function square(number) {function square(number) {
 return number * number;return number * number;
 }}
 console.log(square(2));console.log(square(2));
</script></script>
 Abra o arquivo index.html com o Chrome
Tag que informa ao navagador Tag que informa ao navagador 
que dentro é um código JSque dentro é um código JS
Declaração da função e Declaração da função e 
o seu parâmetro de entradao seu parâmetro de entrada
Retorno da funçãoRetorno da função
Chamada da função e Chamada da função e 
envia da saída para o consoleenvia da saída para o console
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 1010
JavaScriptJavaScript
 Ferramenta de DesenvolvedoresFerramenta 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:Saída da linha:
console.log(square(2));console.log(square(2));
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 1111
JavaScriptJavaScript
 FunçõesFunções
 Outra maneira de escrever a mesma coisa:
<script type="text/javascript"><script type="text/javascript">
 var square = function (number) {var square = function (number) {
 return number * number;return number * number;
 }}
 console.log(square(2));console.log(square(2));
</script></script>
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 1212
JavaScriptJavaScript
 Funções AninhadasFunções Aninhadas
<script type="text/javascript"><script type="text/javascript">
 function function operationsoperations(number1) {(number1) {
 function function sumsum(number2) {(number2) {
 return number1 + number2;return number1 + number2;
 }}
 return sum;return sum;
 }}
 var func_sum = var func_sum = operationsoperations(3);(3);
 var result1 = func_sum(5);var result1 = func_sum(5);
 console.log(result1);console.log(result1);
 var result2 = var result2 = operationsoperations(3)(5); (3)(5); 
 console.log(result2);console.log(result2);
</script></script>
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions 
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 1313
JavaScriptJavaScript
 DebugDebug
 Com a Ferramenta do Desenvolvedor aberta (F12) acesse 
a aba Source
Arquivo que Arquivo que 
Iremos manipularIremos manipular
Código do ArquivoCódigo do Arquivo
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 1414
JavaScriptJavaScript
 DebugDebug
 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
BreakpointBreakpoint
Situação das Situação das 
variáveisvariáveis
Controles de Controles de 
depuraçãodepuração
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 1515
JavaScriptJavaScript
 Objetos JSONObjetos JSON
function myFunc(theObject) {function myFunc(theObject) {
 theObject.make = "Toyota";theObject.make = "Toyota";
}}
var mycar = { make: "Honda", model: "Accord", year: 1998 };var mycar = { make: "Honda", model: "Accord", year: 1998 };
console.log(mycar.make);console.log(mycar.make);
myFunc(mycar);myFunc(mycar);
console.log(mycar.make);console.log(mycar.make);
Função que altera Função que altera 
o fabricante do objetoo fabricante do objeto
Objeto do meu carroObjeto do meu carro
Mostra o fabricante Mostra o fabricante 
do meu carrodo meu carro
Chama a função de Chama a função de 
alteração de fabricantealteração de fabricante
Mostra novamente o Mostra novamente o 
fabricante do meu carrofabricante do meu carro
Especificação JSON: http://json.org/
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 1616
JavaScriptJavaScript
 Hierarquia do objeto JavaScriptHierarquia do objeto JavaScript
function Exemplo() {function Exemplo(){
 this.propriedade = 'Isso é uma propriedade.',this.propriedade = 'Isso é uma propriedade.',
 this.metodo = function() {this.metodo = function() {
 return 'Isso é um metódo';return 'Isso é um metódo';
 }}
}}
var objeto = var objeto = new Exemplo();new Exemplo(); 
console.log(objeto.propriedade),console.log(objeto.propriedade),
console.log(objeto.metodo());console.log(objeto.metodo());
NEW!?NEW!?
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 1717
JavaScriptJavaScript
 Try...CatchTry...Catch
try {try {
 throw "myException";throw "myException";
} catch (e) {} catch (e) {
 console.log(e);console.log(e);
} finally {} finally {
 console.log("Always execute");console.log("Always execute");
}}
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap)
+
Aula 02Aula 02
Introdução ao AngularJSIntrodução ao AngularJS
 
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 1919
AngularJS // IntroduçãoAngularJS // Introdução
 O que é?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)Curso Front-End (AngularJS + Bootstrap) 2020
AngularJS // IntroduçãoAngularJS // Introdução
 AngularJS vs JQueryAngularJS vs JQuery
 Angular.js é um framework. Na execução do Angular.js, 
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)Curso Front-End (AngularJS + Bootstrap) 2121
AngularJS // IntroduçãoAngularJS // Introdução
 ConceitosConceitos
 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)Curso Front-End (AngularJS + Bootstrap) 2222
AngularJS // IntroduçãoAngularJS // Introdução
 Conceitos (Cont.)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)Curso Front-End (AngularJS + Bootstrap) 2323
AngularJS // IntroduçãoAngularJS // Introdução
 VantagensVantagens
 Manutenível
 Flexível
 Testável
 Desacoplado
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 2424
AngularJS // IntroduçãoAngularJS // Introdução
 Principais DiretivasPrincipais 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)Curso Front-End (AngularJS + Bootstrap) 2525
AngularJS // IntroduçãoAngularJS // Introdução
 Primeiro App com AngularJSPrimeiro App com AngularJS
 Vamos para o nosso primeiro código! 
 Crie uma pasta AngularJS no seu Desktop e dentro um 
arquivo chamado index.html
 Adicione o seguinte conteúdo dentro:
<html ng-app><html ng-app>
 <head><head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
 </head></head>
 <body><body>
 <h1>Meu Primeiro App AngularJS </h1><h1>Meu Primeiro App AngularJS </h1>
 </body></body>
</html></html>
 Abra o arquivo index.html com o Chrome
Carrega o arquivo principal Carrega o arquivo principal 
do frameworkdo framework
Inicializa o AngularJS e Inicializa o AngularJS e 
informa o contexto do seu Appinforma o contexto do seu App
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 2626
AngularJS // IntroduçãoAngularJS // Introdução
 Primeiro App com AngularJSPrimeiro App com AngularJS
 Adicione o seguinte conteúdo abaixo da tag H1:
......
<div><div>
 <label>Nome: </label><label>Nome: </label>
 <input type="text" <input type="text" ng-model="nome"ng-model="nome" placeholder="Digite seu nome" /> placeholder="Digite seu nome" />
 <h1> <h1> Olá, {{nome}}!Olá, {{nome}}! </h1> </h1>
</div></div>
......
Mostra a variávelMostra a variável
Diretiva ng-model que faz a ligação Diretiva ng-model que faz a ligação 
entre a view e o model/variávelentre a view e o model/variável
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 2727
AngularJS // IntroduçãoAngularJS // Introdução
 Primeiro App com AngularJSPrimeiro 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)Curso Front-End (AngularJS + Bootstrap) 2828
AngularJS // IntroduçãoAngularJS // Introdução
 Primeiro App com AngularJSPrimeiro App com AngularJS
 Encoding
......
 <head><head>
 <meta charset="UTF-8"><meta charset="UTF-8">
 ... ... 
 </head></head>
......
 Teste de Expressão
......
 </div></div>
 <p>1 + 2 = {{ 1 + 2 }}</p><p>1 + 2 = {{ 1 + 2 }}</p>
 </body></body>
......
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 2929
AngularJS // IntroduçãoAngularJS // Introdução
 Primeiro App com AngularJSPrimeiro App com AngularJS
 Resultado
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 3030
AngularJS // IntroduçãoAngularJS // Introdução
 Outro App com AngularJSOutro App com AngularJS
<html ng-app="myapp"><head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
 </head> 
 <body>
 
 <div ng-controller = "HelloController" 
 <h2>Welcome {{helloTo.title}} to the world!</h2>
 </div>
 
 <script>
 angular.module("myapp", []) 
 .controller("HelloController", function($scope) {
 $scope.helloTo = {};
 $scope.helloTo.title = "AngularJS";
 });
 </script> 
 </body>
</html>
Nosso primeiro Nosso primeiro 
controller!controller!
Nosso primeiro Nosso primeiro 
módulo!módulo!
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap)
+
Aula 03Aula 03
AngularJS // Directives AngularJS // Directives 
 
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 3232
AngularJS // DirectivesAngularJS // Directives
 DiretivasDiretivas
 São usadas para extender as marcações do HTML
https://code.angularjs.org/1.4.9/docs/api/ng/directive 
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 3333
AngularJS // DirectivesAngularJS // Directives
 Diretiva ng-repeatDiretiva 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: ' + country.name + ', Locale: ' + country.locale }}
 </li>
 </ol>
</div>
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 3434
AngularJS // DirectivesAngularJS // Directives
 Criando uma diretivaCriando 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)Curso Front-End (AngularJS + Bootstrap) 3535
AngularJS // DirectivesAngularJS // Directives
 Criando a minha própria diretivaCriando a minha própria diretiva
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div ng-app="docsSimpleDirective" ng-controller="Controller">
<div my-customer></div>
</div>
<script>
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
 $scope.customer = {
 name: 'Naomi',
 address: '1600 Amphitheatre'
 };
}])
.directive('myCustomer', function() {
 return {
 template: 'Name: {{customer.name}} Address: {{customer.address}}'
 };
});
</script>
http://www.sitepoint.com/practical-guide-angularjs-directives/ 
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 3636
AngularJS // DirectivesAngularJS // Directives
 Detalhe Importante na Definição dos NomesDetalhe 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)Curso Front-End (AngularJS + Bootstrap) 3737
AngularJS // DirectivesAngularJS // Directives
 Detalhe Importante na Definição dos NomesDetalhe Importante na Definição dos Nomes
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<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>
angular.module('docsBindExample', [])
.controller('Controller', ['$scope', function($scope) {
 $scope.name = 'Teste de nomenclatura de diretivas';
}]);
</script>
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap)
+
Aula 04Aula 04
AngularJS // ControllersAngularJS // Controllers
 
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 3939
AngularJS // ControllersAngularJS // Controllers
 Para que servemPara que servem
 Inicializar um escopo (variável $scope)
 Adicionar comportamentos ao escopo (variável $scope)
 Para que NÃO servePara 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)Curso Front-End (AngularJS + Bootstrap) 4040
AngularJS // ControllersAngularJS // Controllers
 Inicializando um Controller e seu EscopoInicializando um Controller e seu Escopo
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="GreetingController">
 {{ greeting }}
</div>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope', function($scope) {
 $scope.greeting = 'Hola!';
}]);
</script>
Foi usado uma anotação injeção de dependencia Foi usado uma anotação injeção de dependencia 
para informar explicitamente a dependência para informar explicitamente a dependência 
do Controller com relação ao serviço $scopedo Controller com relação ao serviço $scope
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 4141
AngularJS // ControllersAngularJS // Controllers
 Adicionando um Comportamento no ControllerAdicionando um Comportamento no Controller
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="DoubleController">
 Two times <input ng-model="num"> equals {{ double(num) }}
</div>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('DoubleController', ['$scope', function($scope) {
 $scope.double = function(value) { 
 return value * 2; 
 };
}]);
</script>
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 4242
AngularJS // ControllersAngularJS // Controllers
 O uso correto do ControllerO 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
...
app.controller('Controller',['$scope','service', function($scope,service) {
...
}]);
...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 4343
AngularJS // ControllersAngularJS // Controllers
 Convenção do Prefixo ‘$’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 estescomponentes tem como prefixo 
o $, como o $scope
 Não use $ como prefixo para evitar possiveis colisões de 
nomes
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 4444
AngularJS // ControllersAngularJS // Controllers
 Exemplo usando Pimentas!Exemplo usando Pimentas!
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<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 = angular.module('spicyApp1', []);
myApp.controller('SpicyController', ['$scope', function($scope) {
 $scope.spice = 'very';
 $scope.chiliSpicy = function() {
 $scope.spice = 'chili';
 };
 $scope.jalapenoSpicy = function() {
 $scope.spice = 'jalapeno';
 };
}]);
</script>
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 4545
AngularJS // ControllersAngularJS // Controllers
 Funcionamento da Herança de EscoposFuncionamento da Herança de Escopos
<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<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> div.spicy div { border: solid 2px blue; } </style>
<script>
var myApp = angular.module('scopeInheritance', []);
myApp.controller('MainController', ['$scope', function($scope) {
 $scope.name = 'Nikki';
}]);
myApp.controller('ChildController', ['$scope', function($scope) {
 $scope.name = 'Mattie';
}]);
myApp.controller('GrandChildController', ['$scope', function($scope) {
 $scope.name = 'Gingerbread Baby';
}]);
</script>
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 4646
AngularJS // ControllersAngularJS // Controllers
 Funcionamento da Herança de Escopos (Cont.)Funcionamento da Herança de Escopos (Cont.)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<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> div.spicy div { border: solid 2px blue; } </style>
<script>
var myApp = angular.module('scopeInheritance', []);
myApp.controller('MainController', ['$scope', function($scope) {
 $scope.name = 'Nikki';
}]);
myApp.controller('ChildController', ['$scope', function($scope) {
 // Atribuição ao model excluída
}]);
myApp.controller('GrandChildController', ['$scope', function($scope) {
 $scope.name = 'Gingerbread Baby';
}]);
</script>
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 4747
AngularJS // ControllersAngularJS // Controllers
 Exemplo de Utilização de ControllerExemplo de Utilização de Controller
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="studentController">
 Enter first name:
 <input type="text" ng-model="student.firstName">
 <br /> Enter last name:
 <input type="text" ng-model="student.lastName">
 <br /> You are entering: {{student.fullName()}}
</div>
<script>
 var mainApp = angular.module("mainApp", []);
 mainApp.controller('studentController', function($scope) {
 $scope.student = {
 firstName: "Mahesh",
 lastName: "Parashar",
 fullName: function() {
 var studentObject = $scope.student;
 return studentObject.firstName + " " + studentObject.lastName;
 }
 };
 });
</script>
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap)
+
Aula 05Aula 05
AngularJS // ServicesAngularJS // Services
 
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 4949
AngularJS // ServicesAngularJS // Services
 O que é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)Curso Front-End (AngularJS + Bootstrap) 5050
AngularJS // ServicesAngularJS // Services
 O que é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)Curso Front-End (AngularJS + Bootstrap) 5151
AngularJS // ServicesAngularJS // Services
 Factory, Service e ProviderFactory, 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)Curso Front-End (AngularJS + Bootstrap) 5252
AngularJS // ServicesAngularJS // Services
 Factory, Service e ProviderFactory, Service e Provider
 Factory:
app.factory('todoListService', function() {
 var todoList = [];
 function addTodo(todo) {
 // Sua implementação
 }
 function removeTodo(todo) {
 // Sua implementação
 }
 return {
 todoList: todoList,
 addTodo: addTodo,
 removeTodo: removeTodo
 };
});
Cria as funções que Cria as funções que 
serão retornadasserão retornadas
Retorna o objeto que Retorna o objeto que 
contém as funções para contém as funções para 
serem usadas posteriormenteserem usadas posteriormente
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 5353
AngularJS // ServicesAngularJS // Services
 Factory, Service e ProviderFactory, Service e Provider
 Service:
app.service('todoListService', function() {
 this.todoList = [];
 this.addTodo = function (todo) {
 // Sua implementação
 }
 this.removeTodo = function (todo) {
 // Sua implementação
 }
});
Cria as funções que Cria as funções que 
serão utilizadasserão utilizadas
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 5454
AngularJS // ServicesAngularJS // Services
 Factory, Service e ProviderFactory, Service e Provider
 Provider:
app.provider('todoListService', function() {
 var todoList = [];
 return {
 loadDefaults: function(newList) {
 todoList = newList;
 },
 $get: function() {
 function addTodo(todo) {
 // Sua implementação
 }
 function removeTodo(todo) {
 // Sua implementação
 }
 return {
 todoList: todoList,addTodo: addTodo,
 removeTodo: removeTodo
 };
 }
 };
});
Função de inicializaçãoFunção de inicialização
Cria as funções que Cria as funções que 
serão utilizadasserão utilizadas
Retorna o objeto que Retorna o objeto que 
contém as funções para contém as funções para 
serem usadas posteriormenteserem usadas posteriormente
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 5555
AngularJS // ServicesAngularJS // Services
 Factory, Service e ProviderFactory, Service e Provider
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="CalcController">
 <p>Enter a number: <input type="number" ng-model="number" /> </p>
 <button ng-click="square()">X<sup>2</sup></button>
 <p>Result: {{result}}</p>
</div>
<script>
 var mainApp = angular.module("mainApp", []);
 mainApp.factory('MathService', function() {
 var factory = {};
 factory.multiply = function(a, b) { return a * b }
 return factory;
 });
 mainApp.service('CalcService', function(MathService) {
 this.square = function(a) { return MathService.multiply(a, a); }
 });
 mainApp.controller('CalcController', function($scope, CalcService) {
 $scope.square = function() { $scope.result = CalcService.square($scope.number); }
 });
</script>
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 5656
AngularJS // ServicesAngularJS // Services
 Values e ConstantsValues e Constants
 Exemplo de Utilização:
var app = angular.module("mainApp", []);
app.value('appInfoValue', {version: "2.0"} );
app.constant('appInfoConstant', {version: "2.0"} );
app.controller('MyController', ['$scope', 'appInfoValue', 'appInfoConstant', function($scope, appInfoValue, 
appInfoConstant) {
 $scope.value = appInfoValue.version;
 $scope.const = appInfoValue.version;
}]);
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap)
+
Aula 06Aula 06
AngularJS // ViewsAngularJS // Views
 
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 5858
AngularJS // ViewsAngularJS // Views
 O que é?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)Curso Front-End (AngularJS + Bootstrap) 5959
AngularJS // ViewsAngularJS // Views
 Directive ng-viewDirective 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)Curso Front-End (AngularJS + Bootstrap) 6060
AngularJS // ViewsAngularJS // Views
 Directive ng-templateDirective 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="addStudent.htm">
 <h2> Add Student </h2>
 {{message}}
 </script>
</div> 
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 6161
AngularJS // ViewsAngularJS // Views
 Serviço $routeProviderServiç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
$routeProvider.when('/addStudent', {
 templateUrl: 'addStudent.htm',
 controller: 'AddStudentController'
}).when('/viewStudents', {
 templateUrl: 'viewStudents.htm',
 controller: 'ViewStudentsController'
}).otherwise({
 redirectTo: '/addStudent'
});
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 6262
AngularJS // ViewsAngularJS // Views
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.min.js"></script>
<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="addStudent.htm"><h2> Add Student </h2> {{message}}</script>
 <script type="text/ng-template" id="viewStudents.htm"><h2>View Students</h2> {{message}}</script>
</div>
<script>
 var mainApp = angular.module("mainApp", ['ngRoute']);
 mainApp.config(['$routeProvider', function($routeProvider) {
 $routeProvider.when('/addStudent', {
 templateUrl: 'addStudent.htm',
 controller: 'AddStudentController'
 }).when('/viewStudents', {
 templateUrl: 'viewStudents.htm',
 controller: 'ViewStudentsController'
 }).otherwise({
 redirectTo: '/addStudent'
 });
 }]);
 mainApp.controller('AddStudentController', function($scope) {
 $scope.message = "TEXTO DO AddStudentController";
 });
 mainApp.controller('ViewStudentsController', function($scope) {
 $scope.message = "TEXTO DO ViewStudentsController";
 });
</script>
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 6363
AngularJS // ViewsAngularJS // Views
 FiltersFilters
 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)Curso Front-End (AngularJS + Bootstrap) 6464
AngularJS // ViewsAngularJS // Views
 Filters (Cont.)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)Curso Front-End (AngularJS + Bootstrap) 6565
AngularJS // ViewsAngularJS // Views
 Filters em Controllers, Services e DirectivesFilters 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)Curso Front-End (AngularJS + Bootstrap) 6666
AngularJS // ViewsAngularJS // Views
 Filters em Controllers, Services e Directives (Cont.)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="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div ng-app="FilterInControllerModule" ng-controller="FilterController as ctrl">
 <div>
 All entries:<span ng-repeat="entry in ctrl.array">{{entry.name}}</span>
 </div>
 <div>
 Contain an "a": <span ng-repeat="entry in ctrl.filteredArray"> {{entry.name}}</span>
 </div>
</div>
<script>
 angular.module('FilterInControllerModule', []).
 controller('FilterController', ['filterFilter', function(filterFilter) {
 this.array = [{name: 'Tobias'}, {name: 'Jeff'}, { name: 'Brian' }, { name: 'Igor' }, { name: 'James' }, { name: 
'Brad' }];
 this.filteredArray = filterFilter(this.array, 'a');
 }]);
</script>
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 6767
AngularJS // ViewsAngularJS // Views
 Filters CustomizadosFilters Customizados
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script><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>
 angular.module('myReverseFilterApp', [])
 .filter('reverse', function() {
 return function(input, uppercase) {
 input = input || '';
 var out = "";
 for (var i = 0; i < input.length; i++) 
 out = input.charAt(i) + out; 
 if (uppercase) 
 out = out.toUpperCase(); 
 return out;
 };
 })
 .controller('MyController', ['$scope', 'reverseFilter', function($scope, reverseFilter) {
 $scope.greeting = 'hello';
 $scope.filteredGreeting = reverseFilter($scope.greeting);
 }]);
</script>
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 6868
AngularJS // ViewsAngularJS // Views
 Manipulação de DOM com DirectivesManipulação de DOM com Directives
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<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)Curso Front-End (AngularJS + Bootstrap) 6969
AngularJS // ViewsAngularJS // Views
 FormsForms
 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)Curso Front-End (AngularJS + Bootstrap) 7070
AngularJS // ViewsAngularJS // Views
 FormsForms
 Exemplo simples usando ng-click
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<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>
 angular.module("myapp", [])
 .controller("studentController", function($scope) {
 $scope.reset = function() {
 $scope.firstName = "Mahesh";
 $scope.lastName = "Parashar";
 }
 $scope.reset();
 });
</script>
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 7171
AngularJS // ViewsAngularJS // Views
 FormsForms
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div ng-controller="ExampleController" ng-app="formExample">
 <form novalidate class="simple-form">
 Name: <input type="text" ng-model="user.name" /><br /> 
 E-mail: <input type="email" ng-model="user.email" /><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>
 angular.module('formExample', [])
 .controller('ExampleController', ['$scope', function($scope) {
 $scope.master = {};
 $scope.update = function(user) { $scope.master = angular.copy(user); };
 $scope.reset = function() { $scope.user = angular.copy($scope.master); };
 $scope.reset();
 }]);
</script>
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 7272
AngularJS // ViewsAngularJS // Views
 Forms – ValidaçõesForms – Validações
 Adicione esta folha de estilos no exemplo anterior:
 E nos campos de nome e e-mail adione o atributo required:
<style type="text/css">
 .simple-form input.ng-invalid.ng-touched {
 background-color: #FA787E;
 }
 .simple-form input.ng-valid.ng-touched {
 background-color: #78FA89;
 }
</style>
Name: <input type="text" ng-model="user.name" required /><br />
E-mail: <input type="email" ng-model="user.email" required /><br />
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 7373
AngularJS // ViewsAngularJS // Views
 Forms – Validações (Cont.)Forms – Validações (Cont.)
 Altere os campos para o seguinte código:
 Altere o botão de reset para o seguinte código:
 Altere a função de reset para o seguinte código:
Name: <input type="text" ng-model="user.name" name="uName" required="" /><br />
<div ng-show="form.$submitted || form.uName.$touched">
 <div ng-show="form.uName.$error.required">Tell us your name.</div>
</div>
E-mail: <input type="email" ng-model="user.email" name="uEmail" required="" /><br />
<div ng-show="form.$submitted || form.uEmail.$touched">
 <span ng-show="form.uEmail.$error.required">Tell us your email.</span>
 <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
</div>
<input type="button" ng-click="reset(form)" value="Reset" />
$scope.reset = function(form) {
 if (form) {
 form.$setPristine();
 form.$setUntouched();
 }
 $scope.user = angular.copy($scope.master);
};
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 7474
AngularJS // ViewsAngularJS // Views
 Forms – Validações (Cont.)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)Curso Front-End (AngularJS + Bootstrap) 7575
AngularJS // ViewsAngularJS // Views
 Forms – Atualização de FormForms – 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="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div ng-app="customTriggerExample" ng-controller="ExampleController">
 <form>
 Name: <input type="text" ng-model-options="{ updateOn: 'blur' }" ng-model="user.name" /><br />
 Other data: <input type="text" ng-model="user.data" />
 </form>
 <pre>username = "{{user.name}}"</pre>
 <pre>userdata = "{{user.data}}"</pre>
</div>
<script>
 angular.module('customTriggerExample', [])
 .controller('ExampleController', ['$scope', function($scope) { $scope.user = {}; }]);
</script>
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 7676
AngularJS // ViewsAngularJS // Views
 Forms – Atraso na ValidaçãoForms – Atraso na Validação
 É possível atrasar a atualização do modelo/validação usando a 
chave debounce na diretiva ngModelOptions
 Outro exemplo de utilização seria:
ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div ng-app="debounceExample" ng-controller="ExampleController">
 <form>
 Name: <input type="text" ng-model="user.name" ng-model-options="{ debounce: 500 }" /><br />
 </form>
 <pre>username = "{{user.name}}"</pre>
</div>
<script>
 angular.module('debounceExample', [])
 .controller('ExampleController', ['$scope', function($scope) { $scope.user = {}; }]);
</script>
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 7777
AngularJS // ViewsAngularJS // Views
 Forms – Validação CustomizadaForms –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)Curso Front-End (AngularJS + Bootstrap) 7878
AngularJS // ViewsAngularJS // Views
 Forms – Validação Customizada (Cont.)Forms – Validação Customizada (Cont.)
 Se nenhuma das validações padrões atender é possível criar a 
sua prórpia validação:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<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="form.size.$error.integer">The value is not a valid integer!</span><span ng-show="form.size.$error.min || 
form.size.$error.max">The value must be in range 0 to 10!</span> 
</form>
<script>
var INTEGER_REGEXP = /^\-?\d+$/;
var app = angular.module('form-example1', []).directive('integer', function() { return {
 require: 'ngModel',
 link: function(scope, elm, attrs, ctrl) {
 ctrl.$validators.integer = function(modelValue, viewValue) {
 if (ctrl.$isEmpty(modelValue)) 
 return true;
 if (INTEGER_REGEXP.test(viewValue)) 
 return true;
 return false;
}; } }; });
</script>
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap)
+
Aula 07Aula 07
Requisições AJAXRequisições AJAX
 
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 8080
AngularJS // Requisições AJAXAngularJS // Requisições AJAX
 O que é?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:
...
$http.get(url).success( function(response) {
 $scope.students = response; 
});
...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 8181
AngularJS // Requisições AJAXAngularJS // Requisições AJAX
 Uso comumUso comum
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div ng-app="myapp" ng-controller="ajaxController">
 {{retorno}}
</div>
<script>
 angular.module("myapp", [])
 .controller("ajaxController", ['$scope', '$http', function($scope, $http) { 
 $http({
 method: 'GET',
 url: 'http://10.200.232.59/rest-data/data.php'
 }).then(function successCallback(response) {
 $scope.retorno = response;
 console.log(response.data);
 }, function errorCallback(response) {
 $scope.retorno = response;
 console.log(response.data);
 });
 }]);
</script>
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 8282
AngularJS // Requisições AJAXAngularJS // Requisições AJAX
 Outras OperaçõesOutras Operações
 $http.get
 $http.head
 $http.post
 $http.put
 $http.delete
 $http.jsonp
 $http.patch
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 8383
AngularJS // Requisições AJAXAngularJS // Requisições AJAX
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<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', 'http://10.200.232.59/rest-
data/data.php')">Sample GET</button>
 <button id="samplejsonpbtn" ng-click="updateModel('JSONP',
 'https://angularjs.org/greet.php?callback=JSON_CALLBACK&name=Super
%20Hero')">
 Sample JSONP
 </button>
 <pre>http status code: {{status}}</pre><pre>http response data: {{data}}</pre>
</div>
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 8484
AngularJS // Requisições AJAXAngularJS // Requisições AJAX
<script>
 angular.module('httpExample', [])
 .controller('FetchController', ['$scope', '$http', function($scope, $http) {
 $scope.fetch = function() {
 $scope.code = null;
 $scope.response = null;
 $http({ 
 method: $scope.method, 
 url: $scope.url 
 }).then(function(response) {
 $scope.status = response.status;
 $scope.data = response.data;
 }, function(response) {
 $scope.data = response.data || "Request failed";
 $scope.status = response.status;
 });
 };
 $scope.updateModel = function(method, url) {
 $scope.method = method;
 $scope.url = url;
}; } ]);
</script>
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap)
+
Aula 08Aula 08
Armazenamento LocalArmazenamento Local
 
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 8686
Armazenamento LocalArmazenamento Local
 O que é?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
 http://www.w3.org/TR/webstorage/ 
 Session Storage: armazena dados para uma sessão (os dados são 
perdidos quando a aba do navegador é fechada)
 http://www.w3.org/TR/webstorage/ 
 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 
 http://dev.w3.org/html5/webdatabase/ 
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 8787
Armazenamento LocalArmazenamento Local
 Como usar?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)Curso Front-End (AngularJS + Bootstrap) 8888
Armazenamento LocalArmazenamento Local
 angular-local-storageangular-local-storage
 Toda a documentação do funcionamento dela pode ser 
encontrado no endereço:
 https://github.com/grevory/angular-local-storage
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 8989
Armazenamento LocalArmazenamento Local
 angular-local-storage - Exemploangular-local-storage - Exemplo
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-local-storage/0.2.2/angular-local-storage.min.js"></script>
<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 = angular.module('myApp', ['LocalStorageModule']);
 myApp.controller('MainCtrl', function($scope, localStorageService) {
 $scope.save = function(chave, valor) {
 localStorageService.set(chave, valor);
 }
 $scope.restore = function(chave) {
 $scope.valor = localStorageService.get(chave);
 }
 });
</script>
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap)
+
Aula 09Aula 09
Bootstrap e ResponsividadeBootstrape Responsividade
 
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 9191
Bootstrap e ResponsividadeBootstrap e Responsividade
 O que é?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)Curso Front-End (AngularJS + Bootstrap) 9292
Bootstrap e ResponsividadeBootstrap e Responsividade
 O que é?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)Curso Front-End (AngularJS + Bootstrap) 9393
Bootstrap e ResponsividadeBootstrap e Responsividade
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 9494
Bootstrap e ResponsividadeBootstrap e Responsividade
 Como usar o bootstrapComo usar o bootstrap
 Basta adicionar alguns arquivos externos no seu HTML
<!-- Última versão CSS compilada e minificada -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Tema opcional -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Última versão JavaScript compilada e minificada -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 9595
Bootstrap e ResponsividadeBootstrap e Responsividade
 Como usar o bootstrapComo 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)Curso Front-End (AngularJS + Bootstrap) 9696
Bootstrap e ResponsividadeBootstrap e Responsividade
 Como usar o bootstrap (Cont.)Como usar o bootstrap (Cont.)
 Altere o Tema
<link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.css">
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 9797
Bootstrap e ResponsividadeBootstrap e Responsividade
 Grid SystemGrid 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)Curso Front-End (AngularJS + Bootstrap) 9898
Bootstrap e ResponsividadeBootstrap e Responsividade
 Grid SystemGrid 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)Curso Front-End (AngularJS + Bootstrap) 9999
Bootstrap e ResponsividadeBootstrap e Responsividade
 Grid SystemGrid 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)Curso Front-End (AngularJS + Bootstrap) 100100
Bootstrap e ResponsividadeBootstrap e Responsividade
 Grid System - ExemploGrid System - Exemplo
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<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)Curso Front-End (AngularJS + Bootstrap) 101101
Bootstrap e ResponsividadeBootstrap e Responsividade
 Grid SystemGrid System
 Mais informações sobre o funcionamento do Grid podem ser 
encontrados no seguinte endereço:
 http://getbootstrap.com/css/#grid 
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 102102
Bootstrap e ResponsividadeBootstrap e Responsividade
 Botões - CoresBotões - Cores
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<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)Curso Front-End (AngularJS + Bootstrap) 103103
Bootstrap e ResponsividadeBootstrap e Responsividade
 Botões - TamanhosBotões - Tamanhos
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<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)Curso Front-End (AngularJS + Bootstrap) 104104
Bootstrap e ResponsividadeBootstrap e Responsividade
 BotõesBotões
 Mais informações podem ser encontrados no seguinte 
endereço:
 http://getbootstrap.com/css/#buttons 
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 105105
Bootstrap e ResponsividadeBootstrap e Responsividade
 FormuláriosFormulá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)Curso Front-End (AngularJS + Bootstrap) 106106
Bootstrap e ResponsividadeBootstrap e Responsividade
 FormuláriosFormulários
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<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)Curso Front-End (AngularJS + Bootstrap) 107107
Bootstrap e ResponsividadeBootstrap e Responsividade
 FormuláriosFormulários
 Mais informações podem ser encontrados no seguinte 
endereço:
 http://getbootstrap.com/css/#forms 
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 108108
Bootstrap e ResponsividadeBootstrap e Responsividade
 Classes AuxiliaresClasses 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)Curso Front-End (AngularJS + Bootstrap) 109109
Bootstrap e ResponsividadeBootstrap e Responsividade
 Classes AuxiliaresClasses Auxiliares
 Mais informações podem ser encontrados no seguinte 
endereço:
 http://getbootstrap.com/css/#helper-classes 
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 110110
Bootstrap e ResponsividadeBootstrap e Responsividade
 Utilidades para ResponsividadeUtilidades 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)Curso Front-End (AngularJS + Bootstrap) 111111
Bootstrap e ResponsividadeBootstrap e Responsividade
 Utilidades para ResponsividadeUtilidades para Responsividade
 Mostrando/Ocultando conteúdos
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 112112
Bootstrap e ResponsividadeBootstrap e Responsividade
 Utilidades para ResponsividadeUtilidades para Responsividade
 Mostrando/Ocultando conteúdos para impressão
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 113113
Bootstrap e ResponsividadeBootstrap e Responsividade
 Utilidades para ResponsividadeUtilidades para Responsividade
 Mais informações podem ser encontrados no seguinte 
endereço:
 http://getbootstrap.com/css/#responsive-utilities 
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap)
+
Aula 09Aula 09
Projeto FinalProjeto Final
 
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 115115
Projeto FinalProjeto Final
 RequisitosRequisitos
 Layout Responsivo
 Acessar a API REST
 Funcionalidades
 Listar Bookmarks
 Adicionar Bookmark
 Alterar Bookmark
 Excluir Bookmark MENUInício
Listagem
Adicionar
HEADER
CONTENT
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 116116
Projeto FinalProjeto Final
 Ambiente de DesenvolvimentoAmbiente de Desenvolvimento
 Eclipse Luna
 http://www.eclipse.org/downloads/download.php?file=/technology/epp/
downloads/release/luna/SR2/eclipse-java-luna-SR2-linux-gtk.tar.gz
 
 Jboss 7.1.1.Final
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 117117
Projeto FinalProjeto Final
 Criação do ProjetoCriaçã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:
 http://demoiselle.sourceforge.net/repository/archetype-catalog.xml
 No campo Description:
 Demoiselle
 Clique em OK
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 118118
Projeto FinalProjeto Final
 Criação do ProjetoCriação do Projeto
 Configurando o Servidor JBoss
 Acesse o menu superior Window > Show View > Servers
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 119119
 Projeto FinalProjeto Final
 Criação do ProjetoCriaçã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)Curso Front-End (AngularJS + Bootstrap) 120120
Projeto FinalProjeto Final
 Criação do ProjetoCriaçã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 br.gov.serpro
 No Artifact id informe projetofinal
 Clique em Finish
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 121121
Projeto FinalProjeto Final
 Criação do ProjetoCriação do Projeto
 Após a criação a aba Project Explorer ficará assim:
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 122122
Projeto FinalProjeto Final
 Limpando do ProjetoLimpando 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)Curso Front-End (AngularJS + Bootstrap) 123123
Projeto FinalProjeto Final
 Retirando a obrigatoriedade de LoginRetirando 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 
br.gov.serpro.projetofinal.rest todas as anotações @LoggedIn 
sejam comentadas ou excluídas para que o projeto funcione 
corretamente
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 124124
Projeto FinalProjeto Final
 HTML do index.htmlHTML do index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Projeto Final</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<!-- Bootstrap CSS Theme -->
<link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.css">
</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="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Vamos utilizar as 
bibliotecas como 
recursos externos de 
outros servidores
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 125125
Projeto FinalProjeto Final
 Publicação no JBossPublicaçã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 index.html estará disponível no endereço:
 http://localhost:8080/projetofinal/ 
 O ideal é acessar pelo navegador Chromium ou Chrome
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 126126
Projeto FinalProjeto Final
 Configurando o App AngularJSConfigurando o App AngularJS
 Crie um arquivo app.js na raíz da pasta scripts com o seguinte 
conteúdo
'use strict';
var app = angular.module('projetofinal', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'views/home.html', 
controller: 'HomeController',
})
.when('/add', {
templateUrl: 'views/add.html',
controller: 'AddController',
})
.when('/list', {
templateUrl: 'views/list.html',
controller: 'ListController',
})
.when('/edit/:id', {
templateUrl: 'views/add.html', // Vamos reutilizar a tela
controller: 'EditController',
})
.otherwise({
redirectTo: '/home',
});
}]);
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 127127
Projeto FinalProjeto Final
 Route ProviderRoute Provider
 Como iremos utilizar o Route Provider é necessário incluir um 
outro componente do AngularJS da seguinte maneira:
...
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Route Provider -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.min.js"></script>
</body>
...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 128128
Projeto FinalProjeto Final
 ConfiguraçãoConfiguração
 Adicionando o JS app.js
...
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.min.js"></script>
<!-- Main -->
<script src="scripts/app.js"></script>
</body>
...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 129129
Projeto FinalProjeto Final
 ConfiguraçãoConfiguração
 Adicionando o atributo ng-app no HTML
 Troque a linha:
<html>
 Por
<html ng-app="projetofinal">
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 130130
Projeto FinalProjeto Final
 HTML do MenuHTML do Menu
 Adicione o seguinte trecho de código no index.html 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)Curso Front-End (AngularJS + Bootstrap) 131131
Projeto FinalProjeto Final
 Primeira TelaPrimeira Tela
 Criando a tela home
 Adicione o arquivo home.js na raíz da pasta /scripts/controllers com o 
seguinte conteúdo:
 Crie o arquivo home.html na raíz da pasta /views com o seguinte 
conteúdo:
 Adicione o arquivo home.js ao HTML do index.html:
 Adicione a seguinte linha
'use strict';
app.controller('HomeController', [ '$scope', function($scope) {
$scope.title = "Olá! Esta é a tela principal do sistema!";
}]);
{{title}}
...
<script src="scripts/app.js"></script>
<!-- Controllers -->
<script src="scripts/controllers/home.js"></script>
</body>
...
...
<link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.css">
<style> .sidebar, .main { top: 75px; } </style>
</head>
...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 132132
Projeto FinalProjeto Final
 Listagem - Criação da telaListagem - Criação da tela
 Copie o arquivo home.js para list.js e altere o que for 
necessário
 Copie o arquivo home.html para list.html
 Adicione o arquivo list.js logo abaixo do home.js dentro do 
HTML do index.html
 Substitua o conteúdo do menu pelo seguinte código:
 Publique o projeto e visualise o resultado no navegador
<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>
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 133133
Projeto FinalProjeto Final
 Situação AtualSituação Atual
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 134134
Projeto FinalProjeto Final
 Listagem – Criação do ServiçoListagem – Criação do Serviço
 Crie o arquivo bookmark.js na raíz da pasta /scripts/services 
com o seguinte conteúdo
'use strict';
app.factory('BookmarkService', [ '$http', '$q', function($http, $q) {
var services = {};
services.findAll = function() {
var deferred = $q.defer();
$http({
url : 'api/bookmark',
method : "GET",
}).success(function(data) {
deferred.resolve(data);
}).error(function(data, status) {
deferred.reject([ data, status ]);
});
return deferred.promise;
};
return services;
} ]);
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 135135
Projeto FinalProjeto Final
 Listagem – Criação do ServiçoListagem – Criação do Serviço
 Adicione o arquivo bookmark.js do serviço BookmarkService 
ao index.html
<script src="scripts/controllers/list.js"></script>
<!-- Services -->
<script src="scripts/services/bookmark.js"></script>
</body>
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 136136
Projeto FinalProjeto Final
 Listagem – Tabela HTMLListagem – Tabela HTML
 Substitua TODO o conteúdo do arquivo /views/list.html 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">{{b.id}}</th>
<td>{{b.description}}</td>
<td>{{b.link}}</td>
<td class="text-nowrap">
<a data-ng-click="edit(b.id)" class="btn btn-warning btn-xs">Alterar</a>
<a data-ng-click="delete(b.id)" class="btn btn-danger btn-xs">Excluir</a>
</td>
</tr>
</tbody>
</table>
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 137137
Projeto FinalProjeto Final
 Listagem – ControllerListagem – Controller
 Substitua TODO o conteúdo do arquivo 
/scripts/controllers/list.js para o seguinte:
 Publique novamente no JBoss e visualiza no navegador
'use strict';
app.controller('ListController', [ '$scope', '$location', 'BookmarkService', 
function($scope, $location, BookmarkService) {
$scope.title = "LISTAGEM";
$scope.new = function () {
 $location.path('/add');
 };
function findAll() {
BookmarkService.findAll().then(
function (data) {
$scope.bookmarks = data;
},
function (error) {
alert("Ocorreu um erro na requisição");
}
);
 } 
 findAll();
}]);
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 138138
Projeto FinalProjeto Final
 Situação AtualSituação Atual
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 139139
Projeto FinalProjeto Final
 Adicionar - Criação da telaAdicionar - Criação da tela
 Copie o arquivo home.js para add.js altere o que for 
necessário
 Copie o arquivo home.html para add.html
 Adicione o arquivo add.js logo abaixo do list.js dentro do 
HTML do index.html
 Publique o projeto e visualise o resultado no navegador
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 140140
Projeto FinalProjeto Final
 Adicionar – FormAdicionar – Form
 Substitua TODO o conteúdo do arquivo /views/add.html:
<h3>{{title}} <small>Gestão do bookmark</small></h3>
<hr />
<form name="form" novalidate>
<div class="form-group row" ng-show="bookmark.id != undefined">
<div class="col-md-2">
<input class="form-control" disabled="disabled" type="text" ng-model="bookmark.id">
</div>
</div>
<div class="form-group">
<input name="uDescription" required type="text" class="form-control"