Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular 101

Angular 101

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

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

Willian Martins

August 01, 2015
Tweet

More Decks by Willian Martins

Other Decks in Technology

Transcript

  1. 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.
  2. 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
  3. 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 }}.
  4. 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
  5. 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
  6. 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.
  7. 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.
  8. 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
  9. $scope • É a viewModel do template • Carrega as

    funções e helpers criado pela controller • Controller filhas herdam o $scope da controller pai (PERIGO!!!)