AngularJS seems initially complex with many new concepts and terms. It is designed for single page applications and has a learning curve. AngularJS uses modules, dependency injection, MVC principles, scopes, directives, filters and services/factories/providers to build applications. Testing and reusable components are important. While challenging, AngularJS is a powerful tool for building dynamic web applications.

1. TechTalk | 3 February 2014
Spyros Ioakeimidis

2. AngularJS
❖
Seemed a bit weird in the beginning
❖
All these new terms and concepts…
!2

3. Modul
es
Depen
dency
Injecti
on
Provid
ws
Vie
ers
Promi
ses
Servic
es
Mo
s
er
ilt
F
els
d
cto
Fa
Contro
ies
r
Direct
ives
llers
!3

4. AngularJS
❖
Made for SPA (Single Page Applications)
❖
It has a learning curve!
❖
Maintained by Google (for some this is good, for
others not)
❖
Community keeps increasing
!4

5. AngularJS
❖
MVC principle
❖
Others say it is an SPA framework
❖
Others that it is just a library to help you built a
framework
❖
AngularJS is a toolset (extensibility)
!5

6. !6

7. Modules
!7

8. Modules
❖
app = angular.module(‘myApp’, [])
❖
❖
It is required when creating a new module
(module declaration)
❖
❖
Use of an array to include other modules
app = angular.module(‘myApp’) retrieves
an existing module (module reference)
Modules cannot be included at runtime
!8

9. Modules
❖
We have a module app
❖
.value()
❖
❖
global values, good for defaults
.constant()
❖
same as Value, but the it is expected to not change
❖
.service()
❖
.factory()
❖
.provider()
!9

10. MVC
(or whatever…)
!10

11. W(M)VC
❖
Whatever (Model)
❖
❖
❖
It is the $scope, which contains models and functions as well
e.g. $scope.event = {‘title’: ‘Placed Event’}
View
❖
❖
HTML markup
Controller
❖
An JS object
❖
app.controller(‘MyController’, function{})
❖
DOM manipulation does not belong to controllers
!11

12. Whatever
(Data)
stored in $scope of
contains
View
(HTML)
communicates with
Controller
(Business Logic)
provides
functionality
Hiller, Christopher. “Developing an AngularJS Edge.”
!12
Directive
(DSL in HTML)
provides functionality
Service
(Library)

13. Scope.models
!13

14. Scope
❖
prototypical inheritance
❖
treat scope as read-only in templates
❖
when binding to templates ng-model=“user.name”, always
use a dot
❖
$rootScope
❖
$scope.$apply()
❖
$eval() -> $exceptionHandler(e) -> $digest()
❖
e.g. when observing DOM elements directly in directives
!14

15. Scope
❖
$scope.$watch(‘foo’, function() {})
❖
observe a model for changes, evaluates by reference
❖
will fire when $scope.foo = ‘’ and then $scope.foo =
‘bar’
❖
but not when $scope.foo.bar = ‘’ and then
$scope.foo.bar = ‘baz’
❖
can evaluate by value (expensive operation!)
❖
when writing own $watch, it must be fast and it must be
idempotent
!15

16. Scope
❖
$scope.$digest()
❖
$scope.$eval()
❖
$scope.{$on, $broadcast, $emit}
!16

17. $emit(‘eventB’, …)
$emit(‘eventC’, …)
Controller A
$emit(‘eventB’, …)
$on(‘eventA’, …)
$rootScope.$on(‘eventC’, …)
$on(‘eventB’, …)
$on(‘eventC’, …)
$broadcast(‘eventA’, …)
Controller B
Controller C
$broadcast(‘eventA’, …)
!17
$emit(‘eventC’, …)
$on(‘eventA’, …)

18. Model
❖
Scope is not the model!
❖
$scope.foo, where the foo is the model
❖
data-binding, <p>{{foo.bar}}</p>
❖
a portion of view is bind to a model
❖
when either one changes, they are both
synchronized
!18

19. View
!19

20. View
❖
presentation logic
❖
does not know anything about the controller, nor
the controller about it
❖
everything goes through the Scope
❖
integrates with models, directives, filters
!20

21. View
❖
ng-repeat
❖
this would not work
<div ng-repeat=“number in [1, 2, 3]”>
<input type=“text” ng-model=“number” />
</div>
but this would work
<div ng-repeat=“number in [{n: 1}, {n: 2}, {n: 3}]”>
<input type=“text” ng-model="number.n"/>
</div>
❖
$index, $first, $middle, $last, $event, $parent
❖
ng-click, ng-show, ng-model, ng-change, ng-href …
!21

22. View
❖
orderBy, filter
❖
<div id=“{{post.id}}”
ng-repeat=“post in posts|
orderBy:order:descending|
filter:filter”>
</div>
❖
in Controller
$scope.order = ‘date’
$scope.descending = true
❖
and filter would come from an text box
❖
ngClassEvent, ngClassOdd
!22

23. View
❖
compilation for templates and markup is done in
two steps
Step 1: compile
Step 2: link
var linker = $compile(template)
var compiled = linker(scope)
1) template examined for directives
1) scope into the link function of its directive
2) AngularJS collects them and
2) get back AngularJS element representing
produces a link function
the DOM fragment
* no data has been inserted in the template
$compile(template)(scope)
!23

24. Controller
!24

25. Controller
❖
they are for the business logic
❖
they are not meant to interact with the DOM
❖
services can be injected to share common
functionality with other controllers
!25

26. Dependency Injection
❖
A nice way to create modular applications
❖
it is magic (but not really…)
❖
Angular converts functions to strings .toString()
❖
runs string matching against them
❖
determines from the name of the parameter what
you want to inject
!26

27. Directives
!27

28. Directives
❖
Create your own DSL
❖
A nice way to include logic in the views
❖
this is where DOM manipulation should happen!
❖
Can have an isolated scope
❖
Defines a linking function
❖
❖
❖
is passed a Scope object, an element, and the element’s attributes
(optionally a controller inst.)
where the logic goes
Need a scope, use link. Don’t? Use compile.
!28

29. Directives
HTML with
HTML with
HTML with
directives
directives
directives
examines
<my-directive>
finds
compile()
returns
Scope
object
link
(scope)
Hiller, Christopher. “Developing an AngularJS Edge.”
!29
returns
Compiled
template with
data

30. Directives
app.directive(‘new-event’, function() {
return {
restrict: ‘E’,
scope: {
event: ‘=’,
linked to the parent scope
save: ‘=’,
cancel: ‘=’,
saveText: ‘@’,
copied verbatim
cancelText: ‘@’
},
replace: true,
template:
‘<div ng-show="event">' +
‘<input type=“text” ng-model=“event.temp.title”/><br/>’ +
‘<input type=“text” ng-model=“event.temp.subtitle”></../>’ +
‘<button ng-click=“cancel(event)”>{{cancelText}}</button>’ +
‘<button ng-click=“save(event)”>{{saveText}}</button></div>’
};
});
}
}
!30

31. Directives
<new-event
event=“event”
cancel=“cancel”
save=“save”
cancel-text=“Cancel”
save-text=“Save”>
</new-event>
!31
linked to the parent scope
copied verbatim

32. Directives
app.directive(‘event-info', function() {
return {
restrict: ‘E’,
replace: true,
templateUrl: ‘views/eventInfo.html’
transclude: true,
scope: {
startDate: ‘=’,
endDate: ‘=’
},
link: function(scope, element) {
infoButton = element.children()[0].children[0].children[0]
scope.open = false;
angular.element(infoButton).bind(‘click’, function() {
scope.$apply(‘open = !open’);
});
};
};
});
!32

33. Directives
<div class="event-info">
<div class="event-info-content">
<div class="event-title" ng-transclude>
<span class=“addtional-info-button”>More...</span>
</div>
<div class="additional-info>" ng-show="open">
<div class=“event-start">{{startDate}}</div>
<div class="event-end">{{endDate}}</div>
</div>
</div>
</div>
We could call it like:
<event-info start-date=“event.event_start" end-date="event.event_end">
{{event.title.en}}
</event-info>
!33

34. Directives
❖
‘=foo’ links directly to parent scope
❖
‘@foo’ assigns an attribute to whatever the key is
❖
‘&foo’ binds expression and executes it against the parent
scope
❖
❖
<my-directive on-close=“hide()”></my-directive>
❖
❖
in directive definition: scope: {‘close’: ‘&onClose’}
in directive’s template: ng-click=“close()”
There are also ‘A’, ‘AE’, ‘C’, and ‘M’ restrict options
!34

35. Directives
❖
write reusable and generic directives
❖
the less reusable (involving scopes) the less
maintainable they become
❖
write directives with isolated scopes!
❖
share functionality between directives using a
controller
❖
long learning curve, but powerful!
!35

36. Service | Factory | Provider
!36

37. Service | Factory | Provider
❖
the backbone of the an AngularJS app
❖
keep the controller from thinking too hard
❖
… and directives have only one function, make it
readable and testable (inject services)
!37

38. Service | Factory | Provider
Needs a $get Explicitly returns Present during
Component Instantiated
method
something
$config()
Service
Yes
No
No
No
Factory
No
No
Yes
No
Provider
Yes
Yes
No
Yes
Hiller, Christopher. “Developing an AngularJS Edge.”
!38

39. Service
❖
it is a singleton, instantiated the first time is
requested
❖
requires less memory and processing power than
the others
!39

40. Promises
EventsCtrl
(Controller)
1) Calls getEvents()
Promise
3) Returns a
Promise
Events
(Service)
!40
Server
2) Asks Server
for a list of Events

41. Promises
4) Returns a list
of events
Server
Events
(Service)
5) Promise resolved
with events data
EventsCtrl
(Controller)
Promise
6) Takes action with
data received from
resolved promise
!41

42. Factory
❖
it can return a function, object, or primitive
❖
useful for utils
!42

43. Provider
❖
can be configured during initialization
❖
$http is also a provider
injects
config()
$httpProvider
injects
run()
$http
!43

44. Provider
Configure with Plugin B in
Module.config()
Plugin A
DialogProvider
Plugin B
Dialog
Uses plugin B at runtime
Hiller, Christopher. “Developing an AngularJS Edge.”
!44

45. Filters
!45

46. Filters
❖
execute logic against models only the view cares about
❖
app.filter(‘product’, function() {
return function(a, b, c) {
return a * b * c;
};
});
❖
can be used like:
<span>the product is {{a|product:b:c}}</span>
❖
executed often, so keep them simple
❖
they should not have side-effects
!46

47. More…
❖
History
❖
Routing
❖
Compiler
❖
Injector
❖
Template
!47

48. Testing (intro)
❖
Jasmine (behavior-driven testing)
❖
aware of asynchronous events
❖
take advantage of binding information
❖
excellent mock objects ($log)
!48

49. ng-modules
❖
http://ngmodules.org/, currently 440 modules (++)
❖
angular-ui, bootstrap, ui-router
❖
restangular
❖
angular-translate
❖
angular-cache
❖
…
!49

50. built.with.angularjs
❖
http://builtwith.angularjs.org/
❖
http://www.google.com/doubleclick/
Create, transact, and manage digital advertising
❖
http://demo.songpane.com/
Form song set lists (songs, lyrics, chords)
❖
http://www.zaptravel.com/
Deals for experiences of interest
❖
http://hat.jit.su/
Distributed scrum planning poker
❖
…
!50

51. References
❖
Hiller, Christopher. “Developing an AngularJS
Edge.”
❖
Mastering Web Application Development with
AngularJS
❖
Ari Lerner “ng-book - The Complete Book on
AngularJS”
!51

53. AAAAngularosum!