Mastering Web Application

Table of contents

- Cover (Page 1)
- Copyright (Page 3)
- Credits (Page 4)
- About the Authors (Page 5)
- Acknowledgments (Page 6)
- About the Authors (Page 8)
- About the Reviewers (Page 9)
- www.PacktPub.com (Page 10)
- Table of Contents (Page 12)
- Preface (Page 22)
- Chapter 1: Angular Zen (Page 28)
- Meet AngularJS (Page 29)
- Getting familiar with the framework (Page 29)
- Finding your way in the project (Page 29)
- The community (Page 30)
- Online learning resources (Page 30)
- Libraries and extensions (Page 30)
- Tools (Page 30)
- Batarang (Page 31)
- Plunker and jsFiddle (Page 31)
- IDE extensions and plugins (Page 31)
- AngularJS crash course (Page 31)
- Hello World – the AngularJS example (Page 31)
- Two-way data binding (Page 33)
- The MVC pattern in AngularJS (Page 33)
- Bird's eye view (Page 34)
- Scopes in depth (Page 36)
- View (Page 42)
- Modules and dependency injection (Page 47)
- Modules in AngularJS (Page 47)
- Collaborating objects (Page 48)
- Registering services (Page 50)
- Modules lifecycle (Page 54)
- Modules depending on other modules (Page 56)
- AngularJS and the rest of the world (Page 59)
- jQuery and AngularJS (Page 60)
- Apples and oranges (Page 61)
- A sneak peek into the future (Page 62)
- Summary (Page 62)
- Chapter 2: Building and Testing (Page 64)
- Introducing the sample application (Page 65)
- Getting familiar with the problem domain (Page 65)
- Technical stack (Page 66)
- Persistence store (Page 67)
- MongoLab (Page 67)
- Server-side environment (Page 68)
- Third-party JavaScript libraries (Page 69)
- Bootstrap CSS (Page 69)
- Build system (Page 69)
- Build system principles (Page 70)
- Automate everything (Page 70)
- Fail fast, fail clean (Page 70)
- Different workflows, different commands (Page 71)
- Build scripts are code too (Page 71)
- Tools (Page 71)
- Grunt.js (Page 72)
- Testing libraries and tools (Page 72)
- Jasmine (Page 72)
- Karma runner (Page 73)
- Organizing files and folders (Page 73)
- Root folders (Page 73)
- Inside the source folder (Page 75)
- AngularJS specific files (Page 75)
- Start simple (Page 77)
- Inside the test folder (Page 78)
- File-naming conventions (Page 78)
- AngularJS modules and files (Page 78)
- One file, one module (Page 79)
- Inside a module (Page 80)
- Different syntax for registering providers (Page 80)
- Syntax for declaring the configure and run blocks (Page 82)
- Automated testing (Page 83)
- Unit tests (Page 84)
- Anatomy of a Jasmine test (Page 85)
- Testing AngularJS objects (Page 86)
- Testing services (Page 86)
- Testing controllers (Page 88)
- Mock objects and asynchronous code testing (Page 89)
- End-to-end tests (Page 91)
- Daily workflow (Page 92)
- Karma runner tips and tricks (Page 93)
- Executing a subset of tests (Page 94)
- Debugging (Page 94)
- Summary (Page 95)
- Chapter 3: Communicating with
a Back-end Server (Page 96)
- Making XHR and JSONP requests with $http (Page 96)
- Getting familiar with the data model and MongoLab URLs (Page 97)
- $http APIs quick tour (Page 97)
- The configuration object primer (Page 98)
- Request data conversion (Page 99)
- Dealing with HTTP responses (Page 100)
- Response data conversion (Page 100)
- Dealing with same-origin policy restrictions (Page 100)
- Overcoming same-origin policy restrictions with JSONP (Page 101)
- JSONP limitations (Page 102)
- Overcoming same-origin policy restrictions with CORS (Page 102)
- Server-side proxies (Page 104)
- The promise API with $q (Page 105)
- Working with promises and the $q service (Page 106)
- Learning $q service basics (Page 106)
- Promises are first-class JavaScript objects (Page 108)
- Aggregating callbacks (Page 109)
- Registering callbacks and the promise lifecycle (Page 109)
- Asynchronous action chaining (Page 110)
- More on $q (Page 112)
- $q integration in AngularJS (Page 114)
- The promise API with $http (Page 115)
- Communicating with RESTful endpoints (Page 116)
- The $resource service (Page 116)
- Constructor-level and instance-level methods (Page 118)
- $resource creates asynchronous methods (Page 121)
- Limitations of the $resource service (Page 122)
- Custom REST adapters with $http (Page 122)
- Using advanced features of $http (Page 125)
- Intercepting responses (Page 125)
- Testing code that interacts with $http (Page 127)
- Summary (Page 129)
- Chapter 4: Displaying and
Formatting Data (Page 130)
- Referencing directives (Page 130)
- Displaying results of expression evaluation (Page 131)
- The interpolation directive (Page 131)
- Rendering model values with ngBind (Page 132)
- HTML content in AngularJS expressions (Page 132)
- Conditional display (Page 133)
- Including blocks of content conditionally (Page 135)
- Rendering collections with the
ngRepeat directive (Page 135)
- Getting familiar with the ngRepeat directive (Page 136)
- Special variables (Page 136)
- Iterating over an object's properties (Page 137)
- ngRepeat patterns (Page 138)
- Lists and details (Page 138)
- Altering tables, rows, and classes (Page 140)
- DOM event handlers (Page 141)
- Working effectively with DOM-based templates (Page 142)
- Living with verbose syntax (Page 142)
- ngRepeat and multiple DOM elements (Page 143)
- Elements and attributes that can't be modified at runtime (Page 144)
- Custom HTML elements and
older versions of IE (Page 145)
- Handling model transformations
with filters (Page 145)
- Working with built-in filters (Page 146)
- Formatting filters (Page 146)
- Array-transforming filters (Page 146)
- Writing custom filters – a pagination example (Page 152)
- Accessing filters from the JavaScript code (Page 154)
- Filters dos and don'ts (Page 155)
- Filters and DOM manipulation (Page 156)
- Costly data transformations in filters (Page 157)
- Unstable filters (Page 157)
- Summary (Page 159)
- Chapter 5: Creating Advanced Forms (Page 160)
- Comparing traditional forms with AngularJS forms (Page 160)
- Introducing the ngModel directive (Page 162)
- Creating a User Information Form (Page 163)
- Understanding the input directives (Page 164)
- Adding the required validation (Page 164)
- Using text-based inputs (text, textarea, e-mail, URL, number) (Page 164)
- Using checkbox inputs (Page 165)
- Using radio inputs (Page 166)
- Using select inputs (Page 166)
- Providing simple string options (Page 166)
- Providing dynamic options with the ngOptions directive (Page 167)
- Using empty options with the select directive (Page 169)
- Understanding select and object equivalence (Page 170)
- Selecting multiple options (Page 171)
- Working with traditional HTML hidden input fields (Page 171)
- Embedding values from the server (Page 171)
- Submitting a traditional HTML form (Page 172)
- Looking inside ngModel data binding (Page 172)
- Understanding ngModelController (Page 172)
- Transforming the value between the model and the view (Page 173)
- Tracking whether the value has changed (Page 173)
- Tracking input field validity (Page 174)
- Validating AngularJS forms (Page 174)
- Understanding ngFormController (Page 174)
- Using the name attribute to attach forms
to the scope (Page 175)
- Adding dynamic behavior to the User Information Form (Page 175)
- Showing validation errors (Page 176)
- Disabling the save button (Page 177)
- Disabling native browser validation (Page 178)
- Nesting forms in other forms (Page 178)
- Using subforms as reusable components (Page 178)
- Repeating subforms (Page 179)
- Validating repeated inputs (Page 180)
- Handling traditional HTML form submission (Page 182)
- Submitting forms directly to the server (Page 182)
- Handling form submission events (Page 182)
- Using ngSubmit to handle form submission (Page 183)
- Using ngClick to handle form submission (Page 183)
- Resetting the User Info form (Page 183)
- Summary (Page 185)
- Chapter 6: Organizing Navigation (Page 186)
- URLs in single-page web applications (Page 187)
- Hashbang URLs in the pre-HTML5 era (Page 187)
- HTML5 and the history API (Page 188)
- Using the $location service (Page 189)
- Understanding the $location service
API and URLs (Page 190)
- Hashes, navigation within a page, and $anchorScroll (Page 191)
- Configuring the HTML5 mode for URLs (Page 192)
- Client side (Page 192)
- Server side (Page 192)
- Handcrafting navigation using the $location service (Page 193)
- Structuring pages around routes (Page 194)
- Mapping routes to URLs (Page 195)
- Defining controllers in route partials (Page 195)
- The missing bits in the handcrafted navigation (Page 196)
- Using built-in AngularJS routing services (Page 196)
- Basic routes definition (Page 196)
- Displaying the matched route's content (Page 197)
- Matching flexible routes (Page 198)
- Defining default routes (Page 199)
- Accessing route parameter values (Page 199)
- Reusing partials with different controllers (Page 199)
- Avoiding UI flickering on route changes (Page 200)
- Preventing route changes (Page 202)
- Limitations of the $route service (Page 203)
- One route corresponds to one rectangle on the screen (Page 204)
- Handling multiple UI rectangles with ng-include (Page 204)
- No nested routes support (Page 205)
- Routing-specific patterns, tips, and tricks (Page 206)
- Handling links (Page 206)
- Creating clickable links (Page 207)
- Working with HTML5 and hashbang mode links consistently (Page 207)
- Linking to external pages (Page 208)
- Organizing route definitions (Page 208)
- Spreading route definitions among several modules (Page 209)
- Fighting code duplication in route definitions (Page 209)
- Summary (Page 210)
- Chapter 7: Securing Your Application (Page 212)
- Providing server-side authentication and authorization (Page 213)
- Handling unauthorized access (Page 213)
- Providing a server-side authentication API (Page 213)
- Securing partial templates (Page 214)
- Stopping malicious attacks (Page 215)
- Preventing cookie snooping (man-in-the-middle attacks) (Page 215)
- Preventing cross-site scripting attacks (Page 216)
- Securing HTML content in AngularJS expressions (Page 216)
- Allowing unsafe HTML bindings (Page 217)
- Sanitizing HTML (Page 217)
- Preventing the JSON injection vulnerability (Page 218)
- Preventing cross-site request forgery (Page 219)
- Adding client-side security support (Page 219)
- Creating a security service (Page 220)
- Showing a login form (Page 221)
- Creating security-aware menus and toolbars (Page 222)
- Hiding the menu items (Page 222)
- Creating a login toolbar (Page 223)
- Supporting authentication and authorization on the client (Page 224)
- Handling authorization failures (Page 224)
- Intercepting responses (Page 225)
- HTTP response interceptors (Page 225)
- Creating a securityInterceptor service (Page 226)
- Creating the securityRetryQueue service (Page 228)
- Notifying the security service (Page 229)
- Preventing navigation to secure routes (Page 229)
- Using route resolve functions (Page 230)
- Creating the authorization service (Page 231)
- Summary (Page 233)
- Chapter 8: Building Your Own Directives (Page 234)
- What are AngularJS directives? (Page 235)
- Understanding the built-in directives (Page 235)
- Using directives in the HTML markup (Page 236)
- Following the directive compilation
life-cycle (Page 236)
- Writing unit tests for directives (Page 238)
- Defining a directive (Page 239)
- Styling buttons with directives (Page 240)
- Writing a button directive (Page 241)
- Understanding AngularJS widget directives (Page 243)
- Writing a pagination directive (Page 243)
- Writing tests for the pagination directive (Page 244)
- Using an HTML template in a directive (Page 245)
- Isolating our directive from its parent scope (Page 246)
- Interpolating the attribute with @ (Page 247)
- Binding data to the attribute with = (Page 248)
- Providing a callback expression in the
attribute with & (Page 248)
- Implementing the widget (Page 249)
- Adding a selectPage callback to the directive (Page 250)
- Creating a custom validation directive (Page 251)
- Requiring a directive controller (Page 252)
- Making the controller optional (Page 252)
- Searching for parents for the controller (Page 253)
- Working with ngModelController (Page 253)
- Writing custom validation directive tests (Page 254)
- Implementing a custom validation directive (Page 256)
- Creating an asynchronous model validator (Page 256)
- Mocking up the Users service (Page 257)
- Writing tests for asynchronous validation (Page 258)
- Implementing the asynchronous validation directive (Page 259)
- Wrapping the jQueryUI
datepicker directive (Page 260)
- Writing tests for directives that wrap libraries (Page 261)
- Implementing the jQuery datepicker directive (Page 263)
- Summary (Page 264)
- Chapter 9: Building Advanced Directives (Page 266)
- Using transclusion (Page 266)
- Using transclusion in directives (Page 266)
- Transcluding into an isolated scope directive (Page 267)
- Creating an alert directive that uses transclusion (Page 267)
- Understanding the replace property in the directive definition (Page 268)
- Understanding the transclude property in the directive definition (Page 269)
- Inserting the transcluded elements with ng-transclude (Page 269)
- Understanding the scope of transclusion (Page 269)
- Creating and working with transclusion functions (Page 271)
- Creating a transclusion function with the $compile service (Page 272)
- Cloning the original elements when transcluding (Page 272)
- Accessing transclusion functions in directives (Page 273)
- Getting the transclusion function in the compile function with transcludeFn (Page 273)
- Getting the transclusion function in the directive controller with $transclude (Page 274)
- Creating an if directive that uses transclusion (Page 274)
- Using the priority property in a directive (Page 276)
- Understanding directive controllers (Page 277)
- Injecting special dependencies into directive controllers (Page 278)
- Creating a controller-based pagination directive (Page 279)
- Understanding the difference between directive controllers and link functions (Page 279)
- Injecting dependencies (Page 280)
- The compilation process (Page 280)
- Accessing other controllers (Page 281)
- Accessing the transclusion function (Page 282)
- Creating an accordion directive suite (Page 282)
- Using a directive controller in accordion (Page 283)
- Implementing the accordion directive (Page 284)
- Implementing the accordion-group directive (Page 284)
- Taking control of the compilation process (Page 286)
- Creating a field directive (Page 286)
- Using the terminal property in directives (Page 288)
- Using the $interpolate service (Page 289)
- Binding to validation messages (Page 290)
- Loading templates dynamically (Page 290)
- Setting up the field template (Page 291)
- Summary (Page 292)
- Chapter 10: Building AngularJS Web Applications for an International Audience (Page 294)
- Using locale-specific symbols and settings (Page 295)
- Configuring locale-specific modules (Page 295)
- Making use of available locale settings (Page 296)
- Locale-specific settings and AngularJS filters (Page 296)
- Handling translations (Page 297)
- Handling translated strings used in AngularJS templates (Page 298)
- Using filters (Page 299)
- Using directives (Page 300)
- Handling translated strings used in the JavaScript code (Page 301)
- Patterns, tips, and tricks (Page 303)
- Initializing applications for a given locale (Page 303)
- Consequences of including locales as part of URLs (Page 304)
- Switching locales (Page 305)
- Custom formatting for dates, numbers, and currencies (Page 306)
- Summary (Page 308)
- Chapter 11: Writing Robust AngularJS Web Applications (Page 310)
- Understanding the inner workings of AngularJS (Page 311)
- It is not a string-based template engine (Page 311)
- Updating models in response to DOM events (Page 312)
- Propagating model changes to the DOM (Page 312)
- Synchronizing DOM and model (Page 313)
- Scope.$apply – a key to the AngularJS world (Page 314)
- Putting it all together (Page 321)
- Performance tuning – set expectations, measure, tune, and repeat (Page 322)
- Performance tuning of AngularJS applications (Page 324)
- Optimizing CPU utilization (Page 324)
- Speeding up $digest loops (Page 324)
- Entering the $digest loop less frequently (Page 331)
- Limit the number of turns per $digest loop (Page 333)
- Optimizing memory consumption (Page 333)
- Avoid deep-watching whenever possible (Page 333)
- Consider the size of expressions being watched (Page 335)
- The ng-repeat directive (Page 335)
- Collection watching in ng-repeat (Page 335)
- Many bindings made easy (Page 336)
- Summary (Page 336)
- Chapter 12: Packaging and Deploying AngularJS Web Applications (Page 338)
- Improving network-related performance (Page 339)
- Minifying static resources (Page 339)
- How does AngularJS infer dependencies? (Page 339)
- Writing minification-safe JavaScript code (Page 340)
- The pitfalls of array-style DI annotations (Page 343)
- Preloading templates (Page 344)
- Using the