O Poderoso AngularJS

O poderoso AngularJS

Beto MUNIZ

Paulo PIRES

@obetomuniz

@paulo_hp

AgendaO que é AngularJS?

Conceitos

Bootstrap e Runtime

Mitos, prós e contras

The future is here

Demo Time

Referências

O que é AngularJS?

Extende o HTML

two-way data binding

Components Based

Alguns Conceitos

directives

**ngApp

**ngController

**ngModel

**ngRepeat

**ngClick

**ngSrc

Custom Directives

factories, services, providers

**$http

**$location

**$log

**$timeout

**$animate

filters

**filter

**number

**order

routing

**ngRoute

**$routeParams

**$routeProvider

**ngView

$scope

ngResources

ngCookies

***

Bootstrap &

Runtime

Bootstrap

1. Navegador faz o parse do HTML para o DOM

2. Carrega o angular.js

3. Espera pelo evento DOMContentLoaded

4. O Angular 'procura' pela diretiva ng-app

5. O $injector é configurado de acordo com as dependências

6. E cria $compile e o $rootScope

7. O $compile compila o DOM dinâmico e linka com o $scope

Runtime

1. Inicia-se com o contexto de execução do angular chamando $scope.$apply(stimulusFn)

2. Executa a função stimulusFn

3. Entra no $digest Loop

4. Agenda a execução com $evalAsync

5. Confere a $watch list

6. E renderiza novamente o DOM

Mitos, prós e contras

Mitos

AngularJS não protege o seu sistema de desenvolvedores

que escrevem um péssimo código

AngularJS não substitui o jQuery, mas pode evitar o seu uso em alguns casos

AngularJS não é o melhor, porém nunca me deixou na mão

AngularJS não é mágico, tudo depende de você.

Prós

compreensivo

rico em funcionalidades

grande comunidade

Injeção de dependência no sangue.

Testable Friendly

by Google!

Contras (na nossa opinião)

Documentação mais ou menos

Performance

Templates Engessados

The future is hereAngular 2.0

Mobile first

Modularização do Framworks

Change Detection

Dependency Injection

Templating

Persistance

Routing

Logging

Annotations

Scaffolding

Reference App

Demo Time

github.com/paulohp/whatsup-google-io

Referências e Links

docs.angularjs.org/api

code.angularjs.org/1.2.17/docs/api/ng/directive

docs.angularjs.org/api/ng#directive

code.angularjs.org/1.2.17/docs/api/ng/filter

code.angularjs.org/1.2.17/docs/api/ng/service

ng-learn.org/2014/03/AngularJS-2-Status-Preview/

tylermcginnis.com/angularjs-factory-vs-service-vs-provider/

docs.angularjs.org/guide/bootstrap

sitepoint.com/understanding-angulars-apply-digest/

mattkruse.com/angular/

TheEND