Table Of Contentng-book
The Complete Book on AngularJS
Ari Lerner
ISBN978-0-9913446-0-4
©2013AriLerner
Tweet This Book!
PleasehelpAriLernerbyspreadingthewordaboutthisbookonTwitter!
Thesuggestedtweetforthisbookis:
Ijustbought#ngbook,theCompleteBookonAngularJS!I’mreadytobuildadvanced,modern
webapps!
Thesuggestedhashtagforthisbookis#ngbook.
Findoutwhatotherpeoplearesayingaboutthebookbyclickingonthislinktosearchforthis
hashtagonTwitter:
https://twitter.com/search?q=#ngbook
Contents
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Foreword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Acknowledgments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
AbouttheAuthor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
AboutThisBook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
OrganizationofThisBook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
AdditionalResources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
ConventionsUsedinThisBook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
DevelopmentEnvironment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
TheBasicsofAngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
HowWebPagesGettoYourBrowser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
WhatIsaBrowser? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
WhatIsAngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
DataBindingandYourFirstAngularJSWebApplication . . . . . . . . . . . . . . . . . . 10
IntroducingDataBindinginAngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
SimpleDataBinding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
BestDataBindingPractices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Scopes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
The$scopeViewoftheWorld . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
It’sJustHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
WhatCanScopesDo? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
$scopeLifecycle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
DirectivesandScopes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
ControllerHierarchy(ScopesWithinScopes) . . . . . . . . . . . . . . . . . . . . . . . . . 27
Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
InterpolatingaString . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
CONTENTS
Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
MakingOurOwnFilter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
FormValidation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
IntroductiontoDirectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Directives:CustomHTMLElementsandAttributes . . . . . . . . . . . . . . . . . . . . . 61
PassingDataintoaDirective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Built-InDirectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
BasicngAttributeDirectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
DirectiveswithChildScope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
DirectivesExplained . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
DirectiveDefinition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
DirectiveScope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
AngularJSLifeCycle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
ngModel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
AngularModuleLoading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Configuration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
RunBlocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
MultipleViewsandRouting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
LayoutTemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
$locationService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
RoutingModes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
OtherAdvancedRoutingTopics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
DependencyInjection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
AnnotationbyInference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
ExplicitAnnotation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
InlineAnnotation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
$injectAPI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
ngMin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
RegisteringaService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
UsingServices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
OptionsforCreatingServices. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
CommunicatingwiththeOutsideWorld:XHRandServer-SideCommunication . . . . . 173
Using$http . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
ConfigurationObject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
CONTENTS
ResponseObject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
CachingHTTPRequests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Interceptors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Configuringthe$httpProvider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Using$resource . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Using$resource . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Custom$resourceMethods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
$resourceConfigurationObject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
$resourceServices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
UsingRestangular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
TheWhatandtheWhy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
IntrototheRestangularObject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
UsingRestangular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
ConfiguringRestangular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
XHRinPractice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Cross-OriginandSame-OriginPolicy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
JSONP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
UsingCORS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Server-SideProxies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
WorkingwithJSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
WorkingwithXML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
AuthenticationwithAngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
TalkingtoMongoDB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Promises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
What’saPromise? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
WhyPromises? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
PromisesinAngular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
ChainingRequests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
ServerCommunication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
CustomServer-Side . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
InstallNodeJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
InstallExpress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
CallingAPIs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Server-lesswithAmazonAWS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
AWSJS+Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
GettingStarted . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
CONTENTS
Running . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
UserAuthorization/Authentication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
UserService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
AllAboardAWS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
AWSService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
StartingonDynamo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
$cacheFactory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
SavingOurcurrentUser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
UploadingtoS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
HandlingFileUploads . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
QueryingDynamo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
ShowingtheListinginHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
SellingOurWork . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
UsingStripe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
Server-lesswithFirebase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
Three-WayDataBindingWithFirebaseandAngular . . . . . . . . . . . . . . . . . . . . . 283
GettingStartedWithAngularFire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
OrderinginAngularFire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
FirebaseEvents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
ImplicitSynchronization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
AuthenticationwithAngularFire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
AuthenticationEvents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
BeyondAngularFire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
WhyTest? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
TestingStrategies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
GettingStartedTesting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
TypesofAngularJSTests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
GettingStarted . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298
InitializingKarmaConfigFile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
ConfigurationOptions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
UsingRequireJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Jasmine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312
Expectations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
End-to-EndIntroduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320
MockingandTestHelpers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331
Mockingthe$httpBackend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332
TestinganApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340
TestingEvents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363
ContinuousIntegrationforAngular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365
Protractor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365
Configuration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
CONTENTS
ConfigurationOptions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
WritingTests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370
PageObjects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371
Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373
WhatareEvents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373
EventPropagation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373
Listening . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375
EventObject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376
CoreServicesRidingonEvents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376
Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379
DirectoryStructure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379
Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380
Controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382
Directives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384
Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384
AngularAnimation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386
Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386
HowItWorks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387
UsingCSS3Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388
UsingCSS3Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390
StaggeringCSSTransitions/Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . 392
UsingJavaScriptAnimations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394
Fine-tuninganimations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395
AnimatingBuilt-InDirectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395
BuildingCustomAnimations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416
IntegratingwithThird-PartyLibraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423
TheDigestLoopand$apply . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426
$watchList . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427
DirtyChecking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427
$watch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428
$watchCollection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430
The$digestLoopinaPage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431
$evalAsyncList . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 432
$apply . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433
WhentoUse$apply() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434
DemystifyingAngular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436
HowtheViewWorks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437
EssentialAngularJSExtensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440
CONTENTS
AngularUI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440
Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440
ui-router . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440
ui-utils . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453
MobileApps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458
ResponsiveWebApps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458
Interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458
NativeApplicationswithCordova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
GettingStartedwithCordova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466
IncludingAngular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474
BuildingwithYeoman . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474
Localization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482
angular-translate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482
Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482
TeachingYourAppaNewLanguage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483
Multi-languageSupport . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 485
SwitchingtheLanguageatRunTime . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 486
LoadingLanguages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 487
angular-gettext . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489
Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489
Usage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489
StringExtraction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491
TranslatingOurStrings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493
CompilingOurNewLanguage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495
ChangingLanguages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496
Caching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 498
WhatIsaCache? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 498
AngularCaching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 498
Cachingthrough$http . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500
SettingDefaultCachefor$http . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501
Security . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503
StrictContextualEscaping:the$sceService . . . . . . . . . . . . . . . . . . . . . . . . . . 503
WhitelistingURLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 506
BlacklistingURLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 507
$sceAPI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 508
Configuring$sce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510
TrustedContextTypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510
AngularJSandInternetExplorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 512
AjaxCaching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 514
CONTENTS
SEOwithAngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 514
GettingAngularAppsIndexed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 515
ServerSide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 515
OptionsforHandlingSEOfromtheServerSide . . . . . . . . . . . . . . . . . . . . . . . . 516
TakingSnapshots . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 519
UsingZombie.jstoGrabHTMLSnapshots . . . . . . . . . . . . . . . . . . . . . . . . . . 519
Usinggrunt-html-snapshot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 522
Prerender.io . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 523
<noscript>Approach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524
BuildingAngularChromeApps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 525
UnderstandingChromeApps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 525
BuildingourChromeApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 526
BuildingtheSkeleton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 527
manifest.json . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 528
tab.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 528
LoadingtheAppinChrome . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 530
TheMainModule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 530
BuildingtheHomePage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 531
SignUpforWunderground’sWeatherAPI . . . . . . . . . . . . . . . . . . . . . . . . . . 533
ASettingsScreen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 538
ImplementingaUserService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 540
CityAutofill/Autocomplete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544
SprinklinginTimeZoneSupport . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 547
OptimizingAngularApps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551
WhattoOptimize . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551
Optimizingthe$digestLoop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551
Optimizingng-repeat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554
Optimizingthe$digestCall . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554
Optimizing$watchFunctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554
OptimizingFilters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 559
TipsforOptimizingPageLoad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 561
DebuggingAngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563
DebuggingfromtheDOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563
Debugger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 565
AngularBatarang . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 565
NextSteps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569
jqLiteandjQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569
EssentialToolstoKnowAbout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 571
Grunt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 571
grunt-angular-templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 575
Description:Ready to master AngularJS? What if you could master the entire framework – with solid foundations – in less time without beating your head against a wall? Imagine how quickly you could work if you knew the best practices and the best tools? Stop wasting your time searching and have everything yo
