5. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap)
+
Aula 01Aula 01
Introdução ao JavaScriptIntrodução ao JavaScript
6. 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.
7. 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.
8. 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).
9. 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 navagadorTag que informa ao navagador
que dentro é um código JSque dentro é um código JS
Declaração da função eDeclaraçã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 eChamada da função e
envia da saída para o consoleenvia da saída para o console
10. 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));
11. 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>
13. 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 queArquivo que
Iremos manipularIremos manipular
Código do ArquivoCódigo do Arquivo
14. 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 dasSituação das
variáveisvariáveis
Controles deControles de
depuraçãodepuração
15. 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 alteraFunção que altera
o fabricante do objetoo fabricante do objeto
Objeto do meu carroObjeto do meu carro
Mostra o fabricanteMostra o fabricante
do meu carrodo meu carro
Chama a função deChama a função de
alteração de fabricantealteração de fabricante
Mostra novamente oMostra novamente o
fabricante do meu carrofabricante do meu carro
Especificação JSON: http://json.org/
16. 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!?
18. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap)
+
Aula 02Aula 02
Introdução ao AngularJSIntrodução ao AngularJS
19. 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.
20. 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
21. 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
22. 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.
24. 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
25. 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 principalCarrega o arquivo principal
do frameworkdo framework
Inicializa o AngularJS eInicializa o AngularJS e
informa o contexto do seu Appinforma o contexto do seu App
26. 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çãoDiretiva ng-model que faz a ligação
entre a view e o model/variávelentre a view e o model/variável
27. 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”.
32. 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
33. 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>
34. 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 -->
36. 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).
37. 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>
39. 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
40. 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 dependenciaFoi usado uma anotação injeção de dependencia
para informar explicitamente a dependênciapara informar explicitamente a dependência
do Controller com relação ao serviço $scopedo Controller com relação ao serviço $scope
41. 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>
42. 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) {
...
}]);
...
43. 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 estes componentes tem como prefixo
o $, como o $scope
Não use $ como prefixo para evitar possiveis colisões de
nomes
49. 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
50. 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 $
51. 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.
52. 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 queCria as funções que
serão retornadasserão retornadas
Retorna o objeto queRetorna o objeto que
contém as funções paracontém as funções para
serem usadas posteriormenteserem usadas posteriormente
53. 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 queCria as funções que
serão utilizadasserão utilizadas
54. 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 queCria as funções que
serão utilizadasserão utilizadas
Retorna o objeto queRetorna o objeto que
contém as funções paracontém as funções para
serem usadas posteriormenteserem usadas posteriormente
55. 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>
58. 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
59. 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>
60. 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>
61. 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'
});
63. 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
64. 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
65. 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
66. 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>
72. 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 />
73. 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);
};
74. 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">
75. 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>
76. 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>
77. 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
78. 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>
80. 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;
});
...
86. 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/
87. 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
88. 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
90. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap)
+
Aula 09Aula 09
Bootstrap e ResponsividadeBootstrap e Responsividade
91. 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.
92. 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.
93. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 9393
Bootstrap e ResponsividadeBootstrap e Responsividade
94. 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>
95. 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>
96. 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">
97. 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
98. 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
99. 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-
101. 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
104. 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
105. 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
107. 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
108. 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>
109. 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
110. 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
111. 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
112. 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
113. 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
114. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap)
+
Aula 09Aula 09
Projeto FinalProjeto Final
115. 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
MENU
Início
Listagem
Adicionar
HEADER
CONTENT
116. 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
117. 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
118. 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
119. 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
120. 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
121. 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:
122. 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
123. 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
124. 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
125. 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
126. 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',
});
}]);
127. 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>
...
128. 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>
...
129. 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">
130. 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) -->
...
131. 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>
...
132. 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>
133. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 133133
Projeto FinalProjeto Final
Situação AtualSituação Atual
134. 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;
} ]);
135. 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>
136. 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>
137. 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();
}]);
138. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 138138
Projeto FinalProjeto Final
Situação AtualSituação Atual
139. 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
140. 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" ng-model="bookmark.description"
placeholder="Description">
<div ng-show="form.$submitted || form.uDescription.$touched" class="has-error">
<div class="help-block" ng-show="form.uDescription.$error.required">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="bookmark.link">
<div ng-show="form.$submitted || form.uUrl.$touched" class="has-error">
<span class="help-block" ng-show="form.uUrl.$error.required">Tell us the URL of bookmark.</span>
<span class="help-block" ng-show="form.uUrl.$error.url">This is not a valid URL.</span>
</div>
</div>
<button type="submit" class="btn btn-default" ng-click="save()">Submit</button>
</form>
141. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 141141
Projeto FinalProjeto Final
Adicionar – FormAdicionar – Form
Adicione a função save no serviço do Bookmark
...
return deferred.promise;
};
services.save = function(bookmark) {
var deferred = $q.defer();
var id = bookmark.id;
bookmark.id = 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) {
deferred.resolve(data);
}).error(function(data, status) {
deferred.reject([data, status]);
});
return deferred.promise;
};
return services;
...
142. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 142142
Projeto FinalProjeto Final
Adicionar – FormAdicionar – Form
Substitua TODO o conteúdo do arquivo add.js por:
'use strict';
app.controller('AddController', ['$scope', '$location', 'BookmarkService',
function($scope, $location, BookmarkService) {
$scope.title = "Adicionar Bookmark";
$scope.bookmark = {};
$scope.save = function () {
if ($scope.form.$valid) {
BookmarkService.save($scope.bookmark).then(
function (data) {
alert('Bookmark salvo com sucesso');
$location.path('/list');
},
function (error) {
console.log(error);
alert('Erro ao salvar o Bookmark');
}
);
}
};
}]);
143. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 143143
Projeto FinalProjeto Final
AlterarAlterar
Copie o arquivo home.js para edit.js altere o que for
necessário
Adicione o arquivo edit.js logo abaixo do add.js dentro do
HTML do index.html
144. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 144144
Projeto FinalProjeto Final
AlterarAlterar
Adicione a seguinte função ao ListController
$scope.edit = function (id) {
$location.path('/edit/' + id);
};
145. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 145145
Projeto FinalProjeto Final
AdicionarAdicionar
Substitua TODO o conteúdo do arquivo edit.js por:
'use strict';
app.controller('EditController', ['$scope', '$location', '$routeParams', 'BookmarkService',
function($scope, $location, $routeParams, BookmarkService) {
$scope.title = "Editar Bookmark";
var id = $routeParams.id;
BookmarkService.get(id).then(
function (data) {
$scope.bookmark = data;
},
function (error) {
alert('Erro ao pegar Bookmark do servidor');
}
);
$scope.save = function () {
if ($scope.form.$valid) {
BookmarkService.save($scope.bookmark).then(
function (data) {
alert('Bookmark salvo NOVAMENTE com sucesso');
$location.path('/list');
},
function (error) {
console.log(error);
alert('Erro ao salvar NOVAMENTE o Bookmark');
}
);
}
};
}]);
146. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 146146
Projeto FinalProjeto Final
AdicionarAdicionar
Adicione a função get no serviço do Bookmark
...
return deferred.promise;
};
services.get = function(id) {
var deferred = $q.defer();
$http({
url : 'api/bookmark/' + id,
method : "GET",
}).success(function(data) {
deferred.resolve(data);
}).error(function(data, status) {
deferred.reject([ data, status ]);
});
return deferred.promise;
};
return services;
...
147. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 147147
Projeto FinalProjeto Final
RemoverRemover
Adicione a seguinte função ao ListController
$scope.delete = function (id) {
BookmarkService.delete(id).then(
function (data) {
findAll();
},
function (error) {
alert("Ocorreu um erro na requisição");
}
);
};
148. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 148148
Projeto FinalProjeto Final
RemoverRemover
Adicione a função delete no serviço do Bookmark
...
return deferred.promise;
};
services.delete = function(id) {
var deferred = $q.defer();
$http({
url: 'api/bookmark/' + id,
method: "DELETE"
}).success(function(data) {
deferred.resolve(data);
}).error(function(data, status) {
deferred.reject([data, status]);
});
return deferred.promise;
};
return services;
...