Baixe o app para aproveitar ainda mais
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"
Compartilhar