AGENDA

Que é AngularJS?

Core Concepts Templates

Application Structure  

Que é AngularJS?  AngularJS é um framework JavaScript  open-­‐source  

que  auxilia  na  execução  de  single-­‐page  applica8ons.  

construído sob a ideologia de  que  programação  declara8va  deve  ser  usada  para  construção  de  Interfaces  de  Usuário  e  componentes  de  so?ware,  enquanto  que  a  programação  impera8va  é  excelente  para  escrever  as  regras  de  negócio  

foi originalmente desenvolvido em 2009 por  Miško  Hevery  e  Adam  Abrons  como  um  so?ware  por  trás  de  um  serviço  de  armazenamento  JSON  online  

Cases da google  

17000  

1500  

Before  6  Months  /  3  developers   With  Angular  3  weeks  

LOC  

Cases da google  

hXp://builtwith.angularjs.org/  

Core Concepts

hXp://builtwith.angularjs.org/  

•  TEMPLATES

Data binding Expressions

Directives Filters

Core Concepts

•  TEMPLATES Data binding Expressions Directives Filters

Core Concepts

•  TEMPLATES Data binding Expressions Directives Filters

hXp://plnkr.co/edit/ngdoc:example-­‐example92@snapshot?p=preview    

Angular  expressions  are  JavaScript-­‐like  code  snippets  that  are  usually  placed  in  bindings  such  as  {{  expression  }}.    For  example,  these  are  valid  expressions  in  Angular:    1+2  a+b  user.name  items[index]  

Core Concepts

•  TEMPLATES Data binding Expressions Directives Filters

hXp://plnkr.co/edit/ngdoc:example-­‐guide-­‐concepts-­‐1@snapshot?p=preview      

Core Concepts

•  TEMPLATES Data binding Expressions Directives Filters

hXp://angular.github.io/angular-­‐phonecat/step-­‐3/app/    

Core Concepts

•  Application structure

DI Scope $resource

Core Concepts •  Application structure

Core Concepts

•  Application structure

DI Scope $resource

Scopes can watch expressions and propagate events.

hXp://docs.angularjs.org/guide/scope    

Core Concepts

•  scope

Core Concepts

•  $Resource

A factory which creates a resource object that lets you interact with RESTful server-side data sources.

Core Concepts

•  $Resource

Core Concepts

•  $Resource

MORE Other AngularJS Features •  Anima8on:  Core  concepts,  ngAnimate  API,  and  Anima8on  in  AngularJS  1.2    •  Security:  Strict  Contextual  Escaping,  Content  Security  Policy,  $sani8ze,  video\    •  Interna8onaliza8on  and  Localiza8on:  Angular  Guide  to  i18n  and  l10n,  date  filter,  

currency  filter,  Crea8ng  mul8lingual  support    •  Mobile:  Touch  events   Testing Unit  tes8ng:  Using  Karma  (video),  Unit  tes8ng,  Tes8ng  services,  Karma  in  Webstorm  Scenario  tes8ng:  Protractor  

hXp://karma-­‐runner.github.io/0.12/index.html