AngularJS @ DevWeek 2014

A n g u l a rJ S
a i n’ t j u s t a n o t h e r M VC f r a m e w o r k
@ P e a r lC h e n
Slides: go.klab.ca/devweek-angular

View Slide

My n a m e i s Pe a r l C h e n .
H E L LO !
T h a n k s ,
D e v We e k !

View Slide

Te c h n o l o g i s t + E d u c a t o r
I ’ M A …
Karma Laboratory

View Slide

A n g u l a rJ S
I ❤
Adobe Flash with
ActionScript 2 & AS3
Adobe Flex with
ActionScript 3
HTML, CSS, & JS with
AngularJS

View Slide

W h a t i s A n g u l a rJ S ?
I N T R O

View Slide

I N T R O
angularjs.org

View Slide

I N T R O

View Slide

Given this JavaScript string:
name = 'DevWeek 2014';
The old school way to dynamically update DOM text:

document.getElementById('conference')
Things got easier with the jQuery $(selector):

$('#conference')
Now, with Angular!
{{name}}
.textContent = name;
.text( name );

View Slide

{{name}}

View Slide

AngularJS is a JavaScript MVC framework 
but…
“there is nothing to inherit, nothing to call, and  
no complex life cycle for your controllers to
follow. […] It really is just a better browser.”
- Misko Hevery, creator of AngularJS 
Appliness (Feb #11)

View Slide

B e g i n n e r / i n t e r m e d i a t e ?
W H Y A N G U L A R ?
• Declarative ➞ Readable
• Spaghetti code
• Does a lot of heavy lifting for you
• Opinionated == good

View Slide

Mo r e a d v a n c e d ?
W H Y A N G U L A R ?
• Create complex web apps with less code.
• Write code with unit testing in mind.

View Slide

Mo d e l -Vi e w - C o n t ro l l e r
M V C R E F R E S H E R

View Slide

Model 
your application data
Controller 
mediator between the view & model
View 
a representation 
of the model data
x
user input database save
REST result
update DOM

View Slide

Mo d e l -Vi e w -W h a t e v e r
L I N K

View Slide

Re c o m m e n d e d Re a d i n g
M V C ( O R J AVA S C R I P T ) R E F R E S H E R

View Slide

"The model is the truth."
- a wise person

View Slide

Pa r t 1 : O v e r v i e w
A G E N D A
Module building blocks:
• directives (built in)
• controllers + $scope
• modules +
dependency injection
The basics:
• getting started
• 2-way data binding
• template expressions

View Slide

Pa r t 2 : To o l s
A G E N D A
• Batarang for Chrome DevTools
• Yeoman for scaﬀolding
• Testing tools
• Text editor plugins

View Slide

Pa r t 3 : G o i n g d e e p e r
A G E N D A
• Custom directives
• $watch and $apply

View Slide

G e t t i n g s t a r t e d
PA R T 1 : A N G U L A R O V E R V I E W

View Slide

A s i m p l e A n g u l a r t e m p l a t e
D E M O

What’s your name?

Hello {{yourName}}!

View Slide

What’s your name?

Hello {{yourName}}!

I n c l u d e t h e a n g u l a r . j s s c r i p t

Ready for production?
LO A D LO C A L LY O R F R O M A C D N

View Slide

What’s your name?

Hello {{yourName}}!

B o o t s t r a p y o u r a p p

Need to manipulate stuff in ? Only making a small widget?
U S E T H E n g A p p D I R E C T I V E O N T H E PA R E N T N O D E

View Slide

What’s your name?

Hello {{yourName}}!

M a ke i t A n g u l a r
A D D OT H E R D I R E C T I V E S L I K E n g M o d e l
A D D S O M E T E M P L AT E E X P R E S S I O N S

View Slide

Te m p l a t e e x p r e s s i o n s

View Slide

O u t p u t t i n g v a l u e s
T E M P L AT E E X P R E S S I O N S
• Expressions are JavaScript-like code snippets.
• Double curly brace notation 
e.g. {{simpleVariable}} or {{object.simpleVariable}}
• Evaluate and bind to primitives 
Strings, numbers, and booleans
• undefined and null values will show up blank.
D E M O

View Slide

F l o w c o n t ro l
• There is none!
• No looping or conditionals within {{ }}.
• Handle business logic with methods in a controller
or via a directive.

View Slide

v s D i r e c t i v e e x p r e s s i o n s
• You might come across something like this: 
Hello {{username}}!
• But what about this? 

• Object literal notation 
e.g. {'stringToOutput':booleanCondition}
• Not exactly the same as {{ }}.  
Evaluated in the directive. Think: function parameter.
D E M O

View Slide

D a t a b i n d i n g

View Slide

1 - w ay b i n d i n g
D ATA B I N D I N G

{{yourName}}
yourName
hardcoded to 'Pearl'
{{yourName}}
value="{{yourName}}"
Pearl
Pearl
1 -WAY M E R G E

View Slide

{{yourName}}
2 - w ay b i n d i n g
D ATA B I N D I N G
yourName
hardcoded to 'Pearl'
{{yourName}}
value="{{yourName}}"
model becomes 
single source of truth
L I N K E D
L I N K E D
ng-‐model="yourName"
value="{{yourName}}
D E M O
A U T O U P D AT E S
Pearl
Pearl

View Slide

H T M L C o m p i l e r
D ATA B I N D I N G
• The Angular compiler consumes the DOM,  
not string templates.
• Currently uses "dirty checking".
• Object.observe in future versions of Angular.

View Slide

A G E N D A
• directives (built in)
• controllers + $scope
• modules +
The basics:
getting started
2-way data binding
template expressions

View Slide

D i r e c t i v e s  
( b u i l t i n a n d o t h e r l i b r a r i e s )

View Slide

Angular directives teach DOM elements new tricks!
• Use directives to enhance existing elements 

• Create directives to encapsulate DOM functionality 

W h a t i s a d i r e c t i v e ?
D I R E C T I V E S

View Slide

Us i n g d i r e c t i v e s
D I R E C T I V E S
Syntax-wise, it can be a:
• tag attribute 
 

• existing or custom HTML tag 
 

• css class 
 

View Slide

B u i l t - i n d i r e c t i v e s
D I R E C T I V E S
Control
• ng-repeat
• ng-if / ng-switch
Events
• ng-click / ng-submit
• ng-focus / ng-blur
• ng-cut / ng-copy / ng-paste
These are only some of them! Go to docs.angularjs.org/api/ng/directive for the full list.
CSS
• ng-class / ng-style
• ng-show / ng-hide
• ng-class-even / ng-class-odd
Forms
• form / input / select / textarea
• ng-model
• ng-selected / ng-checked
• ng-required / ng-disabled

View Slide

n g - w h a t ?
D I R E C T I V E N A M E S PA C I N G
Angular Angular

View Slide

n g W h a t ? ?
D I R E C T I V E N A M E S PA C I N G
ng-click ??? ngClick
N O R M A L I Z AT I O N

View Slide

Mo d u l e n a m e n o r m a l i z a t i o n
D I R E C T I V E S
Directive names automatically get converted.
• camelCase used in JavaScript  
angular.module('myApp', []) 
.directive('myDirective', function() { 
// return  
});
• dashes used in HTML 
, ,

View Slide

H T M L 5 c o m p l i a n c y
D I R E C T I V E S
Need to run your markup through a validator?
• Add the data-‐ preﬁx: data-‐ng-‐directive
• x-‐ng-‐directive for experimental vendor-speciﬁc feature
Colons and underscores work too… but they are considered legacy:
• ng:directive, data-‐ng:directive, or x:ng_directive

View Slide

E x a m p l e : D 3
D I R E C T I V E S
From odiseo.net/angularjs/proper-use-of-d3-js-with-angular-directives:

View Slide

E x a m p l e : C h a r t J S
D I R E C T I V E S
From blog.safaribooksonline.com/2013/11/07/creating-an-angularjs-component/:
width="chart.width"
height="chart.height"
title="{{chart.title}}"
type="{{chart.type}}"
data="{{chart.data}}"
ng-‐model="chart">

View Slide

E x a m p l e : Ic o n i c Fr a m e w o r k
D I R E C T I V E S
ionicframework.com 
>> /docs/angularjs/controllers/side-menu/

ng-‐repeat="project in projects">
{{project.title}}

View Slide

C o n t ro l l e r s a n d $ s c o p e

View Slide

G e t t i n g o r g a n i z e d
C O N T R O L L E R S
• Views are for HTML output.
• Directives are for DOM manipulation.
• Controllers are for your business logic.

View Slide

B u i l d a b u g t r a c ke r a p p
Let's build a "bug tracker app". Features of this app:
1. 2.
3.

View Slide

1 . T h e v i e w

{{counter}} days since a bug was found

No bugs found today! :)

A bug was found :(

D E M O

View Slide



A bug was found :(

2 . A d d i n g l o g i c t o t h e v i e w
D E M O

View Slide

ng-‐init="style={'background-‐color':'rgba(223,240,216,0)'}">

style={'background-‐color':'rgba(223,240,216,'+counter/20+')'}">

style={'background-‐color':'rgba(223,240,216,0)'}">
A bug was found :(

3 . A d d i n g m o r e l o g i c t o t h e v i e w
D E M O

View Slide



A bug was found :(

4 . A d d i n g e v e n m o r e l o g i c …
S TO P

View Slide

{{counter}}

 function MagicCtrl($scope) { $scope.counter = 0; } 

C r e a t i n g a n A n g u l a r c o n t ro l l e r
U S E T H E n g C o n t r o l l e r D I R E C T I V E
S A M E N A M E

View Slide

{{counter}}

 function MagicCtrl($scope) { $scope.counter = 0; } 

D e p e n d e n c y i n j e c t i o n o f $ s c o p e
D O N ' T N E E D $ s c o p e H E R E
G E T / S E T V I A $ s c o p e .

View Slide



A bug was found :(

4 . P u t l o g i c i n t o a c o n t ro l l e r

View Slide

A bug was found :(

 function CounterCtrl($scope) { … } 
4 . P u t l o g i c i n t o a c o n t ro l l e r
D E M O

View Slide



A bug was found :(

5 . E x t e r n a l i z e c o n t ro l l e r
D E M O

View Slide

Wi t h o u t $ s c o p e ( n e w e r s y n t a x )
N E E D A L I A S H E R E
N O $ s c o p e S O U S E t h i s .
N E W A L I A S

{{ctrl.counter}}!

 function MagicCtrl() { this.counter = 0; } 

D E M O

View Slide

A r r ay s w i t h n gRe p e a t
• In your controller: 
$scope.todos = ["Learn Angular",  
"Make awesome apps",  
"Rule the world"];
• In your template: 
 
{{todo}} 

D O C S

View Slide

Fo r m s o b j e c t s
• In your controller: 
$scope.user = { name: 'Pearl',  
email: '[email protected]', 
subscribe: true };
• In your template: 
 
 

D O C S

View Slide

Mo d u l e s a n d
d e p e n d e n c y i n j e c t i o n

View Slide

Mo d u l a r c o m p o n e n t s
M O D U L E S A N D D E P E N D E N C Y I N J E C T I O N
Angular modules are just object containers.
• Top-level module is like an application namespace
• Stores your controllers, directives, etc
• Declare what is required as a dependency
• Angular takes care of bootstrapping module  
vs developer having to declare & initialize it manually.
D O C S

View Slide

Mo d u l e s y n t a x
• Create top-level application module:
• …
• angular.module('demoApp', []);
• Add another module like a controller:
• angular.module('demoApp') 
.controller('MagicCtrl', function ($scope) { 
// $scope.stuff = 'goes here'; 
});
•
D O C S

View Slide

Mo d u l e s y n t a x
Note the subtle diﬀerence:
• Create: 
angular.module('demoApp', []);
• Retrieve: 
var myModule = angular.module('demoApp');

View Slide

D e p e n d e n c y i n j e c t i o n
• Declare an application with no dependencies: 
angular.module('demoApp', []);
• Declare a dependency on the URL routing module: 
angular.module('demoApp', ['ngRoute']);
• Declare even more dependencies: 
angular.module('demoApp', ['ngRoute','ngResource',
'ngCookies']);

View Slide

D e p e n d e n c y i n j e c t i o n
• Each dependency should be a separate .js ﬁle:
• angular.module('demoApp',  
['ngRoute','ngResource', 'ngCookies']);
•  
 

• Use a concat script (via Grunt or Gulp) to compile
them all into 1 ﬁle when ready to deploy.

View Slide

A G E N D A
directives (built in)
controllers + $scope
modules +
The basics:
getting started
2-way data binding
questions?
Let's recap, then…

View Slide

Re c a p : a l l t o g e t h e r n o w

View Slide

Re w r i t i n g a s i m p l e " a p p"
R E C A P : A L L TO G E T H E R N O W
Going from jQuery to AngularJS
D E M O

View Slide

App ﬂow

View Slide

C o m p a r i n g t h e c o d e
C O M PA R E

View Slide

B e n e f i t s
Model-driven data binding means:
• descriptive state variables —> code is better at 
"self documenting"
• less code needed for DOM manipulation
• business logic decoupled from the view
• behavioural intentions are more clear in the HTML

View Slide

"The model is the truth."
- me, a few slides ago
REMINDER!

View Slide

A G E N D A
directives (built in)
controllers + $scope
modules +
The basics:
getting started
2-way data binding
Questions?

View Slide

Pa r t 2 : To o l s
A G E N D A
• Batarang for Chrome DevTools
• Yeoman for scaﬀolding
• Testing tools
• Text editor plugins

View Slide

B a t a r a n g
PA R T 2 : O T H E R T O O L S

View Slide

I n s t a l l f ro m C h ro m e S t o r e
B ATA R A N G
chrome.google.com/webstore > "Batarang"

View Slide

Ye o m a n fo r A n g u l a r

View Slide

S c a f fo l d y o u r a p p
Y E O M A N F O R A N G U L A R
Tutorial: yeoman.io/codelab.html

View Slide

To g e t s t a r t e d
$ [sudo] npm install -‐-‐global yo
$ yo
$ [sudo] npm install -‐g generator-‐angular
$ yo angular [app-‐name]
$ bower install -‐-‐save angular-‐cookies
$ grunt serve

View Slide

W h i l e y o u ' r e c o d i n g …
$ yo angular:controller [controllerName]
$ yo angular:view [viewName]
$ yo angular:route [routeName]
$ yo angular:directive [directiveName]
$ grunt test
All of the commands: github.com/yeoman/generator-angular

View Slide

Re a d y t o r e l e a s e ?
$ grunt build

View Slide

Te s t i n g

View Slide

K a r m a
T E S T I N G
karma-runner.github.io

View Slide

Ja s m i n e
T E S T I N G
jasmine.github.io

View Slide

Us e d t o g e t h e r
T E S T I N G
• Karma test runner is for running your JS tests.
• Jasmine is the syntax for describing your tests.
• it('should attach awesomeThings to scope', function () { 
expect(scope.awesomeThings.length).toBe(3); 
});
• Tests automatically get generated with Yeoman
generator-angular — so no excuses!

View Slide

P ro t r a c t o r
T E S T I N G
github.com/angular/protractor

View Slide

P ro t r a c t o r
T E S T I N G
• Use for end-to-end (e2e) functional testing
• Wrapper for Selenium WebDriver
• Uses Jasmine and "page objects" for its specs.
• Fairly new so not part of Yeoman generator-angular — yet?

View Slide

Te x t e d i t o r p l u g i n s

View Slide

Fo r S u b l i m e Te x t
T E X T E D I TO R P LU G I N S
github.com/angular-ui/AngularJS-sublime-package

View Slide

Fo r o t h e r s
T E X T E D I TO R P LU G I N S
docs.angularjs.org/guide#tools

View Slide

Pa r t 2 : To o l s
A G E N D A
Batarang for Chrome DevTools
Yeoman for scaﬀolding
Testing tools
Text editor plugins
Questions?

View Slide

A G E N D A
• Custom directives
• $watch and $apply

View Slide

PA R T 3 : G O I N G D E E P E R
C u s t o m d i r e c t i v e s  
( a k a " b u i l d y o u r o w n" )

View Slide

D i r e c t i v e s r e f r e s h e r
C U S T O M D I R E C T I V E S
Syntax-wise, it can be a:
 

• existing or custom HTML element 
 

• css class 
 

View Slide

D e f i n i n g c u s t o m d i r e c t i v e s
• angular.module('demoApp') 
.directive('myTooltip', function () { 
return directiveObject; 
});

View Slide

D i r e c t i v e d e f i n i t i o n o b j e c t

View Slide

D i r e c t i v e d e f i n i t i o n o b j e c t
table from "AngularJS"

View Slide

To p 4 p ro p e r t i e s
• restrict: 'E', 'A', 'C', or 'M' (or a combo 'AC')
• template: 'Stuff' 
or templateUrl: 'myTemplate.html'
• link: function postLink(scope, elem, attrs) { 
// do scope.stuff here 
}
• scope: false (default), true, or {attribute:'@=&'}

View Slide

Re s t r i c t
'A'
• existing or custom HTML element 
'E'
• css class 
'C'
• HTML comment 
'M'

View Slide

S c o p e
• bind to object property in parent scope 
'='
• pass as string 
'@'
• bind to function in parent scope 
'&'

View Slide

S a m p l e p ro j e c t
designresearchtechniques.com

View Slide

S a m p l e c o d e
github.com/pchen/telus-mobility-web-stats

View Slide

PA R T 3 : G O I N G D E E P E R
$ w a t c h a n d $ a p p l y

View Slide

$ w a t c h
$ WATC H A N D $ A P P LY
Listen for changes in your properties:
scope.$watch('watchExpression', function(){ 
// do stuff now that watchProperty has changed 
});
D O C S

View Slide

$ w a t c h
Example, state changes in one ﬁle: 
scope.filterByTop10 = function(event){ 
event.preventDefault(); 
scope.showInPhase = ''; //clear out phase filters 
scope.showTop10 = true; 
};
Listening for the change: 
scope.$watch('showTop10', function(){ 
if ( scope.appendix.length > 0 ) { 
scope.filteredAppendix = $filter('masterTechniqueFilter') 
(scope.appendix, scope.showInPhase, scope.showTop10); 
} 
});

View Slide

$ a p p l y
Use $apply to execute an expression in angular from
outside of the angular framework.
scope.$apply('expression');
e.g. browser DOM events, setTimeout, XHR or third party libraries
D O C S

View Slide

$ a p p l y
Example DOM event:
element.on('mouseover', 'li', function(event){ 
var technique = angular.element( event.target ).scope().technique; 
scope.$apply(function(){ 
scope.selectedTechnique = technique; 
}); 
});

View Slide

A G E N D A
Custom directives
$watch and $apply
Questions?

View Slide

TWITTER @PearlChen
GOOGLE+ klab.ca/+
P E A R L C H E N
T h a n k y o u !
 
( D e m o s : g i t h u b . c o m / p c h e n / D e v We e k 2 0 1 4 -A n g u l a r )
F I N

View Slide

AngularJS @ DevWeek 2014

AngularJS @ DevWeek 2014

Pearl Chen

More Decks by Pearl Chen

Other Decks in Technology

Featured

Transcript