Angular 101 Willian Martins 

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. 

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 

CODE TIME! 

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

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 

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 

CODE TIME 2, A REVANCHE!! 

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. 

CODE TIME 3, O RETORNO!!! 

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. 

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 

$scope • É a viewModel do template • Carrega as funções e helpers criado pela controller • Controller filhas herdam o $scope da controller pai (PERIGO!!!) 

CODE TIME 4, sem criatividade :( 

Onde estudar? • https://www.codeschool.com/courses/shaping-up- with-angular-js • https://docs.angularjs.org/guide/ 

Perguntas? facebook.com/wmsbill twitter.com/wmsbill