Seed sobre AngularJS e seus conceitos básicos

1. AngularJS Overview
Denilson Telaroli
Fevereiro / 2014

2. Overview
●
Framework JS MVW
●
Mantido pela Google e Comunidade
●
Baseado em conceitos do Flex
●
Funcionalidades
–
Data Binding
–
Injectable
–
Testable
–
Localization
–
Plain Old Javascript Object
–
Reusable components
–
Form validation
–
Free of DOM (thank god)
–
REST friendly ($resource component)
–
Routes control

3. Desvantagens
●
SEO
●
Analytics
●
Documentação básica
●
●
“Não permite” integração com outros
frameworks diretamente no DOM
Use-o para single-pages e webapps

4. Curva de aprendizado x sentimento

5. Modules
●
Módulos são reaproveitáveis e injetáveis

6. Rotas
●
Permite instanciar um controller e carregar uma
view

7. Services
●
Singleton (até pressionar F5)
●
Injetável

8. Filter
●
Servem para...
–
Listas
–
Objetos
–
Html
–
Textos

9. Diretivas
●
Ponte entre DOM e JS
●
Difíceis de entender
●
API Poderosa

10. Controllers
●
Permitem Herança
●
Aceitam components por DI

11. Testes
●
Framework padrão: Jasmine
●
Angular-seed vem preparado para o Karma
●
O Karma facilita CI

12. Uso básico - Diretivas
●
Ng-app
–
●
Diretiva que declara um módulo no html
Ng-controller
–
Declara um escopo de controller
–
Aceita herança declarando dois nós (um dentro do outro) com ng-controller
●
●
Ng-model
–
●
Evento onclick
Ng-repeat
–
●
Diretiva usada em formulários (inputs)
Ng-click
–
●
<div ng-controller=”PaiCtrl”><div ng-controller=”FilhoCtrl”></div></div>
Loop
{{expression}}
–
Imprime no local o valor da variável expression na variável $scope do ctrl ($scope.expression)
–
Aceita expressões javascript
●
●
{{1 + 1 === 2 ? 'ok' : 'error'}}
{{getValue()}}

13. Uso básico - Formulários

14. Comunidade
●
Muito ativa, apesar de nova tem muita coisa
pronta
–
http://angularjs.org
–
https://github.com/angular/angular.js
–
http://ngmodules.org