Complete AngularJS Secrets & Tips For Professionals

Transcription

AngularJSComplete Tips & Secrets for ProfessionalsCompleteAngularJSTips & Secretsfor Professionals100 pagesof professional hints and tricksGoalKicker.comFree Programming BooksDisclaimerThis is an uno cial free book created for educational purposes and isnot a liated with o cial AngularJS group(s) or company(s).All trademarks and registered trademarks arethe property of their respective owners

ContentsAbout . 1Chapter 1: Getting started with AngularJS . 2Section 1.1: Getting Started . 5Section 1.2: Showcasing all common Angular constructs . 6Section 1.3: The importance of scope . 8Section 1.4: Minification in Angular . 9Section 1.5: AngularJS Getting Started Video Tutorials . 10Section 1.6: The Simplest Possible Angular Hello World. . 10Chapter 2: Controllers . 11Section 2.1: Your First Controller . 11Section 2.2: Creating Controllers, Minification safe . 13Section 2.3: Using ControllerAs in Angular JS . 14Section 2.4: Creating Minification-Safe Angular Controllers . 15Section 2.5: Creating Controllers . 15Section 2.6: Nested Controllers . 15Chapter 3: Built-in directives . 16Section 3.1: Angular expressions - Text vs. Number . 16Section 3.2: ngIf . 17Section 3.3: ngCloak . 18Section 3.4: ngRepeat . 18Section 3.5: Built-In Directives Cheat Sheet . 21Section 3.6: ngInclude . 22Section 3.7: ng-model-options . 23Section 3.8: ngCopy . 23Section 3.9: ngPaste . 23Section 3.10: ngClick . 24Section 3.11: ngList . 24Section 3.12: ngOptions . 25Section 3.13: ngSrc . 27Section 3.14: ngModel . 27Section 3.15: ngClass . 28Section 3.16: ngDblclick . 28Section 3.17: ngHref . 28Section 3.18: ngPattern . 29Section 3.19: ngShow and ngHide . 29Section 3.20: ngRequired . 30Section 3.21: ngMouseenter and ngMouseleave . 30Section 3.22: ngDisabled . 31Section 3.23: ngValue . 31Chapter 4: Modules . 31Section 4.1: Modules . 31Section 4.2: Modules . 32Chapter 5: Components . 33Section 5.1: Basic Components and LifeCycle Hooks . 33Section 5.2: Components In angular JS . 35Chapter 6: Custom Directives . 35Section 6.1: Creating and consuming custom directives . 36

Section 6.2: Directive Definition Object Template . 38Section 6.3: How to create resuable component using directive . 39Section 6.4: Basic Directive example . 40Section 6.5: Directive decorator . 41Section 6.6: Basic directive with template and an isolated scope . 42Section 6.7: Building a reusable component . 43Section 6.8: Directive inheritance and interoperability . 44Chapter 7: Filters . 44Section 7.1: Accessing a filtered list from outside an ng-repeat . 44Section 7.2: Custom filter to remove values . 45Section 7.3: Custom filter to format values . 45Section 7.4: Using filters in a controller or service . 45Section 7.5: Performing filter in a child array . 46Chapter 8: Services . 47Section 8.1: Creating a service using angular.factory . 47Section 8.2: Di erence between Service and Factory . 48Section 8.3: sce - sanitize and render content and resources in templates . 50Section 8.4: How to create a Service . 50Section 8.5: How to use a service . 51Section 8.6: How to create a Service with dependencies using 'array syntax' . 51Section 8.7: Registering a Service . 52Chapter 9: Dependency Injection . 52Section 9.1: Dynamic Injections . 53Section 9.2: Dynamically load AngularJS service in vanilla JavaScript . 53Chapter 10: Unit tests . 53Section 10.1: Unit test a component (1.5 ) . 53Section 10.2: Unit test a filter . 54Section 10.3: Unit test a service . 55Section 10.4: Unit test a controller . 55Section 10.5: Unit test a directive . 56Chapter 11: Profiling and Performance . 57Section 11.1: 7 Simple Performance Improvements . 57Section 11.2: Bind Once . 60Section 11.3: ng-if vs ng-show . 60Section 11.4: Watchers . 61Section 11.5: Always deregister listeners registered on other scopes other than the current scope . 63Section 11.6: Scope functions and filters . 63Section 11.7: Debounce Your Model . 64Chapter 12: Events . 64Section 12.1: Using angular event system . 64Section 12.2: Always deregister rootScope. on listeners on the scope destory event . 66Section 12.3: Uses and significance . 67Chapter 13: Sharing Data . 68Section 13.1: Using ngStorage to share data . 68Section 13.2: Sharing data from one controller to another using service . 69Chapter 14: How data binding works . 70Section 14.1: Data Binding Example . 70Chapter 15: Routing using ngRoute . 71Section 15.1: Basic example . 71

Section 15.2: Defining custom behavior for individual routes . 72Section 15.3: Route parameters example . 73Chapter 16: ng-class directive . 75Section 16.1: Three types of ng-class expressions . 75Chapter 17: Directives using ngModelController . 76Section 17.1: A simple control: rating . 76Section 17.2: A couple of complex controls: edit a full object . 78Chapter 18: ui-router . 80Section 18.1: Basic Example . 80Section 18.2: Multiple Views . 81Section 18.3: Using resolve functions to load data . 83Section 18.4: Nested Views / States . 84Chapter 19: Custom filters . 85Section 19.1: Use a filter in a controller, a service or a filter . 85Section 19.2: Create a filter with parameters . 85Section 19.3: Simple filter example . 85Chapter 20: Built-in helper Functions . 86Section 20.1: angular.equals . 86Section 20.2: angular.toJson . 86Section 20.3: angular.copy . 87Section 20.4: angular.isString . 87Section 20.5: angular.isArray . 87Section 20.6: angular.merge . 88Section 20.7: angular.isDefined and angular.isUndefined . 88Section 20.8: angular.isDate . 89Section 20.9: angular.noop . 89Section 20.10: angular.isElement . 89Section 20.11: angular.isFunction . 90Section 20.12: angular.identity . 90Section 20.13: angular.forEach . 90Section 20.14: angular.isNumber . 91Section 20.15: angular.isObject . 91Section 20.16: angular.fromJson . 91Chapter 21: digest loop walkthrough . 92Section 21.1: digest and watch . 92Section 21.2: the scope tree . 93Section 21.3: two way data binding . 94Chapter 22: Angular scopes . 94Section 22.1: A function available in the entire app . 94Section 22.2: Avoid inheriting primitive values . 95Section 22.3: Basic Example of scope inheritance . 95Section 22.4: How can you limit the scope on a directive and why would you do this? . 96Section 22.5: Using scope functions . 97Section 22.6: Creating custom scope events . 97Chapter 23: AngularJS gotchas and traps . 98Section 23.1: Things to do when using html5Mode . 98Section 23.2: Two-way data binding stops working . 99Section 23.3: 7 Deadly Sins of AngularJS . 100Chapter 24: Using AngularJS with TypeScript . 103

Section 24.1: Using Bundling / Minification . 103Section 24.2: Angular Controllers in Typescript . 104Section 24.3: Using the Controller with ControllerAs Syntax . 105Section 24.4: Why ControllerAs Syntax ? . 105Chapter 25: http request . 107Section 25.1: Timing of an http request . 107Section 25.2: Using http inside a controller . 108Section 25.3: Using http request in a service . 108Chapter 26: Constants . 109Section 26.1: Create your first constant . 109Section 26.2: Use cases . 110Chapter 27: Form Validation . 111Section 27.1: Form and Input States . 111Section 27.2: CSS Classes . 111Section 27.3: Basic Form Validation . 112Section 27.4: Custom Form Validation . 112Section 27.5: Async validators . 113Section 27.6: ngMessages . 113Section 27.7: Nested Forms . 114Chapter 28: Angular promises with q service . 114Section 28.1: Wrap simple value into a promise using q.when() . 114Section 28.2: Using angular promises with q service . 115Section 28.3: Using the q constructor to create promises . 117Section 28.4: Avoid the q Deferred Anti-Pattern . 118Section 28.5: Using q.all to handle multiple promises . 118Section 28.6: Deferring operations using q.defer . 119Chapter 29: Prepare for Production - Grunt . 120Section 29.1: View preloading . 120Section 29.2: Script optimisation . 121Chapter 30: Debugging . 123Section 30.1: Using ng-inspect chrome extension . 123Section 30.2: Getting the Scope of element . 125Section 30.3: Basic debugging in markup . 125Chapter 31: Providers . 126Section 31.1: Provider . 126Section 31.2: Factory . 127Section 31.3: Constant . 127Section 31.4: Service . 128Section 31.5: Value . 128Chapter 32: Decorators . 128Section 32.1: Decorate service, factory . 129Section 32.2: Decorate directive .

AngularJS AngularJSComplete Tips & Secrets for ProfessionalsComplete Tips & Secrets for Professionals Disclaimer This is an uno cial free book created for educational purposes and is not a liated with