AngularJS
A radically different way of
building Single Page Apps
by Jivko Petiov
Agenda
• Demo - Hello World
• What is Angular
• Demo - How a real-world app is made
• Conclusion – why and when to use it
Demo - Hello World
What is Angular
• What is a SPA (Gmail, Github, Hotmail, Trello, Facebook)
• JavaScript Framework for building SPA apps
• “Angular is what HTML should have been, if it has been
specifically designed for AJAX apps”
JavaScript Frameworks
•
•
•
•
•
•
•
•
•
Backbone.js
Ember.js
KnockoutJS
AngularJS
Dojo
YUI
Agility.js
Knockback.js
CanJS
•
•
•
•
•
•
•
•
•
SproutCore
Polymer
Cujo.js
dermis
Spine.js
Ext.js
Sammy.js
JavascriptMVC
Epitome
•
•
•
•
•
•
•
•
•
Kendo UI
PureMVC
Olives
PlastronJS
Dijon
rAppid.js
Batman.js
React
Exoskeleton
Architectural Patterns
•
•
•
•
•
•
MVC
MVP
MVVM
MVA (Model View Adapter)
PAC (Presentation Abstraction Control)
HMVC (Hierarchical Model-View-Controller)
Why so Complicated
Angular Pattern?
MVW
Angular Pattern?
Model View Whatever
MV*
Angular Architecture
Demo Time
Pray to the Demo Gods
Views
• Views = HTML
• Directives are reusable components within the View; They
are similar to jQuery Plugins, but much more than that
• Declarative DSL – controversial and yet powerful
Directive Examples
<rating max="5" model=“data.rating" />
<tabs>
<tab title="Tab 1">…</tab>
<tab title="Tab 2">…</tab>
</tabs>
<span tooltip="{{model.text}}">…</span>
jQuery vs Angular
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">...</div>
<div id="tabs-2">...</div>
<div id="tabs-3">...</div>
</div>
$( "#tabs" ).tabs();
<tabs>
<tab title="Tab 1">…</tab>
<tab title="Tab 2">…</tab>
<tab title="Tab 3">…</tab>
</tabs>
Controllers
• No Reference to DOM / Views
• The “code-behind” of the view
o What should happen if user does X
o Where do I get X from
Controller Example
app.controller("myController", function($scope, backendService) {
$scope.people = [
{ name: “Person 1”, city: “Sofia” },
{ name: “Person 2”, city: “Moscow” },
{ name: “Person 3”, city: “New York” }
];
$scope.addPerson = function(person) {
backendService.addPerson(person);
};
}
Models and Scope
• Model = data = JSON
• Scope is container for model, one scope per controller
• $scope.people = [
{ name: “Person 1”, city: “Sofia” },
{ name: “Person 2”, city: “Moscow” },
{ name: “Person 3”, city: “New York” }
]
Services
• Usually no reference to DOM
• Singletons, SRP, Dependency Injection
• How do I do X?
• Server communication, business logic, helpers, modal
dialogs, error handling, sharing data between controllers
Service Example
app.factory('myService', function($http, $q) {
return {
getAllItems: function() {
var deferred = $q.defer();
$http.get(“/api/getItems").success(function(data) {
deferred.resolve(data);
}).error(function(){
deferred.reject(“Error Message");
});
return deferred.promise;
}}}
Service Example (continued)
app.controller("myController", function($scope, myService) {
myService.getAllItems().then(function(data) {
$scope.items = data;
});
}
app.controller("myController2", function($scope, myService) {
$scope.items = myService.getAllItems();
}
Filters
• Simple formatters of data
•
•
•
•
•
currency
date
filter
json
limitTo
•
•
•
•
lowercase
number
orderBy
uppercase
Filter Example
myApp.filter('capitalize', function() {
return function(input, scope) {
return input.substring(0,1).toUpperCase() +
input.substring(1);
}
});
<div>{{person.Name | capitalize }}</div>
Conclusion
• SPA, Data-driven apps, CRUD
• The role of the server-side – HTML vs JSON:
o Don’t send HTML if you end up parsing it client-side to do
some calculations over it
o Don’t send JSON if all you do with it is just put it inside the
DOM
QA?
jivko@abilitics.com
@jivkopetiov
Thanks to our Sponsors:
Diamond Sponsor:
Gold Sponsors:
Silver Sponsors:
Technological Partners:
Bronze Partners:
Swag Sponsors:
Media Partners: