Transferir como PDF, PPTX
![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](https://image.slidesharecdn.com/cursoangular-parte1-150707000734-lva1-app6892/75/Curso-AngularJS-Parte-1-35-2048.jpg)
Carregado porAlvaro Viebrantz
Curso AngularJS - Parte 1
O documento aborda o desenvolvimento web moderno utilizando AngularJS, destacando a importância de frameworks client-side e boas práticas de organização do código. Também explora ferramentas como Node.js e Bower para gerenciamento de dependências, além de descrever as principais funcionalidades e conceitos do AngularJS, como módulos, diretivas e injeção de dependências. A primeira aplicação exemplificada é uma lista de compras, detalhando o uso de diversas diretivas e validações no AngularJS.
Mais conteúdo relacionado
Semelhante a Curso AngularJS - Parte 1
Curso AngularJS - Parte 1
- 1. Desenvolvimento Web Moderno comAngularJS 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 modernosweb • Ferramentas • Angular JS • Angular na Prática
- 4.
- 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 elestêm em comum ? • Pensados para desenvolver aplicações web (grandes ?) • Client side frameworks Site Web app
- 8. Server Side Client SideFrameworks • 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.
- 10.
- 11. Organização • Sem padronizaçãofica 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 detarefas 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.
- 15. Ferramentas • Node.js • Gerenciamentode dependências • Pré processadores css • Task runners • Generators
- 16. Node.js • Javascript serverside • 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 Minhaaplicaçã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 noclient-side ? Bower https://bower.io
- 20.
- 21.
- 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.
- 25. Task Runners • Executamatividades de forma automatizada • Minificação • Compilação • Concatenação de arquivos • Resolução de dependências • Deploy
- 26. Os mais famososTask Runners http://gulpjs.com http://gruntjs.com
- 27. Generators • Facilita acriaçã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.
- 30. O que éafinal ? • Framework Client Side Full Stack angularjs.org
- 31. Filosofia • “É umaboa 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 emmó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 • Criarindex.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 trechosem javascript envolvidos em {{ expressão }} • Exemplos • 1 + 2 • user.name • items[index] • Internamente o framework utiliza o serviço $parse
- 36. Controller • Controla umaparte 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 • Criaro 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 consertocoisas feitas de madeira !!!
- 40. Na prática Quando vouconsertar 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 talse 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 eutenho alguem que cuida das serras !!!
- 43. Na prática DI Mas comoeu vou pegar o material que eu preciso agora ?
- 44. Injeção de dependênciaem 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 • Criaum 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 • Criaum 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 • Iteraem 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 • Aplicauma 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-showe 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 podemser 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.
- 53. Validações • Todo formulárioem 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 osServices 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.
- 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