OCTO BOF - How to build Netvibes with AngularJS
Download as PPTX, PDF6 likes2,464 views
AngularJS is an open-source MVC JavaScript framework that simplifies web development. It uses two-way data binding, MVC architecture, directives, filters, routing and custom services to build single page applications. Key features include views and templates, testability, and support for RESTful APIs. While it has a learning curve, developers appreciate its architecture and ability to build reusable, testable components.
Ad
More Related Content
What's hot (20)
Viewers also liked (6)
Ad
Similar to OCTO BOF - How to build Netvibes with AngularJS (20)
Ad
OCTO BOF - How to build Netvibes with AngularJS
- 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, Google 2 © OCTO 2012
- 3. AngularJS WTF? Key Features My View Point I Wanna See Your Netvibes! Experience Feedback Questions 3 © 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 browsers 4 © OCTO 2012
- 5. AngularJS WTF? Key Features My View Point I Wanna See Your Netvibes! Experience Feedback Questions 5 © OCTO 2012
- 6. Key Features Views and Templates Two-way Data Directives Binding Testable Routing & Multiple Filters Views REST and Custom Services 6 © 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: http://jsfiddle.net/eR2b2/4/ 7 © 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: http://jsfiddle.net/eR2b2/5/ 9 © 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: http://jsfiddle.net/eR2b2/7/ 10 © 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: http://jsfiddle.net/eR2b2/8/ 11 © 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: http://jsfiddle.net/eR2b2/12/ 12 © 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: http://jsfiddle.net/eR2b2/15/ 13 © 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 testing 14 © OCTO 2012
- 15. AngularJS WTF? Key Features My View Point I Wanna See Your Netvibes! Experience Feedback Questions 15 © 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: goodfil.ms) 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 active 16 © OCTO 2012
- 17. AngularJS WTF? Key Features My View Point I wanna see your Netvibes! Experience Feedback Questions 17 © OCTO 2012
- 18. Exemple de slide image 18 © OCTO 2012
- 19. AngularJS WTF? Key Features My View Point I Wanna See Your Netvibes! Experience Feedback Questions 19 © OCTO 2012
- 20. Experience Feedback « If I've 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 POC 20 © OCTO 2012
- 21. AngularJS WTF? Key Features My View Point I Wanna See Your Netvibes! Experience Feedback Questions 21 © OCTO 2012
- 22. Questions? Jonathan Meiss @JohnMeiss [email protected] 22 © OCTO 2012