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

1. Desenvolvimento Web
Moderno com AngularJS
Parte 1
Alvaro Viebrantz

2. AlvaroViebrantz
Analista de TI - Sefaz-MT
CTO na Startup Procurix
Ciência da Computação - UFMT
Cuiabá, MT, Brasil
alvarowolfx
@alvinhuuu

3. Roadmap
• Padrões modernos web
• Ferramentas
• Angular JS
• Angular na Prática

4. Padrões modernos web

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. The Seven frameworks (2012)

7. O que eles têm em comum ?
• Pensados para desenvolver aplicações web (grandes ?)
• Client side frameworks
Site Web app

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. Client Side
Server Side
View
Model
Controller
View
Model
Controller

10. Why ?

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. Manutenção
• Testes
• Refatoração
• Design Patterns conhecidos

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. Ferramentas

15. Ferramentas
• Node.js
• Gerenciamento de dependências
• Pré processadores css
• Task runners
• Generators

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. Gerenciamento de dependências
jQuery
Bootstrap
Minha aplicação web
getBootstrap.com
jquery.com
depende
depende

18. Gerenciamento de dependências
• Já temos ferramentas em várias linguagens
• Maven - Java
• Composer - PHP
• Sbt - Scala
• Lein - Clojure
• pip - Python

19. Mas e no client-side ?
Bower
https://bower.io

20. Bower
bower.json

21. Bower

22. Pré processadores css
• Extendem o que conhecemos do css:
• Variáveis
• Herança
• Mixins
• Nesting
• Modularização

23. Várias linguagens
E extensões
http://sass-lang.com/ http://lesscss.org/ https://learnboost.github.io/stylus/
http://bourbon.io/

24. Exemplo com Sass

25. Task Runners
• Executam atividades de forma automatizada
• Minificação
• Compilação
• Concatenação de arquivos
• Resolução de dependências
• Deploy

26. Os mais famosos Task Runners
http://gulpjs.com http://gruntjs.com

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. 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. Angular JS

30. O que é afinal ?
• Framework Client Side Full Stack
angularjs.org

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. 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. 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. 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. 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. 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. 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. 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. Na prática
Eu conserto coisas feitas de
madeira !!!

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. 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. Na prática
Agora eu tenho alguem que cuida
das serras !!!

43. Na prática
DI
Mas como eu vou
pegar o material que eu
preciso agora ?

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. 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. 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. 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. 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. 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. 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. 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. Várias outras diretivas
https://docs.angularjs.org/api

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. 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. Onde ficam os Services
App
View
Directive
Controller
Service
Service

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. 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. Services em AngularJS

59. Modularizando nossa aplicação
• Separar a parte de itens da lista em um Service

60. Adicionando mais funções
• Armazenar em LocalStorage (HTML 5)
• Marcar como comprado
• Ordernar por status
• Filtrar por status