SlideShare a Scribd company logo
1 of 86
Download to read offline
O poderoso
AngularJS
Beto
MUNIZ
Paulo
PIRES
@obetomuniz
@paulo_hp
Agenda
O 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 here
Angular 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/
The
END

More Related Content

What's hot

What's hot (20)

Material Design simples e rapido com AngularJS
Material Design simples e rapido com AngularJSMaterial Design simples e rapido com AngularJS
Material Design simples e rapido com AngularJS
 
Angular js
Angular jsAngular js
Angular js
 
AngularJS com NODE.JS e Socket.IO
AngularJS com NODE.JS e Socket.IOAngularJS com NODE.JS e Socket.IO
AngularJS com NODE.JS e Socket.IO
 
Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Desenvolvimento de Aplicações Web AngularJS no Contexto da IoTDesenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT
 
Construindo Diretivas com AngularJS
Construindo Diretivas com AngularJSConstruindo Diretivas com AngularJS
Construindo Diretivas com AngularJS
 
Android Libs - AndroidDevConf
Android Libs - AndroidDevConfAndroid Libs - AndroidDevConf
Android Libs - AndroidDevConf
 
Apresentação AngularJS - Angular UI
Apresentação AngularJS - Angular UIApresentação AngularJS - Angular UI
Apresentação AngularJS - Angular UI
 
Introdução ao AngularJS!
Introdução ao AngularJS!Introdução ao AngularJS!
Introdução ao AngularJS!
 
AngularJS - Just Digital
AngularJS - Just DigitalAngularJS - Just Digital
AngularJS - Just Digital
 
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
 
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDAANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
 
Vue.js
Vue.jsVue.js
Vue.js
 
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
 
React - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UIReact - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UI
 
Performance com AngularJS
Performance com AngularJSPerformance com AngularJS
Performance com AngularJS
 
Otimizacao Front-End para WordPress - OlhoSEO 2013
Otimizacao Front-End para WordPress - OlhoSEO 2013Otimizacao Front-End para WordPress - OlhoSEO 2013
Otimizacao Front-End para WordPress - OlhoSEO 2013
 
Visão Geral sobre Angular JS
Visão Geral sobre Angular JSVisão Geral sobre Angular JS
Visão Geral sobre Angular JS
 
React - Introdução
React - IntroduçãoReact - Introdução
React - Introdução
 
Domain-Driven Design
Domain-Driven DesignDomain-Driven Design
Domain-Driven Design
 
O futuro dos WebApps com AngularJS 2.0
O futuro dos WebApps com AngularJS 2.0O futuro dos WebApps com AngularJS 2.0
O futuro dos WebApps com AngularJS 2.0
 

Viewers also liked

Viewers also liked (20)

Dark Java (2009)
Dark Java (2009)Dark Java (2009)
Dark Java (2009)
 
J530 9 jms
J530 9 jmsJ530 9 jms
J530 9 jms
 
Novas APIs do Java EE 7: JMS e Web Services
Novas APIs do Java EE 7: JMS e Web ServicesNovas APIs do Java EE 7: JMS e Web Services
Novas APIs do Java EE 7: JMS e Web Services
 
Minicurso JSON & Ajax
Minicurso JSON & AjaxMinicurso JSON & Ajax
Minicurso JSON & Ajax
 
Gráficos Vetoriais na Web com SVG
Gráficos Vetoriais na Web com SVGGráficos Vetoriais na Web com SVG
Gráficos Vetoriais na Web com SVG
 
Curso AngularJS - 2. conceptos básicos
Curso AngularJS - 2. conceptos básicosCurso AngularJS - 2. conceptos básicos
Curso AngularJS - 2. conceptos básicos
 
Curso AngularJS - 3. módulos y controladores
Curso AngularJS - 3. módulos y controladoresCurso AngularJS - 3. módulos y controladores
Curso AngularJS - 3. módulos y controladores
 
Iniciando com jQuery
Iniciando com jQueryIniciando com jQuery
Iniciando com jQuery
 
Curso AngularJS - 1. introducción
Curso AngularJS - 1. introducciónCurso AngularJS - 1. introducción
Curso AngularJS - 1. introducción
 
Curso AngularJS - 7. temas avanzados
Curso AngularJS - 7. temas avanzadosCurso AngularJS - 7. temas avanzados
Curso AngularJS - 7. temas avanzados
 
Tutorial AngularJS - episódio 5 - diretivas
Tutorial AngularJS - episódio 5 -  diretivasTutorial AngularJS - episódio 5 -  diretivas
Tutorial AngularJS - episódio 5 - diretivas
 
JavaScript - Date
JavaScript - DateJavaScript - Date
JavaScript - Date
 
AngularJS - 10 passos para aprender a criar suas directivas
AngularJS - 10 passos para aprender a criar suas directivasAngularJS - 10 passos para aprender a criar suas directivas
AngularJS - 10 passos para aprender a criar suas directivas
 
Angular js
Angular jsAngular js
Angular js
 
Aplicando filtros com AngularJS
Aplicando filtros com AngularJSAplicando filtros com AngularJS
Aplicando filtros com AngularJS
 
Criando Filtros com AngularJS
Criando Filtros com AngularJSCriando Filtros com AngularJS
Criando Filtros com AngularJS
 
Scope AngularJS
Scope AngularJSScope AngularJS
Scope AngularJS
 
Automação de Testes com AngularJS
Automação de Testes com AngularJSAutomação de Testes com AngularJS
Automação de Testes com AngularJS
 
HTTP Interceptors com AngularJS
HTTP Interceptors com AngularJSHTTP Interceptors com AngularJS
HTTP Interceptors com AngularJS
 
JavaScript - Expressões Regulares
JavaScript - Expressões RegularesJavaScript - Expressões Regulares
JavaScript - Expressões Regulares
 

Similar to O Poderoso AngularJS

HTML5, CSS3 e o futuro da web
HTML5, CSS3 e o futuro da webHTML5, CSS3 e o futuro da web
HTML5, CSS3 e o futuro da web
Diego Pessoa
 

Similar to O Poderoso AngularJS (20)

Tornando as coisas mais simples com Azure Functions e Node.JS
Tornando as coisas mais simples com Azure Functions e Node.JSTornando as coisas mais simples com Azure Functions e Node.JS
Tornando as coisas mais simples com Azure Functions e Node.JS
 
GDG ABC Meetup #5 - Tendências 2015
GDG ABC Meetup #5 - Tendências 2015GDG ABC Meetup #5 - Tendências 2015
GDG ABC Meetup #5 - Tendências 2015
 
Angular js
Angular jsAngular js
Angular js
 
IoTizando com JavaScript
IoTizando com JavaScriptIoTizando com JavaScript
IoTizando com JavaScript
 
2° Codelab - Por onde começar com AngularJS
2° Codelab  - Por onde começar com AngularJS2° Codelab  - Por onde começar com AngularJS
2° Codelab - Por onde começar com AngularJS
 
Novidades do AngularJS 2.0
Novidades do AngularJS 2.0Novidades do AngularJS 2.0
Novidades do AngularJS 2.0
 
Introdução ao AngularJS
Introdução ao AngularJSIntrodução ao AngularJS
Introdução ao AngularJS
 
ASP.NET MVC
ASP.NET MVCASP.NET MVC
ASP.NET MVC
 
Workshop - Ionic + firebase
Workshop - Ionic + firebaseWorkshop - Ionic + firebase
Workshop - Ionic + firebase
 
Node.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançadoNode.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançado
 
Spa com angular js flisol 2015 - aquidauana ms
Spa com angular js   flisol 2015 - aquidauana msSpa com angular js   flisol 2015 - aquidauana ms
Spa com angular js flisol 2015 - aquidauana ms
 
Desenvolvedor mobile precisa aprender Web
Desenvolvedor mobile precisa aprender Web Desenvolvedor mobile precisa aprender Web
Desenvolvedor mobile precisa aprender Web
 
Angular 2, TypeScript e Além
Angular 2, TypeScript e AlémAngular 2, TypeScript e Além
Angular 2, TypeScript e Além
 
Angular js 4php
Angular js   4phpAngular js   4php
Angular js 4php
 
Desmistificando o desenvolvimento de mobile híbrido
Desmistificando o desenvolvimento de mobile híbridoDesmistificando o desenvolvimento de mobile híbrido
Desmistificando o desenvolvimento de mobile híbrido
 
TDC2016SP - TypeScript em aplicações modernas
TDC2016SP - TypeScript em aplicações modernasTDC2016SP - TypeScript em aplicações modernas
TDC2016SP - TypeScript em aplicações modernas
 
TDC 2014 - Arquitetura front-end com AngularJS
TDC 2014 - Arquitetura front-end com AngularJSTDC 2014 - Arquitetura front-end com AngularJS
TDC 2014 - Arquitetura front-end com AngularJS
 
HTML5, CSS3 e o futuro da web
HTML5, CSS3 e o futuro da webHTML5, CSS3 e o futuro da web
HTML5, CSS3 e o futuro da web
 
Estendendo o html com angular js
Estendendo o html com angular jsEstendendo o html com angular js
Estendendo o html com angular js
 
Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_
 

More from Beto Muniz

More from Beto Muniz (16)

Blockchain com JavaScript
Blockchain com JavaScriptBlockchain com JavaScript
Blockchain com JavaScript
 
"Comunidade não dá dinheiro"
"Comunidade não dá dinheiro""Comunidade não dá dinheiro"
"Comunidade não dá dinheiro"
 
Web Underground
Web UndergroundWeb Underground
Web Underground
 
Progressive Web Apps in Depth
Progressive Web Apps in DepthProgressive Web Apps in Depth
Progressive Web Apps in Depth
 
Remote Work! Less Stress, More Productivity.
Remote Work! Less Stress, More Productivity.Remote Work! Less Stress, More Productivity.
Remote Work! Less Stress, More Productivity.
 
Tecnologia e Empreendedorismo. A fórmula de sobrevivência de qualquer ideia.
Tecnologia e Empreendedorismo. A fórmula de sobrevivência de qualquer ideia.Tecnologia e Empreendedorismo. A fórmula de sobrevivência de qualquer ideia.
Tecnologia e Empreendedorismo. A fórmula de sobrevivência de qualquer ideia.
 
Comunidade. Abuse e use dela com moderação e inteligência.
Comunidade. Abuse e use dela com moderação e inteligência.Comunidade. Abuse e use dela com moderação e inteligência.
Comunidade. Abuse e use dela com moderação e inteligência.
 
Polymer Elements: Tudo que você precisa saber para criar a web
Polymer Elements: Tudo que você precisa saber para criar a webPolymer Elements: Tudo que você precisa saber para criar a web
Polymer Elements: Tudo que você precisa saber para criar a web
 
WebApps com Web Components
WebApps com Web ComponentsWebApps com Web Components
WebApps com Web Components
 
Desmistificando o Polymer
Desmistificando o PolymerDesmistificando o Polymer
Desmistificando o Polymer
 
Martini. O Um framework web para Go
Martini. O Um framework web para GoMartini. O Um framework web para Go
Martini. O Um framework web para Go
 
SASS e Compass, O CSS Ninja Workflow
SASS e Compass, O CSS Ninja WorkflowSASS e Compass, O CSS Ninja Workflow
SASS e Compass, O CSS Ninja Workflow
 
Web Components, A próxima revolução do desenvolvimento web.
Web Components, A próxima revolução do desenvolvimento web.Web Components, A próxima revolução do desenvolvimento web.
Web Components, A próxima revolução do desenvolvimento web.
 
Ampliando suas fronteiras com Node-Webkit
Ampliando suas fronteiras com Node-WebkitAmpliando suas fronteiras com Node-Webkit
Ampliando suas fronteiras com Node-Webkit
 
Construindo um Servidor Web com GO
Construindo um Servidor Web com GOConstruindo um Servidor Web com GO
Construindo um Servidor Web com GO
 
Express 4
Express 4Express 4
Express 4
 

O Poderoso AngularJS