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
jmeiss@octo.com
22
© OCTO 2012