AngularJS Notes For Professionals - Huihoo

Transcription

AngularJSAngularJSNotes for ProfessionalsNotes for 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 . 12Section 2.1: Your First Controller . 12Section 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 . 16Section 2.6: Nested Controllers . 16Chapter 3: Built-in directives . 17Section 3.1: Angular expressions - Text vs. Number . 17Section 3.2: ngIf . 17Section 3.3: ngCloak . 18Section 3.4: ngRepeat . 19Section 3.5: Built-In Directives Cheat Sheet . 22Section 3.6: ngInclude . 23Section 3.7: ng-model-options . 23Section 3.8: ngCopy . 24Section 3.9: ngPaste . 24Section 3.10: ngClick . 25Section 3.11: ngList . 25Section 3.12: ngOptions . 26Section 3.13: ngSrc . 28Section 3.14: ngModel . 28Section 3.15: ngClass . 29Section 3.16: ngDblclick . 29Section 3.17: ngHref . 30Section 3.18: ngPattern . 30Section 3.19: ngShow and ngHide . 31Section 3.20: ngRequired . 31Section 3.21: ngMouseenter and ngMouseleave . 32Section 3.22: ngDisabled . 32Section 3.23: ngValue . 32Chapter 4: Modules . 34Section 4.1: Modules . 34Section 4.2: Modules . 34Chapter 5: Components . 36Section 5.1: Basic Components and LifeCycle Hooks . 36Section 5.2: Components In angular JS . 38Chapter 6: Custom Directives . 40Section 6.1: Creating and consuming custom directives . 41

Section 6.2: Directive Definition Object Template . 42Section 6.3: How to create resuable component using directive . 43Section 6.4: Basic Directive example . 45Section 6.5: Directive decorator . 45Section 6.6: Basic directive with template and an isolated scope . 46Section 6.7: Building a reusable component . 47Section 6.8: Directive inheritance and interoperability . 48Chapter 7: Filters . 50Section 7.1: Accessing a filtered list from outside an ng-repeat . 50Section 7.2: Custom filter to remove values . 50Section 7.3: Custom filter to format values . 50Section 7.4: Using filters in a controller or service . 51Section 7.5: Performing filter in a child array . 51Chapter 8: Services . 53Section 8.1: Creating a service using angular.factory . 53Section 8.2: Di erence between Service and Factory . 53Section 8.3: sce - sanitize and render content and resources in templates . 56Section 8.4: How to create a Service . 56Section 8.5: How to use a service . 57Section 8.6: How to create a Service with dependencies using 'array syntax' . 57Section 8.7: Registering a Service . 58Chapter 9: Dependency Injection . 59Section 9.1: Dynamic Injections . 59Section 9.2: Dynamically load AngularJS service in vanilla JavaScript . 59Chapter 10: Events . 60Section 10.1: Using angular event system . 60Section 10.2: Always deregister rootScope. on listeners on the scope destory event . 62Section 10.3: Uses and significance . 62Chapter 11: Sharing Data . 65Section 11.1: Using ngStorage to share data . 65Section 11.2: Sharing data from one controller to another using service . 65Chapter 12: Constants . 67Section 12.1: Create your first constant . 67Section 12.2: Use cases . 67Chapter 13: How data binding works . 69Section 13.1: Data Binding Example . 69Chapter 14: Form Validation . 71Section 14.1: Form and Input States . 71Section 14.2: CSS Classes . 71Section 14.3: Basic Form Validation . 71Section 14.4: Custom Form Validation . 72Section 14.5: Async validators . 73Section 14.6: ngMessages . 73Section 14.7: Nested Forms . 74Chapter 15: Routing using ngRoute . 75Section 15.1: Basic example . 75Section 15.2: Defining custom behavior for individual routes . 76Section 15.3: Route parameters example . 77Chapter 16: ng-class directive . 79

Section 16.1: Three types of ng-class expressions . 79Chapter 17: ng-repeat . 81Section 17.1: ng-repeat-start ng-repeat-end . 81Section 17.2: Iterating over object properties . 81Section 17.3: Tracking and Duplicates . 82Chapter 18: ng-style . 83Section 18.1: Use of ng-style . 83Chapter 19: ng-view . 84Section 19.1: Registration navigation . 84Section 19.2: ng-view . 84Chapter 20: AngularJS bindings options ( , @ , & etc.) . 86Section 20.1: Bind optional attribute . 86Section 20.2: @ one-way binding, attribute binding . 86Section 20.3: two-way binding . 86Section 20.4: & function binding, expression binding . 87Section 20.5: Available binding through a simple sample . 87Chapter 21: Directives using ngModelController . 88Section 21.1: A simple control: rating . 88Section 21.2: A couple of complex controls: edit a full object . 90Chapter 22: Providers . 93Section 22.1: Provider . 93Section 22.2: Factory . 93Section 22.3: Constant . 94Section 22.4: Service . 94Section 22.5: Value . 95Chapter 23: Decorators . 96Section 23.1: Decorate service, factory . 96Section 23.2: Decorate directive . 96Section 23.3: Decorate filter . 97Chapter 24: Print . 98Section 24.1: Print Service . 98Chapter 25: ui-router . 100Section 25.1: Basic Example . 100Section 25.2: Multiple Views . 101Section 25.3: Using resolve functions to load data . 102Section 25.4: Nested Views / States . 103Chapter 26: Custom filters . 105Section 26.1: Use a filter in a controller, a service or a filter . 105Section 26.2: Create a filter with parameters . 105Section 26.3: Simple filter example . 105Chapter 27: Built-in helper Functions . 107Section 27.1: angular.equals . 107Section 27.2: angular.toJson . 107Section 27.3: angular.copy . 108Section 27.4: angular.isString . 108Section 27.5: angular.isArray . 108Section 27.6: angular.merge . 109Section 27.7: angular.isDefined and angular.isUndefined . 109Section 27.8: angular.isDate . 110

Section 27.9: angular.noop . 110Section 27.10: angular.isElement . 110Section 27.11: angular.isFunction . 111Section 27.12: angular.identity . 111Section 27.13: angular.forEach . 112Section 27.14: angular.isNumber . 112Section 27.15: angular.isObject . 112Section 27.16: angular.fromJson . 113Chapter 28: digest loop walkthrough . 114Section 28.1: digest and watch . 114Section 28.2: the scope tree . 114Section 28.3: two way data binding . 115Chapter 29: Angular scopes . 117Section 29.1: A function available in the entire app . 117Section 29.2: Avoid inheriting primitive values . 117Section 29.3: Basic Example of scope inheritance . 118Section 29.4: How can you limit the scope on a directive and why would you do this? . 118Section 29.5: Using scope functions . 119Section 29.6: Creating custom scope events . 120Chapter 30: Using AngularJS with TypeScript . 122Section 30.1: Using Bundling / Minification . 122Section 30.2: Angular Controllers in Typescript . 122Section 30.3: Using the Controller with ControllerAs Syntax . 124Section 30.4: Why ControllerAs Syntax? . 124Chapter 31: http request . 126Section 31.1: Timing of an http request . 126Section 31.2: Using http inside a controller . 126Section 31.3: Using http request in a service . 127Chapter 32: Angular promises with q service . 129Section 32.1: Wrap simple value into a promise using q.when() . 129Section 32.2: Using angular promises with q service . 129Section 32.3: Using the q constructor to create promises . 131Section 32.4: Avoid the q Deferred Anti-Pattern . 132Section 32.5: Using q.all to handle multiple promises . 133Section 32.6: Deferring operations using q.defer . 134Chapter 33: Prepare for Production - Grunt . 135Section 33.1: View preloading . 135Section 33.2: Script optimisation . 136Chapter 34: Grunt tasks . 138Section 34.1: Run application locally . 138Chapter 35: Angular Project - Directory Structure . 141Section 35.1: Directory Structure .

AngularJS AngularJS Notes for Professionals Notes for Professionals GoalKicker.com Free Programming Books Disclaimer This is an uno cial free book created for educational purposes and is not a liated with o cial AngularJS group(s) or company(s). All trademarks and registered trademar