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

Hey everyone, we're excited to announce a large update to the book!
I know it's been a little while since we've sent out an update email, but that hasn't stopped us from updating the book - we make minor edits and fixes about once a week or so.
- We've expanded the protractor section in the testing chapter.
- We've refactored a few early chapters to clarify the language and make it easier for beginners.
- We've fixed a bunch of typos.
Our updates are a direct result of feedback we get from you, our readers. If you find a bug, typo, or have a suggestion, please reach out! We love talking to you guys.
To get the update, head over to https://www.ng-book.com.
CHANGELOG:
Removed directive from validation chapter -> To directive chapter
Fixed Restangular setRequestInterceptor method in ajax in practice chapter
Fixed minor typo in angular-ui chapter
Fixed minor typo in directive chapter and chrome apps chapter
Added binding_strategies section to directives chapter
Added minor description of the $watch function in expressions as a gentler introduction to $watch
Fixed glitch in promises chapter with Github service
Fixed bug with routing chapter
Fixed typo in services chapter that had the wrong return method
Moved custom validation section into the directive chapter
Updated localization chapter with changes for angular-translate 2.0
Updated animation chapter with 1.2.9 updates ($animate:begin and $animate:end)
Fixed a small bug in code in promises chapter
Fixed all of the double 'the the' uses
Updated validations chapter example /a-zA-Z/
Replaced protractor section with entirely new, refreshed protractor content
And more...
Thank you all for the help in finding these issues. As always, just hit reply to this email and let us know what you think. You'll chat directly with the authors, not some big publishing company.
If you like the book content, would you do us a favor by sharing the website https://www.ng-book.com with your network and associates? We have tons of great new content in the pipeline, but we are independent authors: we depend upon your satisfaction and support to keep producing content.
Cheers!