An intro to Angular.js lib

2. AngularJS is super cool.
By Max.

3. AngularJS is MVW.
Which is:
• Model
• View
• WTF? — Whatever

4. Source: https://plus.google.com/+AngularJS/posts/aZNVhj355G2
Igor Minar
Whatever?
— I'd rather see developers build kick-ass apps that are well-designed
and follow separation of concerns, than see them waste time arguing about
MV* nonsense. And for this reason, I hereby declare AngularJS to be MVW
framework — Model-View-Whatever. Where Whatever stands for
“whatever works for you”.
“

5. Core concepts

6. Core concepts
Template HTML and ...
Directive ... a few new attributes*.
* With a powerful backend.
Model Just data, nothing more.
Scope A context where the model is used.
The center of the Angular Universe.
Expressions Access to data and functions in the scope.
...
6

7. Core concepts
...
Filter Formatting and filtering.
Controller Business logic, related to View layer.
Service Reusable business logic, not related with View layer.
Module Container for all this stuff.
Find out more in the Conceptual Overview.
7

8. Two-way binding

9. ... in Classical Template Systems ... in Angular Templates
Data Binding ...
9

10. Two-way binding example
Enter something:
You've entered:
<div data-ng-app>
<label>Enter something:</label>
<input type="text" data-ng-model="something" />
<p>You've entered: <strong>{{ something }}</strong></p>
</div>
— No JavaScript. At all.
(supper-dummy)
01.
02.
03.
04.
05.
10

12. Add contact:
add
All contacts:
[]
Filter by: Filtered:
Two-way binding example
(pro)
(still so dummy)
12

13. Add contact:
add
All contacts:
[]
Two-way binding example
<div data-ng-controller="example2Controller">
<div>
<label>Add contact:<br>
<input type="text" data-ng-model="newContact" />
</label>
<button data-ng-click="addContact(newContact)">add</button>
<div data-ng-show="displayHelp">
<small>Format is wrong</small>
</div>
</div>
<div>
All contacts:<br><small>{{ contacts | json }}</small>
</div>
<!-- ... -->
</div>
(pro)
(still so dummy)
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
13

14. Add contact:
add
All contacts:
[]
Two-way binding example
angular.module("angulardemo")
.controller("example2Controller", function($scope) {
$scope.contacts = [];
$scope.addContact = function(newContact) {
var contact = parseContact(newContact);
if (!contact) {
$scope.displayHelp = true;
return;
}
$scope.contacts.push(contact);
$scope.newContact = "";
$scope.displayHelp = false;
};
// ...
});
(pro)
(still so dummy)
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
14

15. Add contact:
add
All contacts:
[]
Two-way binding example
angular.module("angulardemo")
.controller("example2Controller", function($scope) {
// ...
$scope.$watch("newContact", function(newValue, oldValue) {
if (!newValue.length) {
$scope.displayHelp = false;
}
});
});
(pro)
(still so dummy)
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
15

16. Add contact:
add
Filter by: Filtered:
Two-way binding example
<input type="text" data-ng-model="query" />
<!-- ... -->
<ul><li data-ng-repeat="contact in contacts | filter:query">
<small>{{ contact | contactInfo }}</small>
</li></ul>
angular.module("angulardemo")
.controller("example2Controller", function($scope) {/* ... */});
.filter("contactInfo", function() {
return function(input) {
var name = input.firstName && input.lastName
? input.firstName + " " + input.lastName : null;
return input.email
? (name ? name + " <" + input.email + ">" : input.email) : name;
}
});
(pro)
(still so dummy)
01.
02.
03.
04.
05.
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
16

17. Dependency injection

18. UAH: USD: 0.00 EUR: 0.00 GBP: 0.00
Dependency injection example
<div>UAH: <input type="text" data-ng-model="amount" /></div>
<div>USD: {{ convert(amount, "UAH", "USD") | number:2 }}</div>
<div>EUR: {{ convert(amount, "UAH", "EUR") | number:2 }}</div>
<div>GBP: {{ convert(amount, "UAH", "GBP") | number:2 }}</div>
angular.module("angulardemo")
.controller("example3Controller", function($scope, ExchangeRateDummy) {
$scope.convert = function(amount, from, to) {
var rate = ExchangeRateDummy.getRate(from, to);
return (parseFloat(amount) || 0) * (rate.rate || 0);
}
});
(dummy)
01.
02.
03.
04.
01.
02.
03.
04.
05.
06.
07.
18

19. UAH: USD: 0.00 EUR: 0.00 GBP: 0.00
Dependency injection example
angular.module("angulardemo")
.factory("ExchangeRateDummy", function() {
var rates = {
"UAHUSD": { from: "UAH", to: "USD", rate: 0.06 },
"UAHEUR": { from: "UAH", to: "EUR", rate: 0.05 },
"UAHGBP": { from: "UAH", to: "GBP", rate: 0.04 }
};
return {
getRate: function(from, to) {
return (from + to in rates) ? rates[from + to] : {};
}
}
});
(dummy)
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
19

20. USD: AUD: 0.00 EUR: 0.00 GBP: 0.00
Dependency injection example
<div>USD: <input type="text" data-ng-model="amount" /></div>
<div>AUD: {{ converted.AUD | number:2 }}</div>
<div>EUR: {{ converted.EUR | number:2 }}</div>
<div>GBP: {{ converted.GBP | number:2 }}</div>
(pro)
01.
02.
03.
04.
20

21. USD: AUD: 0.00 EUR: 0.00 GBP: 0.00
Dependency injection example
angular.module("angulardemo")
.controller("example4Controller", function($scope, ExchangeRate) {
$scope.converted = {"AUD": 0, "EUR": 0, "GBP": 0};
$scope.$watch("amount", function(amount) {
angular.forEach($scope.converted, function(convertedValue, currency) {
ExchangeRate.getRate("USD", currency).then(function(rate) {
$scope.converted[currency] = (parseFloat(amount) || 0) * (rate || 0);
});
});
});
})
.factory("ExchangeRate", ["$http", function($http) {
var apiUrl = "http://apilayer.net/api/live?access_key=XXX";
return {
getRate: function(from, to) {
var requestUrl = apiUrl + "&source=" + from + "&currencies=" + to
+ "&callback=JSON_CALLBACK";
return $http.jsonp(requestUrl, {cache: true}).then(function(response) {
return response.data.quotes[from + to];
});
}
}
}]);
(pro)
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
21

23. Directives
in a real-life project

24. Cache manager directive
<!-- app/templates/index.html -->
<footer class="container-fluid">
...
<div data-cache-manager></div>
...
</footer>
01.
02.
03.
04.
05.
06.
24

25. Cache manager directive
// app/js/modules/agile/directives/cache_manager.js
angular.module("agile.directives")
.directive("cacheManager",
function($templateCache, Storage, Helper, TEMPLATES_URL) {
return {
scope: {},
controller: function ($scope) {
$scope.clear = function() {
$templateCache.removeAll();
Storage.clearAll();
Helper.setAlert("success", "Cache has been cleared.")
}
},
templateUrl: TEMPLATES_URL + "/cache-manager.directive.html"
};
});
<!-- app/templates/cache-manager.directive.html -->
<div class="cache-manager pull-right">
<button type="button" data-ng-click="clear()">Clear Cache</button>
</div>
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
01.
02.
03.
04.
25

26. Enough code
Just a few more things
in a conclusion.

27. Angular Projects
• https://builtwith.angularjs.org/
• https://github.com/angular/angular.js/wiki/Projects-using-AngularJS

28. Angular Projects
• Kontaktkarte — Contact book
• Hatjitsu — Distributed online scrum planning poker
• Semantic Body Browser — A tool for graphically exploring an organism
• Drugsearch — Android app for searching drugs in dragstores
• Mapa de personajes de la serie Isabel — The characters map in the
“Isabel” series; ♥

29. Angular is for:
• Web apps (single-page apps, mobile apps, browser extensions, etc.)
• Interactive websites (social networks, content management, admin
panels)
• Interactive pages (checkout, statistics, graphics, reports, etc.)
• Fun

30. • Blogs
• News
• Affiliates
• Corporate websites
• E-Commerce
• Wikis
Angular is not for:
Of course it's not a rule.