O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Curso AngularJS - Parte 1

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
Curso AngularJS - Parte 2
Curso AngularJS - Parte 2
Carregando em…3
×

Confira estes a seguir

1 de 60 Anúncio

Curso AngularJS - Parte 1

Baixar para ler offline

Curso sobre AngularJS, tratando deste ambiente e ferramentas modernas de desenvolvimento até o desenvolvimento de uma aplicação usando AngularJS. Curso em duas partes.

No final foram desenvolvidas duas aplicações que podem ser vistas nos links:

https://github.com/alvarowolfx/shopping-list
https://github.com/alvarowolfx/ng-pokedex

Curso sobre AngularJS, tratando deste ambiente e ferramentas modernas de desenvolvimento até o desenvolvimento de uma aplicação usando AngularJS. Curso em duas partes.

No final foram desenvolvidas duas aplicações que podem ser vistas nos links:

https://github.com/alvarowolfx/shopping-list
https://github.com/alvarowolfx/ng-pokedex

Anúncio
Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Anúncio

Semelhante a Curso AngularJS - Parte 1 (20)

Mais de Alvaro Viebrantz (20)

Anúncio

Curso AngularJS - Parte 1

  1. 1. Desenvolvimento Web Moderno com AngularJS Parte 1 Alvaro Viebrantz
  2. 2. AlvaroViebrantz Analista de TI - Sefaz-MT CTO na Startup Procurix Ciência da Computação - UFMT Cuiabá, MT, Brasil alvarowolfx @alvinhuuu
  3. 3. Roadmap • Padrões modernos web • Ferramentas • Angular JS • Angular na Prática
  4. 4. Padrões modernos web
  5. 5. Evolução da Web “Não é mais bom o suficiente construir aplicações web baseando-se em carregar uma pagina web completa e fazer com que ela se comporte dinamicamente. Para construir aplicações web hoje rápidas, responsivas e modernas você precisa repensar a forma de desenvolver.” The seven frameworks - Throne of JS http://blog.stevensanderson.com/2012/08/01/rich-javascript-applications-the-seven-frameworks-throne-of-js-2012/
  6. 6. The Seven frameworks (2012)
  7. 7. O que eles têm em comum ? • Pensados para desenvolver aplicações web (grandes ?) • Client side frameworks Site Web app
  8. 8. Server Side Client Side Frameworks • Necessidade de se organizar melhor aplicações web. • Como estruturar o seu projeto no lado do cliente ? • MVC, MVCC, MVVM, MV* ?!?!? View Model Controller
  9. 9. Client Side Server Side View Model Controller View Model Controller
  10. 10. Why ?
  11. 11. Organização • Sem padronização fica fácil produzir código macarrônico • jQuery por exemplo não força um padrão • Separação de responsabilidades • DRY https://en.wikipedia.org/wiki/Don't_repeat_yourself
  12. 12. Manutenção • Testes • Refatoração • Design Patterns conhecidos
  13. 13. Produtividade • Abstração de tarefas comuns • Tempo constante de desenvolvimento • Sem um framework client side, quanto mais a aplicação cresce, mais difícil é de se manter • Curva de aprendizado inicial é grande geralmente
  14. 14. Ferramentas
  15. 15. Ferramentas • Node.js • Gerenciamento de dependências • Pré processadores css • Task runners • Generators
  16. 16. Node.js • Javascript server side • Aplicações inteiras com javascript • Aplicações isomórficas - http://isomorphic.net • Foi adotado para o desenvolvimento de várias ferramentas de terminal • NPM - Node package manager https://nodejs.org
  17. 17. Gerenciamento de dependências jQuery Bootstrap Minha aplicação web getBootstrap.com jquery.com depende depende
  18. 18. Gerenciamento de dependências • Já temos ferramentas em várias linguagens • Maven - Java • Composer - PHP • Sbt - Scala • Lein - Clojure • pip - Python
  19. 19. Mas e no client-side ? Bower https://bower.io
  20. 20. Bower bower.json
  21. 21. Bower
  22. 22. Pré processadores css • Extendem o que conhecemos do css: • Variáveis • Herança • Mixins • Nesting • Modularização
  23. 23. Várias linguagens E extensões http://sass-lang.com/ http://lesscss.org/ https://learnboost.github.io/stylus/ http://bourbon.io/
  24. 24. Exemplo com Sass
  25. 25. Task Runners • Executam atividades de forma automatizada • Minificação • Compilação • Concatenação de arquivos • Resolução de dependências • Deploy
  26. 26. Os mais famosos Task Runners http://gulpjs.com http://gruntjs.com
  27. 27. Generators • Facilita a criação de estrutura inicial do projeto • Aproveita padrões estabelecidos pela comunidade • Vários generators disponíveis • Crie seu próprio generator !!! • Ajuda a evitar tarefas repetitivas http://yeoman.io/generators/
  28. 28. Arrumando o ambiente • Instalação Node.js • https://nodejs.org • Instalação do Bower • npm install -g bower • Projeto de exemplo usando Twitter Bootstrap
  29. 29. Angular JS
  30. 30. O que é afinal ? • Framework Client Side Full Stack angularjs.org
  31. 31. Filosofia • “É uma boa idéia separar lógica de manipulação de DOM da lógica da aplicação.” • “Separar quando possível o lado cliente do lado servidor, assim o desenvolvimento desses lados podem ser feitos em paralelo e re-usados.” • “É de muita ajuda se o framework guia o desenvolvedor em todo processo de construir uma aplicação.”
  32. 32. Features • Baseado em módulos e componentes • Expressões • Inversão de Controle e Injeção de Dependência • Possibilita extensão do HTML • Data binding • Muitas funcionalidades “build-in”
  33. 33. Módulos e componentes • Em AngularJS, temos o seguinte • Uma aplicação é um módulo • Um módulo é um conjunto de componentes • Um módulo pode depender de outros módulos
  34. 34. Primeira aplicação • Criar index.html • Importar o AngularJS • Criar um modulo ‘curso’ • Inicializar a aplicação com a diretiva ng-app • ng é um nome curto para Angular
  35. 35. Expressões • Pequenos trechos em javascript envolvidos em {{ expressão }} • Exemplos • 1 + 2 • user.name • items[index] • Internamente o framework utiliza o serviço $parse
  36. 36. Controller • Controla uma parte da pagina, conectando a view com o model da sua aplicação. • Temos a diretiva ng-controller para referenciar um controller em uma parte da aplicação • View e Controller são ligados pelo $scope • Toda informação deve ser colocada no $scope para ser utilizada na view • Podemos dizer que o $scope é uma dependência dos controller
  37. 37. Primeiro controller • Criar o modulo curso.controllers • Criar o controller MainController • MainController recebe $scope como parâmetro • MainController passa uma mensagem para a view • O modulo curso depende do modulo curso.controllers
  38. 38. Injeção de dependências • IoC - Inversion of Control • DI - Dependency Injection • SoC - Separation of Concerns IoC DI SoC Objetos não vão atrás de suas dependências Responsável por gerenciar as dependências Conceito de separação de responsabilidades
  39. 39. Na prática Eu conserto coisas feitas de madeira !!!
  40. 40. Na prática Quando vou consertar algo, geralmente preciso de algo para cortar madeira(dependência). Mas dá muito trabalho arranjar tudo isso, queria focar apenas no meu trabalho. SoC
  41. 41. Na prática Que tal se alguem me arranjasse uma serra ? Eu sei apenas usar serras, alguém pode montar uma pra mim e me entregar !!! IoC
  42. 42. Na prática Agora eu tenho alguem que cuida das serras !!!
  43. 43. Na prática DI Mas como eu vou pegar o material que eu preciso agora ?
  44. 44. Injeção de dependência em AngularJS • Todo components do angular pode receber suas dependências de 3 formas. • Via nome dos argumentos • Passando um array com as dependências na declaração do componente • Via atributos $inject
  45. 45. Nossa primeira aplicação • Vamos criar uma lista de compras • Cada item da lista vai ter uma descrição e uma quantidade • Os items poderão ser marcados como comprados ou ainda não comprados • Poderemos filtrar os itens comprados não comprados • Poderemos ver quantos itens ainda falta comprar
  46. 46. Diretiva ng-model • Cria um bind entre um componente de entrada na view para o controller • Pode ser usado em input, select e textarea • Tem suporte para validações • required, min/max length, number • Trabalha em conjunto com a diretiva ng-messages • Pode ser requerido em outros componentes customizados para aproveitar o comportamento
  47. 47. Diretiva ng-click • Cria um bind entre uma função no controller e um evento de click na view • Em nossa aplicação fazer com que um item seja criado ao clicar no botão Adicionar
  48. 48. Diretiva ng-repeat • Itera em uma coleção de items e repete o html filho para cada iteração • Sintaxe da expressão repeat • variável in expression • (chave, valor) in expression • Pode ser aplicado um filtro antes da iteração (veremos mais tarde detalhes sobre filtros) • Gera as variáveis $index, $first, $last, $middle, $even e $odd para serem utilizadas na view
  49. 49. Diretiva ng-class • Aplica uma classe css em um componente da view de acordo com alguma variável no controller • Sintaxe • Variável diretamente • Map syntax
  50. 50. Diretiva ng-if, ng-show e ng-hide • Diretivas para esconder ou mostrar componentes da view • Diferença entre eles • ng-show e ng-hide fazem a mesma coisa, é apenas uma questão de semântica • ng-if remove o componente da arvore DOM, enquanto que ng-show/ng-hide apenas esconde o componente da DOM
  51. 51. Filtros • Filtros podem ser aplicados em qualquer expressão • Sintaxe: expressão | nomeFiltro: parâmetros • Também pode ser injetado: $filter(‘nomeDoFiltro’)(parametros) Nome currency {{ valor | currency: “R$” }} date {{ data | date: ‘dd/mm/yyyy’ }} filter it in items | filter:busca json {{ items | json }} limitTo it in items | limitTo:5 lowercase, uppercase {{ it.descricao | uppercase }} number {{ it.qtde | number:casas }} orderBy it in items | orderBy: ‘qtde’
  52. 52. Várias outras diretivas https://docs.angularjs.org/api
  53. 53. Validações • Todo formulário em conjunto com a diretiva ng-model possibilita a validação da entrada dos dados • Sintaxe: formulario.atributo.<estado> ou formulario.<estado> • Várias validações built-in : required, number, min, max, minlength, maxlength, pattern • Pode ser extendida https://docs.angularjs.org/guide/forms https://docs.angularjs.org/api/ng/directive/input Estado Significado $error Contém erros $pristine Os dados são novos $touched e $dirty Já foi alterada a informação $valid Os dados são válidos $invalid Os dados são inválidos
  54. 54. Services • Nós já aprendemos a utilizar os controllers, porém eles estão com muitas responsabilidades • Quando estamos desenvolvendo alguma aplicação web, podemos ter várias camadas: • Conversa com o servidor • Acessar uma api Restful qualquer • Armazenar dados na sessão ou armazenamento local. • Já vimos até um serviço de Log ( $log service ) • Um Service pode ser qualquer coisa que possa ser reaproveitado pela sua aplicação
  55. 55. Onde ficam os Services App View Directive Controller Service Service
  56. 56. Services em AngularJS • Basicamente eles tem duas grandes características: • Lazy Instantiation: Só são iniciados quando forem requisitados a primeira vez • Singletons: Todo componente dependente de um Service tem uma única referencia a instância criada pela fabrica de serviços
  57. 57. Services em AngularJS • Nós temos 3 tipos de Services • Service: Cria uma instância de uma função, ou seja, new Funcao() • Sintaxe : modulo.service(‘nomeService’, function) • Factory: É retornado o valor da invocação da função passada • Sintaxe: modulo.factory(‘nomeFactory’, function) • Provider: Cria uma instância da função passada, porém é invocada uma função $get deste objeto para instanciar o serviço • Sintaxe: modulo.provider(‘nomeProvider’, function)
  58. 58. Services em AngularJS
  59. 59. Modularizando nossa aplicação • Separar a parte de itens da lista em um Service
  60. 60. Adicionando mais funções • Armazenar em LocalStorage (HTML 5) • Marcar como comprado • Ordernar por status • Filtrar por status

×