Instrutor: Eder Martins Franco
sdfsdf
Minicurso:
Conhecendo o Angular JS
v1.1
Semana do CursoTécnico
em Informática 2016
2...
Professor who?
 Eder Martins Franco
 Graduado em Sistemas de Informação (FUCAPI);
 Certified Scrum Master e Developer;
...
Agenda
 1. Introdução
 Arquitetura tradicional de uma aplicação web;
 Front-end e back-end;
 Frameworks (jquery, boots...
Agenda
 3. Angular JS!!!
 Entendendo o código
 Diretivas
 Views
 Modules
 Controllers
 Scope
 Services
 Injeção d...
Reflexão
Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com5
“Ninguém é tão sábio que não tenha algo p...
Introdução
Conhecendo o Angular JS
Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com66
 Arquitetura tradicional de uma aplicação web
Introdução
Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gma...
 Front-end:
 Programação do lado do cliente (client-side);
 Elementos visuais;
 HTML + CSS + mídias (imagens, vídeos, ...
 Back-end:
 Programação do lado do servidor (server-side);
 Linguagens mais completas e robustas;
 Acesso a outros ser...
 Frameworks:
 Criar softwares “do zero” é uma tarefa complicada;
 Necessidade de reutilizar código e ganhar produtivida...
 Frameworks:
 Algumas bibliotecas e frameworks de front-end:
 Bootstrap:
 HTML, CSS e Javascript;
 Implementações com...
 Frameworks:
 E no back-end?
 Depende da linguagem.
 Exemplos:
 PHP:
 Laravel (coisa linda de Deus);
 Zend;
 Cake;...
 Frameworks:
 Frameworks utilizam padrões de projeto;
 MVC – Model /View / Controller:
Introdução
Minicurso: Conhecendo...
 Problemas comuns no desenvolvimento web
 Páginas lentas demais (o usuário perde o interesse);
 Recarregamento completo...
 Problemas comuns no desenvolvimento web
Introdução
Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.co...
 E como colocar ordem na casa?
 Executar do lado do servidor somente o essencial;
 Diminuir a complexidade das aplicaçõ...
 Problema resolvido?
 Não!
 jQuery não é tão poderoso quanto precisamos...
 Escrevemos menos, mas ainda escrevemos mui...
Angular JS???
Conhecendo o Angular JS
Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com1818
 Um framework Super-heróico de Javascript!
Angular JS???
Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gma...
 Breve histórico
 Miško Hevery e Adam Abrons (2009)
Angular JS???
Minicurso: Conhecendo o Angular JS - Eder Franco - efr...
 Breve histórico
 Miško Hevery foi contratado pelo Google;
 Foi trabalhar em um projeto chamado Google Feedback;
 O pr...
 Características
 Framework MVC para aplicações web dinâmicas;
 Single Page Application (SPA);
 Suporte ao HTML 5;
 E...
 Características
Angular JS???
Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com2323
 Principais recursos
 Data binding:
 Sincronização automática entre os componentes (view – model);
Reflete as alteraçõe...
 Principais recursos
 Templates:
 São os arquivos que serão utilizados para criação das views, que
contém as informaçõe...
 Principais recursos
 Routes:
 Permitem trocar as views sem necessidade de recarregar a página;
 Services:
 Permitem ...
 Vantagens
 Criar aplicações mais fáceis de manter, utilizando o esquema
SPA;
 Capacidade de prover uma experiência mai...
 Desvantagens
 Desvantagens facilmente contornáveis.
 Fica vinculado ao suporte de Javascript no browser;
 Possíveis p...
 Quem está utilizando Angular JS?
 Alguns websites populares que utilizam o AngularJS:
 NASA
 YouTube (PS3 App)
 Wall...
 Exemplos de código
 O que queremos fazer:
 O usuário deve digitar o nome dele em um campo de texto. O
sistema deve exi...
 Javscript puro:
Angular JS???
Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com3131
 jQuery
Angular JS???
Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com3232
 Angular JS
Angular JS???
Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com3333
 Exemplos de código
 Vamos ver o resultado final:
 Javascript puro:
 http://eder.franco.eti.br/minicursos/angular/exem...
Angular JS!!!
Conhecendo o Angular JS
Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com3535
 Entendendo o código:
Angular JS!!!
Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com3636
Inicializa...
 Entendendo o código
 Nosso exemplo anterior contém o menor app possível criado
com angular JS;
 Os atributos ng-app e ...
 Diretivas:
 As diretivas do angular são marcadores para elementos do
HTML que informam ao compilador do Angular JS para...
 Diretivas:
 ng-app
 Vincula uma aplicação Angular JS ao HTML;
 ng-bind
 Vincula uma expressão ou variável javascript...
 Diretivas:
 ng-class
 Permite a associação de uma classe CSS a um elemento HTML;
 Permite a utilização de condições p...
 Diretivas:
 ng-repeat
 Permite iterar sobre um array;
 Exemplo:
 Temos o seguinte array definido no javascript:
 .....
 Diretivas:
 ng-show e ng-hide
 Ocultas ou exibe um elemento de acordo com uma condição.
 Exemplo:
 <div ng-show=“nom...
 Diretivas:
 ng-disable
 Permite desabilitar ou habilitar um elemento HTML de acordo com o
resultado de uma expressão;
...
 Module
 Com angular JS podemos definir as aplicações como módulos;
 Cada módulo corresponde a um nome pelo qual a apli...
 Controllers
 Os controladores são classes javascript convencionais;
 Responsabilidades:
 Inicializar objetos do escop...
 Services
 Services são classes javascript que nos permitem separar
responsabilidades no AngularJS, para executar determ...
 Injeção de dependências
 É o mecanismo pelo qual o AngularJS nos permite especificar e
incluir componentes e módulos co...
Hands on
Conhecendo o Angular JS
Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com4848
 Criando um projeto com Angular JS.
 Agora que já vimos os principais conceitos e métodos do
Angular JS, vamos criar nos...
Próximos passos?
Conhecendo o Angular JS
Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com5050
 O que estudar agora?
 Agora que você já conhece o Angular JS, quero encorajá-lo a
continuar estudando seus componentes;...
 O que estudar agora?
 Uma vez familiarizado com o Node.js e o gerenciador de
pacotes npm, você poderá utilizar os diver...
Referências
1. Angular JS. HTML enhanced for web apps! Disponível em
<https://angularjs.org/>. Acesso em 29/03/2016;
2. Go...
Referências
6. RAIBLE, Matt. The Art of AngularJS - Overview. Disponível em
<http://pt.slideshare.net/mraible/the-art-of-a...
Referências
6. RAIBLE, Matt. The Art of AngularJS - Overview. Disponível em <http://pt.slideshare.net/mraible/the-art-of-a...
Conhecendo o Angular JS
Eder Martins Franco
efranco23@gmail.com
http://moodle.franco.eti.br
http://fb.me/edermartinsfranco...
Próximos SlideShares
Carregando em…5
×

Minicurso "Conhecendo o AngularJS"

1.003 visualizações

Publicada em

Minicurso introdutório sobre AngularJS para desenvolvedores front-end iniciantes. Tem como objetivo apresentar aos participantes as principais características do framework, bem como as vantagens e desvantagens do seu uso, provendo o conhecimento básico necessário para começar a criar projetos dinâmicos de Single Page Applications.

Publicada em: Educação
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.003
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Minicurso "Conhecendo o AngularJS"

  1. 1. Instrutor: Eder Martins Franco sdfsdf Minicurso: Conhecendo o Angular JS v1.1 Semana do CursoTécnico em Informática 2016 28 de março a 01 de abril
  2. 2. Professor who?  Eder Martins Franco  Graduado em Sistemas de Informação (FUCAPI);  Certified Scrum Master e Developer;  Pós-Graduação em Engenharia de Software (PUC Minas - 2017);  Professor na Escola FUCAPI e Desenvolvedor na FPF Tech.  Atuando na área desde 2007;  Atuação e interesses:  Aplicações web (front-end e back-end), desktop (windows) e mobile (android);  PHP, Cold Fusion, Java, C, C++, C#;  Javascript, jQuery,Angular JS, HTML5, CSS3;  Arquitetura de software, frameworks, webservices, RESTfull APIs e design patterns;  Engenharia de software, bancos de dados metodologias ágeis, DevOps,TDD, BDD; Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com2
  3. 3. Agenda  1. Introdução  Arquitetura tradicional de uma aplicação web;  Front-end e back-end;  Frameworks (jquery, bootstrap);  Padrões de projeto para web (MVC, etc.)  Problemas comuns no desenvolvimento web  2. Angular JS???  Breve histórico.  Características;  Principais recursos;  Vantagens e desvantagens;  Exemplos de código (JS x jQuery x Angular) Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com3
  4. 4. Agenda  3. Angular JS!!!  Entendendo o código  Diretivas  Views  Modules  Controllers  Scope  Services  Injeção de dependências  4. Hands on  Criando um projeto com Angular JS.  5. Próximos passos?  Node.js, npm, generators, grunt e gulp. Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com4
  5. 5. Reflexão Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com5 “Ninguém é tão sábio que não tenha algo pra aprender e nem tão tolo que não tenha algo pra ensinar” Blaise Pascal
  6. 6. Introdução Conhecendo o Angular JS Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com66
  7. 7.  Arquitetura tradicional de uma aplicação web Introdução Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com77
  8. 8.  Front-end:  Programação do lado do cliente (client-side);  Elementos visuais;  HTML + CSS + mídias (imagens, vídeos, áudios, etc);  Execução no navegador;  Linguagens de programação limitadas;  Código é executado no navegador;  Ex.: javascript. Introdução Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com88
  9. 9.  Back-end:  Programação do lado do servidor (server-side);  Linguagens mais completas e robustas;  Acesso a outros serviços (banco de dados, servidores de e- mail, etc);  Programas complexos;  Tudo o que é feito no back-end é devolvido para o front de uma maneira que o browser seja capaz de entender (HTML, arquivos para download, etc);  Exemplos:  PHP, ColdFusion, Java, C#, Python, etc. Introdução Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com99
  10. 10.  Frameworks:  Criar softwares “do zero” é uma tarefa complicada;  Necessidade de reutilizar código e ganhar produtividade;  Organização de bibliotecas de código contendo implementações comuns e muito utilizadas;  Frameworks organizam coleções dessas bibliotecas e implementações de soluções para problemas já conhecidos;  Exemplos:  Enviar e-mail, gerar relatórios, persistência de dados, etc. Introdução Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com1010
  11. 11.  Frameworks:  Algumas bibliotecas e frameworks de front-end:  Bootstrap:  HTML, CSS e Javascript;  Implementações comuns e componentes reutilizáveis;  jQuery:  Poderosa biblioteca de javascript;  Escreva menos, faça mais;  Simplifica a codificação;  Poderosa para manipulação de elementos e eventos;  Material Design Lite (MDL)  Componentes para desenvolvimento front-end utilizando o Material Design do Google;  Mootools  Utilitários de javascript para auxiliar no desenvolvimento avançado com javascript, semelhante ao jquery. Introdução Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com1111
  12. 12.  Frameworks:  E no back-end?  Depende da linguagem.  Exemplos:  PHP:  Laravel (coisa linda de Deus);  Zend;  Cake;  CodeIgniter;  Yii;  Slim;  ProtoFW;  Outras linguagens:  APS .Net (C#);  Django (Não é o filme doTarantino), Eve (Python.);  Struts, JSF, Spring MVC,VRaptor, (Java); Introdução Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com1212
  13. 13.  Frameworks:  Frameworks utilizam padrões de projeto;  MVC – Model /View / Controller: Introdução Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com1313
  14. 14.  Problemas comuns no desenvolvimento web  Páginas lentas demais (o usuário perde o interesse);  Recarregamento completo da página a cada requisição;  Manipulação direta de dados na camada de visão;  Mistura de linguagens nas camadas;  Programação espaguete; Introdução Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com1414
  15. 15.  Problemas comuns no desenvolvimento web Introdução Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com1515
  16. 16.  E como colocar ordem na casa?  Executar do lado do servidor somente o essencial;  Diminuir a complexidade das aplicações;  Tornar as aplicações mais rápidas;  Evitar recarregamento constante de páginas;  Algumas soluções:  Frameworks ajudam muito nesta organização;  Javascript e ajax no front-end para manipular HTML e CSS;  Utilizar a programação no back-end para prover um serviço (API) que será utilizado pelo front-end;  Utilizar armazenamento do front-end e cache para diminuir o número de requisições;  jQuery foi a “bala de prata” do desenvolvedores para dinamizar aplicações web. Introdução Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com1616
  17. 17.  Problema resolvido?  Não!  jQuery não é tão poderoso quanto precisamos...  Escrevemos menos, mas ainda escrevemos muito;  É apenas uma biblioteca de funções;  Facilita o uso do Ajax, mas não a manipulação de dados;  Não é muito prático para construção de aplicações muito complexas;  Não ajuda na separação das camadas;  Não é facilmente testável; Introdução Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com1717
  18. 18. Angular JS??? Conhecendo o Angular JS Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com1818
  19. 19.  Um framework Super-heróico de Javascript! Angular JS??? Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com1919
  20. 20.  Breve histórico  Miško Hevery e Adam Abrons (2009) Angular JS??? Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com2020
  21. 21.  Breve histórico  Miško Hevery foi contratado pelo Google;  Foi trabalhar em um projeto chamado Google Feedback;  O projeto possuía 17 mil linhas de código JS;  Miško fez uma afirmação forte: refazer o projeto em bem menos tempo com seu framework Angular JS;  O projeto foi refeito em pouco mais de 3 semanas, com 1500 linhas;  O Angular foi abraçado pelo Google e passou a ser mantido por mais programadores da casa e utilizado em vários projetos;  Atualmente:  Angular 1.5.3 (março/2016);  Angular 2 em beta (Google, Microsoft e comunidade) Angular JS??? Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com2121
  22. 22.  Características  Framework MVC para aplicações web dinâmicas;  Single Page Application (SPA);  Suporte ao HTML 5;  Extensão do HTML por meio de diretivas;  Vínculo de dados em duas vias (two way data binding);  Funciona em vários browsers (cross browser compliance);  Open source e mantido pelo Google;  Injeção de dependências;  MVW (Model –View – Whatever). Angular JS??? Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com2222
  23. 23.  Características Angular JS??? Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com2323
  24. 24.  Principais recursos  Data binding:  Sincronização automática entre os componentes (view – model); Reflete as alterações feitas no model nas views;  Scope:  Objetos que referenciam a camada do model. Eles são como a “cola” entre o controller e a view;  Controllers:  Contém o código javascript (métodos) que vão manipular o escopo;  Directives:  Marcadores para manipular elementos do DOM (atributos, CSS, elementos HTML e etc); Permitem criar elementos customizados; Angular JS??? Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com2424
  25. 25.  Principais recursos  Templates:  São os arquivos que serão utilizados para criação das views, que contém as informações recebidas dos controllers e model. Podem ser formadas por um HTML ou várias partes (partials);  Filters:  Permitem criar filtros para manipular dados;  Injeção de dependências:  Permitem adicionar módulos, componentes e outros recursos para serem utilizados como dependências do projeto que está sendo desenvolvido. Angular JS??? Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com2525
  26. 26.  Principais recursos  Routes:  Permitem trocar as views sem necessidade de recarregar a página;  Services:  Permitem a criação de classes customizadas que nos permitem criar objetos para realizar operações específicas.  Por exemplo, criamos services para definir todas as operações de comunicação com o back-end, fazendo requisições XMLHttpRequests.  São indispensáveis para estruturação do app, modularização e organização do código. Angular JS??? Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com2626
  27. 27.  Vantagens  Criar aplicações mais fáceis de manter, utilizando o esquema SPA;  Capacidade de prover uma experiência mais responsiva, utilizando data binding;  Facilidade para testar o código criado;  Utilização de dependências para modularizar a aplicação e separar responsabilidades;  Escrever MUITO menos do que utilizando jQuery ou Js puro;  Separar completamente a aplicação do back-end;  As views são páginas com HTML puro, e toda a camada de negócios fica concentrada nos controllers. Angular JS??? Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com2727
  28. 28.  Desvantagens  Desvantagens facilmente contornáveis.  Fica vinculado ao suporte de Javascript no browser;  Possíveis problemas de segurança se a aplicação for mal implementada, já que todo o código roda no lado do cliente;  Não é suportado pelos browsers mais antigos; Angular JS??? Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com2828
  29. 29.  Quem está utilizando Angular JS?  Alguns websites populares que utilizam o AngularJS:  NASA  YouTube (PS3 App)  Wallmart  Weather.com  GoodFilms  Freelancer.com  Netflix  IstockPhoto.com  The Guardian  PayPal  VEVO  Lego.com Angular JS??? Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com2929
  30. 30.  Exemplos de código  O que queremos fazer:  O usuário deve digitar o nome dele em um campo de texto. O sistema deve exibir uma saudação em um bloco HTML. Angular JS??? Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com3030
  31. 31.  Javscript puro: Angular JS??? Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com3131
  32. 32.  jQuery Angular JS??? Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com3232
  33. 33.  Angular JS Angular JS??? Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com3333
  34. 34.  Exemplos de código  Vamos ver o resultado final:  Javascript puro:  http://eder.franco.eti.br/minicursos/angular/exemplos/js/  jQuery:  http://eder.franco.eti.br/minicursos/angular/exemplos/jquery/  Angular JS:  http://eder.franco.eti.br/minicursos/angular/exemplos/ng/ Angular JS??? Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com3434
  35. 35. Angular JS!!! Conhecendo o Angular JS Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com3535
  36. 36.  Entendendo o código: Angular JS!!! Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com3636 Inicializa o angular Cria a variável “nome” no model Exibe o conteúdo da variável “nome”
  37. 37.  Entendendo o código  Nosso exemplo anterior contém o menor app possível criado com angular JS;  Os atributos ng-app e ng-model são diretivas do Angular JS, que nos ajudam a manipular os elementos do HTML na nossa página;  Observe que não foi preciso escrever nenhuma linha de código javascript para que o valor digitado no campo posso copiado e inserido no HTML;  Este exemplo mostra o poder do two way data binding, que nos permite sincronizar as camadas do nosso aplicativo de maneira simples e eficiente; Angular JS!!! Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com3737
  38. 38.  Diretivas:  As diretivas do angular são marcadores para elementos do HTML que informam ao compilador do Angular JS para anexar um comportamento específico a um elemento;  Elas são extensões da linguagem HTML e nos permitem economizar a escrita de longas linhas de código javascript, por meio de implementações já contidas no angular;  Podemos, por exemplo, criar um laço de repetição para exibir dados em uma página html, manipular o clique em um elemento, inserir um classe CSS, exibir ou ocultar conteúdo, etc;  A seguir veremos as principais diretivas do Angular e o que elas nos permitem fazer. Angular JS!!! Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com3838
  39. 39.  Diretivas:  ng-app  Vincula uma aplicação Angular JS ao HTML;  ng-bind  Vincula uma expressão ou variável javascript do AngularJS a um elemento HTML, fazendo com que seu resultado seja exibido no elemento.  É o vínculo “one way” (unidirecional);  Faz o mesmo que utilizar {{nome_da_variável}}  Exemplo:  <div ng-bind=“nome”></div>  ng-model  Vincula valores do AngularJS a um elemento HTML, mas mantém a sincronização bidirecional (two way);  Marém a sincronização entre a view e o model; Angular JS!!! Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com3939
  40. 40.  Diretivas:  ng-class  Permite a associação de uma classe CSS a um elemento HTML;  Permite a utilização de condições para atribuir as classes dinamicamente;  Exemplo:  <div ng-class=“azul”></div>  <div ng-class=“{‘azul’: erro == false,‘vermelho’: erro == true}”  ng-click  Permite manipular o evento de clique em um elemento HTML;  Funciona de maneira semelhante ao atributo onClick;  ng-include  Permite incluir um template HTML em um determinado bloco  Exemplo:  <div ng-include=“menubar.html"></div> Angular JS!!! Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com4040
  41. 41.  Diretivas:  ng-repeat  Permite iterar sobre um array;  Exemplo:  Temos o seguinte array definido no javascript:  ...  $scope.nomes = [‘Eder’,‘Alessandro’,‘Rilmar’,‘Marcelo’,‘Ozenias’];  No HTML:  <div ng-repeat=“nome in nomes”>{{nome}}<div>  O resultado será: Eder Alessandro Rilmar Marcelo Ozenias Angular JS!!! Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com4141
  42. 42.  Diretivas:  ng-show e ng-hide  Ocultas ou exibe um elemento de acordo com uma condição.  Exemplo:  <div ng-show=“nome”>{{nome}}<div>  Se a expressão testada retornar verdadeiro (neste caso, se a variável nome existe), a div será exibida;  Se não, a div será criada no HTML, mas ficará ocuta;  ng-if  Remove ou recria um elemento HTML se uma determinada condição for atendida;  Difere-se do ng-show/ng-hide porque não oculta simplesmente o elemento, mas o remove;  Exemplo:  <div ng-if=“nome”>{{nome}}<div> Angular JS!!! Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com4242
  43. 43.  Diretivas:  ng-disable  Permite desabilitar ou habilitar um elemento HTML de acordo com o resultado de uma expressão;  ng-controller  Especifica um controller do AngularJs para manipulação do HTML em uso;  Falaremos mais sobre controllers adiante.  Você pode encontrar uma lista completa das diretivas do Angular JS na documentação oficial:  https://docs.angularjs.org/api/ng/directive  Observação:  O link acima corresponde à última versão estável o Angular JS quando este material foi elaborado (1.5.3).  Referência rápida:  http://www.cheatography.com/proloser/cheat-sheets/angularjs/ Angular JS!!! Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com4343
  44. 44.  Module  Com angular JS podemos definir as aplicações como módulos;  Cada módulo corresponde a um nome pelo qual a aplicação atenderá.  Dentro de um módulo podemos definir controllers, services, filters e directives.  Views  São os arquivos que contém o código HTML com a camada de visualização do aplicativo;  Podemos utilizar somente uma view para toda a aplicação ou separar parte da aplicação em partial views, incluindo-as no HTML principal utilizando as diretivas ng-include ou ng-view;  Exemplificaremos o uso destas diretivas com as views adiante. Angular JS!!! Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com4444
  45. 45.  Controllers  Os controladores são classes javascript convencionais;  Responsabilidades:  Inicializar objetos do escopo ($scope);  Disponibilizar métodos que ligados ao escopo que permitam a manipulação das views;  Scope  O escopo vincula os controllers às views;  São objetos do AngularJS utilizados para expor dados e funções do model para a view;  Cada novo controller define um novo escopo;  É manipulado pela variável $scope;  O escopo global da aplicação é manipulado pela variável $rootScope; Angular JS!!! Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com4545
  46. 46.  Services  Services são classes javascript que nos permitem separar responsabilidades no AngularJS, para executar determinadas tarefas;  Podemos criar um service, por exemplo, para definir métodos de busca e manipulação de dados em uma API no back-end da aplicação;  Existem alguns services nativos do AngularJS, como o $http (que vamos utilizar adiante), mas também podemos implementar nossos próprios services utilizando os métodos service ou factory do AngularJS. Angular JS!!! Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com4646
  47. 47.  Injeção de dependências  É o mecanismo pelo qual o AngularJS nos permite especificar e incluir componentes e módulos como dependências para uma aplicação;  São passados a um módulo angular como parâmetros na função associadas ao método module; Angular JS!!! Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com4747
  48. 48. Hands on Conhecendo o Angular JS Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com4848
  49. 49.  Criando um projeto com Angular JS.  Agora que já vimos os principais conceitos e métodos do Angular JS, vamos criar nossa primeira aplicação.  Antes de iniciar esta atividade prática, vamos realizar o download da última versão estável do Angular JS (1.5.3 na época em que este material foi escrito):  https://angularjs.org/ A partir daqui nossa atividade é prática; Os exemplos serão publicados em: http://moodle.franco.eti.br Hands on Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com4949
  50. 50. Próximos passos? Conhecendo o Angular JS Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com5050
  51. 51.  O que estudar agora?  Agora que você já conhece o Angular JS, quero encorajá-lo a continuar estudando seus componentes;  Neste minicurso tivemos uma visão breve e superficial do poder deste framework, mas há muito mais a ser estudado;  Um bom caminho a seguir é estudar o desenvolvimento de webapps com Angular JS utilizando ferramentas que possam lhe oferecer maior produtividade, como o Node.js; Próximos passos? Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com5151
  52. 52.  O que estudar agora?  Uma vez familiarizado com o Node.js e o gerenciador de pacotes npm, você poderá utilizar os diversos geradores de projetos (generators) disponíveis em repositórios compartilhados;  Estes geradores criam automaticamente toda a estrutura básica para que você possa começar um projeto Angular rapidamente, incluindo gerenciadores de tarefas para testes, obfuscação de código, deploy e etc;  Também é recomendável que você estude o grunt e gulp. Estes são gerenciadores de tarefas que vão ajuda-lo a ganhar produtividade no desenvolvimento dos seus aplicativos. Próximos passos? Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com5252
  53. 53. Referências 1. Angular JS. HTML enhanced for web apps! Disponível em <https://angularjs.org/>. Acesso em 29/03/2016; 2. Google. Angular JS API Reerence. ! Disponível em <https://docs.angularjs.org/api> Acesso em 29/03/2016; 3. AZEVEDO, Sérgio. Angular JS – Abraçando o MVC Client- Side. Disponível em <http://pt.slideshare.net/sergiorjunior/angularjs-abraando-o-mvc- clientside> Acesso em 29/03/2016; 4. BÉGAUDEAU, Stéphane. AngularJS 101 – Everything you need to know to get started. Disponível em <http://pt.slideshare.net/sbegaudeau/angular-js-101-everything-you- need-to-know-to-get-started> Acesso em 29/03/2016; 5. Tutorials Point. AngularJS - Overview. Disponível em <http://www.tutorialspoint.com/angularjs/angularjs_overview.htm> Acesso em 29/03/2016; Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com5353
  54. 54. Referências 6. RAIBLE, Matt. The Art of AngularJS - Overview. Disponível em <http://pt.slideshare.net/mraible/the-art-of-angularjs> Acesso em 29/03/2016; 7. SAHAY, Rahul. Getting Started With Angular JS (English Edition) . Disponível em <http://bit.ly/1qryVXQ> Acesso em 14/04/2016; 8. SESHADRI, Shyam. Desenvolvendo com AngularJS. 1ª edição. São Paulo: Novatec, 2014; 9. FELIX,Waldir. História do AngularJS. Disponível em <http://waldyrfelix.net/2016/01/04/historia-do-angularjs//> Acesso em 29/03/2016; 10. SESHADRI, Shyam. Desenvolvendo com AngularJS. 1ª edição. São Paulo: Novatec, 2014; Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com5454
  55. 55. Referências 6. RAIBLE, Matt. The Art of AngularJS - Overview. Disponível em <http://pt.slideshare.net/mraible/the-art-of-angularjs> Acesso em 29/03/2016; 7. SAHAY, Rahul. Getting Started With Angular JS (English Edition) . Disponível em <http://bit.ly/1qryVXQ> Acesso em 14/04/2016; 8. SESHADRI, Shyam. Desenvolvendo com AngularJS. 1ª edição. São Paulo: Novatec, 2014; 9. FELIX, Waldir. História do AngularJS. Disponível em <http://waldyrfelix.net/2016/01/04/historia-do-angularjs//> Acesso em 29/03/2016; 10. SESHADRI, Shyam. Desenvolvendo com AngularJS. 1ª edição. São Paulo: Novatec, 2014; 11. Eduonix. Top 15 websites and apps built with AngularJS. Disponível em <https://www.eduonix.com/blog/web-programming- tutorials/top-15-websites-and-apps-built-with-angularjs/> Acesso em 29/03/2016; 12. Stfalcon.com. Large Websites using AngularJS. Disponível em <http://stfalcon.com/en/blog/post/large-websites-using-AngularJS/> Acesso em 29/03/2016; 13. MINAR, Igor. MVC vs MVVM vs MVP. Disponível em <https://plus.google.com/+AngularJS/posts/aZNVhj355G2> Acesso em 14/04/2016. Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com5555
  56. 56. Conhecendo o Angular JS Eder Martins Franco efranco23@gmail.com http://moodle.franco.eti.br http://fb.me/edermartinsfranco Minicurso: Conhecendo o Angular JS - Eder Franco - efranco23@gmail.com5656 Este trabalho está licenciado sob uma Licença Creative Commons Atribuição-NãoComercial-CompartilhaIgual 4.0 Internacional. Para ver uma cópia desta licença, visite http://creativecommons.org/licenses/by-nc-sa/4.0/.

×