curso angularjs - parte 1
TRANSCRIPT
Desenvolvimento Web Moderno com AngularJS Parte 1Alvaro Viebrantz
Alvaro ViebrantzAnalista de TI - Sefaz-MTCTO na Startup ProcurixCiência da Computação - UFMT
Cuiabá, MT, Brasil
alvarowolfx
@alvinhuuu
Roadmap
• Padrões modernos web
• Ferramentas
• Angular JS
• Angular na Prática
Padrões modernos web
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/
The Seven frameworks (2012)
O que eles têm em comum ?• Pensados para desenvolver aplicações web (grandes ?)
• Client side frameworks
Site Web app
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
Client Side
Server Side
View
Model
Controller
View
Model
Controller
Why ?
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
Manutenção• Testes
• Refatoração
• Design Patterns conhecidos
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
Ferramentas
Ferramentas
• Node.js
• Gerenciamento de dependências
• Pré processadores css
• Task runners
• Generators
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
Gerenciamento de dependências
jQuery
Bootstrap
Minha aplicação web
getBootstrap.com
jquery.com
depende
depende
Gerenciamento de dependências
• Já temos ferramentas em várias linguagens
• Maven - Java
• Composer - PHP
• Sbt - Scala
• Lein - Clojure
• pip - Python
Bower
bower.json
Bower
Pré processadores css
• Extendem o que conhecemos do css:
• Variáveis
• Herança
• Mixins
• Nesting
• Modularização
Várias linguagens
E extensõeshttp://sass-lang.com/ http://lesscss.org/ https://learnboost.github.io/stylus/
http://bourbon.io/
Exemplo com Sass
Task Runners
• Executam atividades de forma automatizada
• Minificação
• Compilação
• Concatenação de arquivos
• Resolução de dependências
• Deploy
Os mais famosos Task Runners
http://gulpjs.com http://gruntjs.com
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/
Arrumando o ambiente
• Instalação Node.js
• https://nodejs.org
• Instalação do Bower
• npm install -g bower
• Projeto de exemplo usando Twitter Bootstrap
Angular JS
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.”
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”
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
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
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
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
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
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
Na prática
Eu conserto coisas feitas de madeira !!!
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
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
Na prática
Agora eu tenho alguem que cuida das serras !!!
Na prática
DI
Mas como eu vou pegar o material que eu
preciso agora ?
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
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
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
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
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
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
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
Filtros• Filtros podem ser aplicados em qualquer expressão
• Sintaxe: expressão | nomeFiltro: parâmetros
• Também pode ser injetado: $filter(‘nomeDoFiltro’)(parametros)
Nomecurrency {{ valor | currency: “R$” }} date {{ data | date: ‘dd/mm/yyyy’ }} filter it in items | filter:busca json {{ items | json }}limitTo it in items | limitTo:5lowercase, uppercase {{ it.descricao | uppercase }} number {{ it.qtde | number:casas }}orderBy it in items | orderBy: ‘qtde’
Várias outras diretivas
https://docs.angularjs.org/api
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 extendidahttps://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
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
Onde ficam os Services
App
View
Directive
Controller
Service
Service
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
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)
Services em AngularJS
Modularizando nossa aplicação
• Separar a parte de itens da lista em um Service
Adicionando mais funções
• Armazenar em LocalStorage (HTML 5)
• Marcar como comprado
• Ordernar por status
• Filtrar por status