Angular 101

Introdução ao Angular 1.x e seus componentes arquiteturais.

A introduction to Angular 1.x and his architectural components.

Transcript

1. Angular 101 Willian Martins
2. O que é o AngularJs? • Não é apenas uma biblioteca javascript • Não é uma biblioteca de manipulação DOM • Angular é o que o HTML deveria ser se fosse projetado para aplicações • Baseado em MVC/MVVM • Angular ensina para o Browser uma nova sintaxe.
3. AngularJs - Core Features • HTML declarativo • Two way data binding • Componentes reusáveis • Expressions • Directives • Modules • Injeção de dependência • Services/Factory • $http, $scope e outras coisas legais
4. CODE TIME!
5. Expressions • Uma expression num template é um código parecido com JS • Permite ler e escrever variáveis • Essas Variáveis não são globais • Já vamos ver que tipo de variáveis são essas • São interpoladas pelos caracteres {{ e }}.
6. Directives • Adiciona comportamento ao HTML • "Ensina" o HTML alguns truques • Baseado em parâmetros HTML ou custom tags • ng-app, ng-init, ng-show, ng-hide, ng-repeat, ng-if, ng- model, etc. • É apenas uma função que roda quando o compilador do Angular o encontra no DOM
7. Directives - 2 • ng-app - Inicia a aplicação. • ng-init - Inicializa variáveis no template • ng-show/ng-hide - Mostra ou esconde código baseado em uma condicional • ng-repeat - Similar ao for each, só que no template • ng-if - Renderiza ou não um código baseado numa condicional • ng-model - referencia a uma variável do $scope no template
8. CODE TIME 2, A REVANCHE!!
9. Módulo - introdução • Módulos especificam de forma declarativa como a aplicação deve ser inicializada • Pode haver múltiplos módulos numa aplicação • Os módulos podem ser interdependentes • Eles podem carregar rotas, controllers, models, config, services, factories etc.
10. CODE TIME 3, O RETORNO!!!
11. Controllers • Controller - Instancia e inicializa todos as variáveis e helper functions para o template • É instanciado através de uma rota, directive ou da directive ng-controller • Um bom controller não deve fazer mais que o descrito no item 1.
12. Dependency Injection • É um padrão de design de código onde o código a ser executado já recebe suas dependências. • No angular é um processo de dois passos. Injeção no módulo e nos componentes do módulo
13. $scope • É a viewModel do template • Carrega as funções e helpers criado pela controller • Controller filhas herdam o $scope da controller pai (PERIGO!!!)
14. CODE TIME 4, sem criatividade :(
15. Onde estudar? • https://www.codeschool.com/courses/shaping-up- with-angular-js • https://docs.angularjs.org/guide/
16. Perguntas? facebook.com/wmsbill twitter.com/wmsbill