octo bof - how to build netvibes with angularjs
TRANSCRIPT
1
© OCTO 2012 © OCTO 2012
How to build Netvibes with AngularJS?
2
© OCTO 2012
“AngularJS is what HTML would have been had it been designed
for web applications.”
Miško Hevery
AngularJS creator, Google
3
© OCTO 2012
AngularJS WTF?
I Wanna See Your Netvibes!
Experience Feedback
My View Point
Key Features
Questions
4
© OCTO 2012
AngularJS is an open-source MVC JavaScript framework, which simplifies web development.
HOW:• Two Way Data-binding• MVC• Testable • Supports all major browsers
AngularJS WTF?
5
© OCTO 2012
Key Features
I Wanna See Your Netvibes!
Experience Feedback
My View Point
AngularJS WTF?
Questions
6
© OCTO 2012
Key Features
Views andTemplates
Filters
Two-way DataBinding
REST andCustomServices
Routing &MultipleViews
Directives
Testable
7
© OCTO 2012
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/
8
© OCTO 2012
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.
9
© OCTO 2012
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/
10
© OCTO 2012
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/
11
© OCTO 2012
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/
12
© OCTO 2012
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/
13
© OCTO 2012
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/
14
© OCTO 2012
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
15
© OCTO 2012
I Wanna See Your Netvibes!
Experience Feedback
AngularJS WTF?
My View Point
Key Features
Questions
16
© OCTO 2012
My View Point
FEATURES OUT OF THE BOXTwo-Way Data-Binding
Localization (date, currency, number, pluralization)
Deep linking
Form validation
Lightweight
Works on mobile (ex: goodfil.ms)
DEVELOPER FRIENDLYDocumentation
Testable (Jasmine)
Reusable components
Chrome extension to debug
Google Group very active
NICE ARCHITECTUREMVC
Everything is asynchronous
Can also be used on a part of an existing application
Client side
NEGATIVE POINTSTemplates syntaxe (new HTML attributes)
Think different (actions handle in views)
Learning curve is somewhat steep
17
© OCTO 2012
Experience Feedback
AngularJS WTF?
I wanna see your Netvibes!
Key Features
My View Point
Questions
18
© OCTO 2012
Exemple de slide imageDemo time!
19
© OCTO 2012
I Wanna See Your Netvibes!
AngularJS WTF?
Experience Feedback
Key Features
My View Point
Questions
20
© OCTO 2012
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
21
© OCTO 2012
AngularJS WTF?
Key Features
My View Point
Questions
I Wanna See Your Netvibes!
Experience Feedback
