Ari Lerner - ng-book: The Complete Book on AngularJS [2013, PDF, MP4, ENG]

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
CONTENTS
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 Communication . . . . . 173
Using $http . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Configuration Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
CONTENTS
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
CONTENTS
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
CONTENTS
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
CONTENTS
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
CONTENTS
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
CONTENTS
Lineman . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 580
Bower . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 582
Yeoman . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 586
Configuring the Angular Generator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 592
Testing Our App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 592
Packaging Our App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 593
Packaging Our Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594

video