Contents Introduction. Foreword . Admowledgments About the Author About This Book Organization of This Book Additional Resources : ‘Conventions Used in This Book Development Environment The Basics of AngularJs . How Web Pages Get to Your Browser . ‘What Is a Browser? ‘What Is AngularJs Data Binding and Your First AngularJS Web Application Introducing Data Binding in AngularJs Simple Data Binding . Best Data Binding Practices Modules Properties Scopes veces The $scope View of the World . It’s Just HTML ‘What Can Scopes Do? sscope Lifecycle . Directives and Scopes Controllers . eee Controller Hierarchy (Scopes Within Scopes) . Expressions . Interpolating a String 10 12 16 18 19 20 20 aa 22 23 2% 25 27 31 32CONTENTS Filters Making Our Own Filter. Form Validation . Introduction to Directives Directives: Custom HTML Elements and Attributes Passing Data into a Directive Built-In Directives . Basicng Attribute Directives Directives with Child Scope Directives Explained Directive Definition Directive Scope . AngularJs Life Cycle ngModel . Angular Module Loading . Configuration Run Blocks ‘Multiple Views and Routing Installation Layout Template Routes Slocation Service Routing Modes Other Advanced Routing Topics Dependency Injection Annotation by Inference Explicit Annotation Inline Annotation Sinject API ngMin Services Registering a Service Using Services Options for Creating Services Communicating with the Outside World: XHR and Server-Side Communication . Using shttp Configuration Object 37 4“ “6 59 61 70 9 83 103 103, 110 122 127 132 132 134 136 136 137 138 142 145 48 149 151 151 182 153 155 157 158 159 163 173 173 178CONTENTS Response Object . Caching HTTP Requests Interceptors... : Configuring the shttpProvider . Using Sresource . Installation Using Sresource . Custom Sresource Methods Sresource Configuration Object Sresource Services Using Restangular .. . . ‘The What and the Why . Installation Intro to the Restangular Object Using Restangular Configuring Restangular XHR in Practice Cross-Origin and Same-Origin Policy JSONP ‘Using CORS Server-Side Proxies Working with JSON Working with XML Authentication with AngularJS . Talking to MongoDB Promises ‘What's a Promise? Why Promises? . Promises in Angular Chaining Requests Server Communication Custom Server-Side Install Nodes Install Express Calling APIs Serverless with Amazon AWS . AWSJS + Angular Getting Started Introduction Installation 180 180 182 184 185 186 186 191 192 19% 196 197 198 199 200 204 au aun aun 213 216 217 217 218 226 229 229 230 231 236 238 238 238 230 242 245 247 247 249 250CONTENTS Running . User Authorization/ Authentication UserService . . . All Aboard AWS AWSService Starting on Dynamo ScacheFactory Saving Our currentUser . Uploading to $3. Handling File Uploads Querying Dynamo . Showing the Listing in HTML Selling Our Work Using Stripe Server-less with Frebase Three-Way Data Binding With Firebase and Angular . Getting Started With AngularFire Ordering in AngularFire Firebase Events . Implicit Synchronization Authentication with AngularFire Authentication Events Beyond AngularFire Testing... ‘Why Test? Testing Strategies Getting Started Testing . ‘Types of AngularJs Tests Getting Started : Intializng Karma Config Fle. Configuration Options Using RequireJs Jasmine Expectations End-to-End Introduction Mocking and Test Helpers Mocking the snttp8ackena Testing an App Testing Events Continuous integration for Angi Protractor . Configuration 251 252 256 258 261 264 264 265 268 an 27% 275 276 278 282 283 284 288 289 290 290 21 294 295 295 295 296 296 298 302 309 312 313 320 331 332 340 363 365 365 367CONTENTS Configuration Options ‘Writing Tests Page Objects Events ‘What are Events Event Propagation Listening . Event Object Core Services Riding on Events Architecture Directory Structure Modules . Controllers Directives Testing Angular Animation Installation How It Works . Using CSS3 Transitions . Using CSS3 Animations... . . Staggering CSS Transitions / Animations ‘Using JavaScript Animations Fine-tuning animations . Animating Built-In Directives Building Custom Animations Integrating with Third-Party Libraries. ‘The Digest Loop and Sepely ‘Swatch List Dirty Checking swatch swatchCollection ‘The Sdigest Loop in a Page SevalAsync List . Sapply . . ‘When to Use Sapply() Demystifying Angular How the View Works Essential AngularJs Extensions 367 370 371 373 373 373 305 376 376 379 379 380 382 384 384 386 386 387 388 300 302 304 305 305 416 423 426 427 427 428 430 431 432 433 434 436 437 440CONTENTS AngularUl Installation uisouter . uiutils Mobile Apps Responsive Web Apps Interaction Native Applications with Cordova Getting Started with Cordova Induding Angular Building with Yeoman Localization angular-translate Installation Teaching Your App a New Language Multi-language Support... ..... Switching the Language at Run Time Loading Languages angular-gettext Installation Usage string Extraction Translating Our Strings... . . Compiling Our New Language . Changing Languages Caching. . What Isa Cache? Angular Caching : Caching through $http .... Setting Default Cache for $http . Security Strict Contextual Escaping: the Ssce Service ‘Whitelisting URLs Blacklisting URLs $sce API . Configuring $sce ‘Trusted Context Types. AngularJs and Internet Explorer Ajax Caching 440 440 440 453 458 458 458 465 466 4% 4% 482 482 482 483 485 486 487 489 489 489 41 493 495 496 498 498 498 500 501 503 503 506 507 508 510 510 512 514CONTENTS SEO with Angular]S . Getting Angular Apps Indexed . Server Side Options for Handling SEO from the Server Side Taking Snapshots . Using Zombie,js to Grab HTML Snapshots ‘Using grunt-html-snapshot . Prerender.io . Approach Building Angular Chrome Apps . Understanding Chrome Apps Building our Chrome App Building the Skeleton manifest json tabhtml ..... Loading the App in Chrome The Main Module Building the Home Page . Sign Up for Wunderground’s Weather API A Settings Screen en Implementing a User Service City Autofill/ Autocomplete Sprinkling in Time Zone Support Optimizing Angular Apps ‘What to Optimize... . Optimizing the $digest Loop Optimizing ng-repeat Optimizing the $digest Call Optimizing $watch Functions Optimizing Filters Tips for Optimizing Page Load . Debugging AngularJs Debugging from the DOM Debugger . Angular Batarang Next Steps jglite and jQuery Essential Tools to Know About . Grunt grunt-angular-templates. 514 515 515 516 519 519 522 523 524 525 525 526 527 528 528 530 530 531 533 538 540 544 947 551 551 551 554 554 554 559 561 563 563 565 565 569 569 S71 571 575CONTENTS Lineman . Bower Yeoman ..........0-- Configuring the Angular Generator Testing Our App . : Packaging Our App . . . Packaging Our Templates 580 582 586 592 592 593 594