Contents
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Foreword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2
About This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Organization of This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Additional Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4
Conventions Used in This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4
Development Environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5
The Basics of AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6
How Web Pages Get to Your Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
What Is a Browser? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7
What Is AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8
Data Binding and Your First AngularJS Web Application . . . . . . . . . . . . . .10
Introducing Data Binding in AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . .11
Simple Data Binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Best Data Binding Practices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18
Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Scopes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
The $scope View of the World . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20
It’s Just HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
What Can Scopes Do? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
$scope Lifecycle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Directives and Scopes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Controller Hierarchy (Scopes Within Scopes) . . . . . . . . . . . . . . . . . . . . 27
Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31
Interpolating a String . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32
Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37
Making Our Own Filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .44
Form Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .45
Introduction to Directives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .59
Directives: Custom HTML Elements and Attributes . . . . . . . . . . . . . . . . 61
Passing Data into a Directive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Built-In Directives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Basic ng Attribute Directives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .79
Directives with Child Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .83
Directives Explained . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103
Directive Definition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103
Directive Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
AngularJS Life Cycle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .122
ngModel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Angular Module Loading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .132
Configuration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Run Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Multiple Views and Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .136
Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Layout Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
$location Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Routing Modes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .145
Other Advanced Routing Topics . . . . . . . . . . . . . . . . . . . . . . . . . . . . .148
Dependency Injection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .149
Annotation by Inference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Explicit Annotation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Inline Annotation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
$inject API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153
ngMin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .157
Registering a Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Using Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Options for Creating Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .163
Communicating with the Outside World: XHR and Server-Side . . . . . . . 173
Using $http . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Configuration Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .178
Response Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Caching HTTP Requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Interceptors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .182
Configuring the $httpProvider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Using $resource . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185
Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Using $resource . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .186
Custom $resource Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .191
$resource Configuration Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
$resource Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Using Restangular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
The What and the Why . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Intro to the Restangular Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Using Restangular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .200
Configuring Restangular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
XHR in Practice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .211
Cross-Origin and Same-Origin Policy . . . . . . . . . . . . . . . . . . . . . . . . . .211
JSONP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .211
Using CORS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .213
Server-Side Proxies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Working with JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Working with XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Authentication with AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .218
Talking to MongoDB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .226
Promises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .229
What’s a Promise? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Why Promises? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .230
Promises in Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Chaining Requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
Server Communication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Custom Server-Side . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Install NodeJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Install Express . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Calling APIs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Server-less with Amazon AWS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
AWSJS + Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Running . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
User Authorization/Authentication . . . . . . . . . . . . . . . . . . . . . . . . . . . .252
UserService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .256
All Aboard AWS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .258
AWSService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .261
Starting on Dynamo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
$cacheFactory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Saving Our currentUser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Uploading to S3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Handling File Uploads . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .271
Querying Dynamo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Showing the Listing in HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .275
Selling Our Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Using Stripe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .278
Server-less with Firebase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
Three-Way Data Binding With Firebase and Angular . . . . . . . . . . . . . . . 283
Getting Started With AngularFire . . . . . . . . . . . . . . . . . . . . . . . . . . . . .284
Ordering in AngularFire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
Firebase Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .289
Implicit Synchronization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .290
Authentication with AngularFire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
Authentication Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Beyond AngularFire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .294
Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .295
Why Test? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
Testing Strategies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .295
Getting Started Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Types of AngularJS Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .296
Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .298
Initializing Karma Config File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
Configuration Options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
Using RequireJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Jasmine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312
Expectations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .313
End-to-End Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320
Mocking and Test Helpers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331
Mocking the $httpBackend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .332
Testing an App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340
Testing Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .363
Continuous Integration for Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . 365
Protractor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365
Configuration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .367
Configuration Options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .367
Writing Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .370
Page Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .371
Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373
What are Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373
Event Propagation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .373
Listening . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375
Event Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .376
Core Services Riding on Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .376
Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379
Directory Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379
Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .380
Controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382
Directives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .384
Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384
Angular Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386
Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .386
How It Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .387
Using CSS3 Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388
Using CSS3 Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390
Staggering CSS Transitions / Animations . . . . . . . . . . . . . . . . . . . . . . .392
Using JavaScript Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394
Fine-tuning animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .395
Animating Built-In Directives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .395
Building Custom Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416
Integrating with Third-Party Libraries . . . . . . . . . . . . . . . . . . . . . . . . .423
The Digest Loop and $apply . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426
$watch List . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427
Dirty Checking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .427
$watch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .428
$watchCollection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .430
The $digest Loop in a Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431
$evalAsync List . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .432
$apply . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .433
When to Use $apply() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .434
Demystifying Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436
How the View Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .437
Essential AngularJS Extensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . .440
AngularUI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440
Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .440
ui-router . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440
ui-utils . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .453
Mobile Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .458
Responsive Web Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .458
Interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .458
Native Applications with Cordova . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
Getting Started with Cordova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .466
Including Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .474
Building with Yeoman . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .474
Localization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482
angular-translate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482
Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .482
Teaching Your App a New Language . . . . . . . . . . . . . . . . . . . . . . . . .483
Multi-language Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 485
Switching the Language at Run Time . . . . . . . . . . . . . . . . . . . . . . . . .486
Loading Languages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 487
angular-gettext . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489
Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489
Usage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .489
String Extraction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491
Translating Our Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .493
Compiling Our New Language . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495
Changing Languages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .496
Caching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 498
What Is a Cache? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 498
Angular Caching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 498
Caching through $http . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .500
Setting Default Cache for $http . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501
Security . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .503
Strict Contextual Escaping: the $sce Service . . . . . . . . . . . . . . . . . . . . 503
Whitelisting URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 506
Blacklisting URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .507
$sce API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 508
Configuring $sce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .510
Trusted Context Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510
AngularJS and Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . .512
Ajax Caching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 514
SEO with AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 514
Getting Angular Apps Indexed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .515
Server Side . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 515
Options for Handling SEO from the Server Side . . . . . . . . . . . . . . . . . .516
Taking Snapshots . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .519
Using Zombie.js to Grab HTML Snapshots . . . . . . . . . . . . . . . . . . . . . .519
Using grunt-html-snapshot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 522
Prerender.io . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .523
<noscript> Approach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524
Building Angular Chrome Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .525
Understanding Chrome Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .525
Building our Chrome App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 526
Building the Skeleton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .527
manifest.json . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 528
tab.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .528
Loading the App in Chrome . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 530
The Main Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .530
Building the Home Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .531
Sign Up for Wunderground’s Weather API . . . . . . . . . . . . . . . . . . . . . 533
A Settings Screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .538
Implementing a User Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .540
City Autofill/Autocomplete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .544
Sprinkling in Time Zone Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . 547
Optimizing Angular Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .551
What to Optimize . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .551
Optimizing the $digest Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551
Optimizing ng-repeat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554
Optimizing the $digest Call . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554
Optimizing $watch Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .554
Optimizing Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .559
Tips for Optimizing Page Load . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .561
Debugging AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .563
Debugging from the DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .563
Debugger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 565
Angular Batarang . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 565
Next Steps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569
jqLite and jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .569
Essential Tools to Know About . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 571
Grunt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .571
grunt-angular-templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 575
Lineman . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .580
Bower . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 582
Yeoman . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .586
Configuring the Angular Generator . . . . . . . . . . . . . . . . . . . . . . . . . .592
Testing Our App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .592
Packaging Our App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .593
Packaging Our Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594
Foreword
I’ve become somewhat numb to all of the JavaScript libraries and frameworks being released on a seemingly daily basis. While the ability to choose from a variety of libraries and frameworks is a good thing, including too many scripts in an application can be a bad thing for maintenance – at least in my opinion. I’ve always been concerned about the dependencies that are created as more and more scripts are added into an application and often longed for a single script (or two) that could provide the core functionality I wanted.
When I first heard about AngularJS it caught my attention immediately because it appeared to offer a single framework that could be used to build a variety of dynamic, client-centric applications. After researching it more, my initial impressions were confirmed, and I was hooked. AngularJS includes a robust set of features and offers a way to break up code into modules, which is good for reuse, maintenance, and testability. It provides key features, such as support for DOM manipulation, animations, templating, two-way data binding, routing, history, Ajax, testing, and much more.
While having a core framework to build on is great, it can also be intimidating and challenging to learn. As I dove into AngularJS I became overwhelmed with different topics and quickly became a little frustrated and wondered if it was the framework for me. What was a service, and how was it different from a factory? How did scope fit into the overall picture? What was a directive, and why would I use one? Putting the pieces together and seeing the big picture was the initial hurdle that I had to get over. It definitely would’ve been nice to have a concise resource to consult that flattened out the learning curve.
Fortunately, you have an excellent resource at your disposal in ng-book: The Complete Book on AngularJS that will help make you productive right away. Ari Lerner has taken the knowledge and expertise that he’s gained and laid it out in a way that is easy to follow and understand. If you’re looking to learn more about data binding, how “live” templates work, the process for testing AngularJS applications, the role of services and factories, how scope and controllers fit together, and much more, then you’re in the right place. AngularJS is an extremely powerful and fun framework to work with, and the examples shown throughout this book will help you get up to speed quickly on the framework. Best of luck with your AngularJS development projects!
About This Book
ng-book: The Complete Book on AngularJS is packed with the solutions you need to be an AngularJS⁵ ninja. AngularJS is an advanced front-end framework released by the team at Google⁶. It enables you to build a rich front-end experience, quickly and easily.
ng-book: The Complete Guide to AngularJS gives you the cutting-edge tools you need to get up and running on AngularJS and creating impressive web experiences in no time. It addresses challenges and provides real-world techniques that you can use immediately in your web applications. In this book, we will cover topics that enable you to build professional web apps that perform perfectly. These topics include:
• Interacting with a RESTful web service
• Building custom reusable components
• Testing
• Asynchronous programming
• Building services
• Providing advanced visualizations
• And much more
The goal of this book is not only to give you a deep understanding of how AngularJS works, but also to give you professional snippets of code so that you can build and modify your own applications.
With these tools and tests, you can dive into making your own dynamic web applications with AngularJS while being confident that your applications will be scalable.
Organization of This Book
This book covers the basics of getting started and aims to get you comfortable with writing dynamic web applications with AngularJS right away.
Then we’ll take a look at how AngularJS works and what sets it apart from other popular JavaScript web frameworks. We’ll dive deeply into detail about the underpinnings of the flow of an AngularJS application.
Finally, we’ll take all of our knowledge and build a relatively large application.
