Presentation used for the opening note at the HasGeek Metarefresh AngularJS miniconf in Bangalore in Feb 2014. What are the the major features of AngularJS, benefits and how it developed!
3. I am
•
Xoogler - Feedback &
AngularJS team
•
MBA, ISB Hyderabad
•
Author, AngularJS, O’Reilly
•
Director, Fundoo Solutions
•
Part time AngularJS
Trainer
•
Coder / Geek
4. History
•
Started when JS was sexy, but hard to manage
•
Google Feedback, in GWT Hell
•
Every framework / language had some good things
•
Flex with Data binding (one-way, though)
•
Ruby routes
•
Java with Dependency Injection & Testability
5. “Hey, I built a framework to learn Javascript in
my free time. We should totally use it.”
–Misko Hevery, Founder of AngularJS
6. So what is
Open Source,
Open Source,
Javascript
Javascript
Extension
Extension
friendly
friendly
Declarative,
Declarative,
MVVW
MVVW
Extends
Extends
HTML
HTML
Great
Great
Community
Community
To Create
To Create
Amazing Web
Amazing Web
Apps
Apps
7. The promised land?
THE PROMISE
THE RESULT
REDUCED LINES OF CODE
From 20,000 to 1500!!
FASTER DEVELOPMENT
6 months, GWT = 3 weeks,
AngularJS Increased Velocity!!
TESTABLE, MAINTAINABLE JS
Dependency Injection & S uper
Fast Unit Testing
EASIER TEMPLATING & STYLING
Templates pure HTML, CS S &
Designer friendly
INTEGRATE WITH OTHER
LIBRARIES
Directives! Extend HTML and
teach it new tricks!
8.
9. Advantages - Developer
HTML + JS
HTML + JS
Data Binding
Data Binding
Dependency Injection
Dependency Injection
Custom Components
Custom Components
Super Easy Testing
Super Easy Testing
Amazing Community!
Amazing Community!
10. The Result?
Drastically Less Lines
Drastically Less Lines
of Code
of Code
Focus on your core,
Focus on your core,
not the crap
not the crap
More maintainable,
More maintainable,
extensible
extensible
Component friendly
Component friendly
Well Tested, Robust
Well Tested, Robust
Designer Friendly
Designer Friendly
11. Requirements?
•
The same requirements that jQuery has
•
A Server!! (Sometimes…)
•
Works well with Java, as well as with Ruby, Python, etc.
•
•
•
Really independent of the Server
Needs a way of fetching and storing Data (XHR, Sockets…)
Easier if it talks JSON
But not required
• Can transform requests and responses
• No JSON? No problem!
•
14. Future Plans
•
A Revamped Change Detection Algorithm
•
Web Components Interop
•
A Better Data Persistence story
•
Awesomer Dependency Injection
•
Nicer Logging
•
And a whole lot more
15. What have I worked with
AngularJS on?
Prototyping
Prototyping
EPG Application
EPG Application
Mail Application
Mail Application
Wedding & Photography
Wedding & Photography
E-Commerce, Analytics
E-Commerce, Analytics
& more
& more
16. Thinking the AngularJS way!
or how to get the most out of AngularJS
or how to get the most out of AngularJS
17. “There are many steps to AngularJS Nirvana.
Here are some to make sure you get there!”
–Me!!
18. 1. Model is the Truth!
Model comes from the server
Model comes from the server
Controller manipulates it
Controller manipulates it
View displays it
View displays it
Need to update the view?
Need to update the view?
Update the
Update the
model!!
model!!
19. Tabs in jQuery
<ul class="tabs">
<li class="tab1 selected">Tab 1</li>
<li class="tab2">Tab 2</li>
</ul>
<div class="tab1">Content for Tab 1</div>
<div class="tab2">Content for Tab 2</div>
Plus
•Tab highlighting logic
•Tab content logic
•Not declarative!!
21. Tabs in AngularJS
Or even better, do this:
<tabs>
<tab title=“My First Tab”>Tab 1 content here</tab>
<tab title=“My Second Tab”>Tab 2 content
here</tab>
</tabs>
22. 2. Leverage Data-binding
Why do
this?
<form id="my-form”>
<input type="text" id="nameField”>
<input type="email" id="emailField”>
<button>Submit</button>
</form>
function setFormValues(userDetails) {
$('#nameField').value(userDetails.name);
$('#emailField').value(userDetails.email);
}
// GETTING ALSO…
When you can do
this?
<form id="my-form”>
<input type="text"
id="nameField”
ng-model="user.name”>
<input type="email"
id="emailField”
ng-model="user.email”>
<button>Submit</button>
</form>
$scope.user
23. 3. DOM Manipulation —>
Directives
Don’t do this
in your
controller
$('#inputDate').datepicker();
$('#inputDate')
.datepicker('getDate');
$('#inputDate')
.datepicker('setDate’,
'05/23/1975');
Instead, create a
directive
<input type="text”
jqui-datepicker
ng-model="startDate”
date-format=
"DD/mm/YYYY”
on-select=
”dateSelected(date)”>
25. 5.) Separate Biz. Logic vs
Presentation logic
Prez. Logic —>
Controllers
Biz. Logic —>
Services
•
•
•
•
•
•
how should I fetch data from the server?
how do I delete an email?
should I allow this action to take place?
how should data be cached?
should data be returned from my local
cache or the server?
is this data valid?
•
•
•
•
making the right service calls to fetch
data needed for the view
responding to user actions (such as
clicks, selections, etc.)
modifying the Model (through the
scope) to correctly display elements
putting the data in the right place for the
view to render itself
27. Do you need Fundoo?
Starting out?
Starting out?
Hands-on AngularjS
Hands-on AngularjS
Workshops
Workshops
Need a team?
Need a team?
Development
Development
Consulting
Consulting
Stuck? Need
Stuck? Need
Advice?
Advice?
Expert Consulting
Expert Consulting
