Your SlideShare is downloading. ×
OCTO BOF - How to build Netvibes with AngularJS
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

OCTO BOF - How to build Netvibes with AngularJS


Published on

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. How to build Netvibes with AngularJS?1© OCTO 2012
  • 2. “AngularJS is what HTML would have been had it been designed for web applications.” Miško Hevery AngularJS creator, Google2© OCTO 2012
  • 3. AngularJS WTF? Key Features My View Point I Wanna See Your Netvibes! Experience Feedback Questions3© OCTO 2012
  • 4. AngularJS WTF? AngularJS is an open-source MVC JavaScript framework, which simplifies web development. HOW: • Two Way Data-binding • MVC • Testable • Supports all major browsers4© OCTO 2012
  • 5. AngularJS WTF? Key Features My View Point I Wanna See Your Netvibes! Experience Feedback Questions5© OCTO 2012
  • 6. Key Features Views and Templates Two-way Data Directives Binding Testable Routing & Multiple Filters Views REST and Custom Services6© OCTO 2012
  • 7. Key Features: View and Templates 4 new HTML attributes (for this exemple): • ng-app used to flag an element which Angular should consider to be the root element of our application • ng-controller used to invoke the corresponding controller • ng-repeat used as a foreach • ng-src similar to src prevents the browser from treating the angular {{ expression }} markup literally, and initiating a request to invalid url Demo:© OCTO 2012
  • 8. Key Features: Two-way Data Binding In Angular, the view is a projection of the model through the HTML template. This means that whenever the model changes, Angular refreshes the appropriate binding points, which updates the view.8© OCTO 2012
  • 9. Key Features: Two-way Data Binding 2 new HTML attributes: • ng-model is directive that tells Angular to do two-way data binding. It works together with input, select, textarea. • {{variable}} a binding. The binding tells Angular that it should evaluate an expression and insert the result into the DOM in place of the binding. Demo:© OCTO 2012
  • 10. Key Features: Filters New tag: • phone in phones|filter:query the filter function uses the query value to create a new array that contains only those records that match the query Demo:© OCTO 2012
  • 11. Key Features: REST and Custom Services New module: • We used the module API to register a custom service using a factory function • The $resource service makes it easy to create a RESTful client • Phones list is now fetched from a WebService via our factory: Phone Demo:© OCTO 2012
  • 12. Key Features: Routing & Multiple Views New module: • $routeProvider is the routing module • If pattern /phones/:phoneId is matched, PhoneDetailCtrl controller is called and result is displayed in phones/show.html view Demo:© OCTO 2012
  • 13. Key Features: Directives New module: • directive can be used to create custom HTML tags, add behavior and manipulate DOM attributes • directive can be generic and used in several projects • directive can be unlinked to an id or a class to have a behaviour undependent from design Demo:© OCTO 2012
  • 14. Key Features: Testable Built for creating testable JavaScript code. HOW: • Dependency Injection • MVC • Angular-seed scaffolds architecture with: • Unit Test • End-to-end user testing14© OCTO 2012
  • 15. AngularJS WTF? Key Features My View Point I Wanna See Your Netvibes! Experience Feedback Questions15© OCTO 2012
  • 16. My View Point FEATURES OUT OF THE BOX NICE ARCHITECTURE Two-Way Data-Binding MVC Localization (date, currency, number, Everything is asynchronous pluralization) Can also be used on a part of an existing Deep linking application Form validation Client side Lightweight Works on mobile (ex: DEVELOPER FRIENDLY NEGATIVE POINTS Documentation Templates syntaxe (new HTML attributes) Testable (Jasmine) Think different (actions handle in views) Reusable components Learning curve is somewhat steep Chrome extension to debug Google Group very active16© OCTO 2012
  • 17. AngularJS WTF? Key Features My View Point I wanna see your Netvibes! Experience Feedback Questions17© OCTO 2012
  • 18. Exemple de slide image18© OCTO 2012
  • 19. AngularJS WTF? Key Features My View Point I Wanna See Your Netvibes! Experience Feedback Questions19© OCTO 2012
  • 20. Experience Feedback « If Ive to do it again, I would not hesitate! » • 1 day to learn with official tutorial • Started developing the next day • Sometimes hard to think different • Spent lot of time looking for best practices • 8 days to get a working application • add 2 days for code I’ve reused from the POC20© OCTO 2012
  • 21. AngularJS WTF? Key Features My View Point I Wanna See Your Netvibes! Experience Feedback Questions21© OCTO 2012
  • 22. Questions? Jonathan Meiss @JohnMeiss jmeiss@octo.com22© OCTO 2012