AngularJSNotesForProfessionals.pdf

(2137 KB) Pobierz
AngularJS
AngularJS
Notes for Professionals
Notes for Professionals
of professional hints and tricks
100+ pages
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 trademarks are
the property of their respective owners
Contents
About
................................................................................................................................................................................... 1
Chapter 1: Getting started with AngularJS
...................................................................................................... 2
Section 1.1: Getting Started
........................................................................................................................................... 6
Section 1.2: Showcasing all common Angular constructs
......................................................................................... 7
Section 1.3: The importance of scope
.......................................................................................................................... 8
Section 1.4: Minification in Angular
............................................................................................................................ 10
Section 1.5: AngularJS Getting Started Video Tutorials
.......................................................................................... 11
Section 1.6: The Simplest Possible Angular Hello World
.......................................................................................... 11
Chapter 2: Controllers
.............................................................................................................................................. 13
Section 2.1: Your First Controller
................................................................................................................................ 13
Section 2.2: Creating Controllers, Minification safe
................................................................................................. 14
Section 2.3: Using ControllerAs in Angular JS
.......................................................................................................... 15
Section 2.4: Creating Minification-Safe Angular Controllers
.................................................................................. 16
Section 2.5: Creating Controllers
............................................................................................................................... 17
Section 2.6: Nested Controllers
.................................................................................................................................. 17
Chapter 3: Built-in directives
................................................................................................................................ 18
Section 3.1: Angular expressions - Text vs. Number
................................................................................................ 18
Section 3.2: ngIf
........................................................................................................................................................... 18
Section 3.3: ngCloak
.................................................................................................................................................... 19
Section 3.4: ngRepeat
................................................................................................................................................. 20
Section 3.5: Built-In Directives Cheat Sheet
.............................................................................................................. 23
Section 3.6: ngInclude
................................................................................................................................................. 24
Section 3.7: ng-model-options
................................................................................................................................... 24
Section 3.8: ngCopy
.................................................................................................................................................... 25
Section 3.9: ngPaste
.................................................................................................................................................... 25
Section 3.10: ngClick
.................................................................................................................................................... 26
Section 3.11: ngList
....................................................................................................................................................... 26
Section 3.12: ngOptions
............................................................................................................................................... 27
Section 3.13: ngSrc
....................................................................................................................................................... 29
Section 3.14: ngModel
.................................................................................................................................................. 29
Section 3.15: ngClass
................................................................................................................................................... 30
Section 3.16: ngDblclick
............................................................................................................................................... 30
Section 3.17: ngHref
..................................................................................................................................................... 31
Section 3.18: ngPattern
............................................................................................................................................... 31
Section 3.19: ngShow and ngHide
.............................................................................................................................. 32
Section 3.20: ngRequired
............................................................................................................................................ 33
Section 3.21: ngMouseenter and ngMouseleave
...................................................................................................... 33
Section 3.22: ngDisabled
............................................................................................................................................ 33
Section 3.23: ngValue
.................................................................................................................................................. 34
Chapter 4: Modules
................................................................................................................................................... 35
Section 4.1: Modules
.................................................................................................................................................... 35
Section 4.2: Modules
................................................................................................................................................... 35
Chapter 5: Components
.......................................................................................................................................... 37
Section 5.1: Basic Components and LifeCycle Hooks
.............................................................................................. 37
Section 5.2: Components In angular JS
.................................................................................................................... 39
Chapter 6: Custom Directives
............................................................................................................................... 41
Section 6.1: Creating and consuming custom directives
......................................................................................... 42
Section 6.2: Directive Definition Object Template
................................................................................................... 43
Section 6.3: How to create resuable component using directive
........................................................................... 44
Section 6.4: Basic Directive example
......................................................................................................................... 46
Section 6.5: Directive decorator
................................................................................................................................. 46
Section 6.6: Basic directive with template and an isolated scope
......................................................................... 47
Section 6.7: Building a reusable component
............................................................................................................ 48
Section 6.8: Directive inheritance and interoperability
............................................................................................ 49
Chapter 7: Filters
........................................................................................................................................................ 51
Section 7.1: Accessing a filtered list from outside an ng-repeat
............................................................................ 51
Section 7.2: Custom filter to remove values
............................................................................................................. 51
Section 7.3: Custom filter to format values
.............................................................................................................. 51
Section 7.4: Using filters in a controller or service
................................................................................................... 52
Section 7.5: Performing filter in a child array
........................................................................................................... 52
Chapter 8: Services
.................................................................................................................................................... 54
Section 8.1: Creating a service using angular.factory
............................................................................................. 54
Section 8.2: Dierence between Service and Factory
............................................................................................ 54
Section 8.3: $sce - sanitize and render content and resources in templates
....................................................... 57
Section 8.4: How to create a Service
......................................................................................................................... 57
Section 8.5: How to use a service
.............................................................................................................................. 58
Section 8.6: How to create a Service with dependencies using 'array syntax'
..................................................... 58
Section 8.7: Registering a Service
.............................................................................................................................. 59
Chapter 9: Dependency Injection
....................................................................................................................... 60
Section 9.1: Dynamic Injections
.................................................................................................................................. 60
Section 9.2: Dynamically load AngularJS service in vanilla JavaScript
................................................................ 60
Chapter 10: Events
...................................................................................................................................................... 61
Section 10.1: Using angular event system
................................................................................................................. 61
Section 10.2: Always deregister $rootScope.$on listeners on the scope $destory event
.................................... 63
Section 10.3: Uses and significance
........................................................................................................................... 63
Chapter 11: Sharing Data
........................................................................................................................................ 66
Section 11.1: Using ngStorage to share data
............................................................................................................. 66
Section 11.2: Sharing data from one controller to another using service
.............................................................. 66
Chapter 12: Constants
.............................................................................................................................................. 68
Section 12.1: Create your first constant
..................................................................................................................... 68
Section 12.2: Use cases
............................................................................................................................................... 68
Chapter 13: How data binding works
................................................................................................................ 70
Section 13.1: Data Binding Example
........................................................................................................................... 70
Chapter 14: Form Validation
................................................................................................................................. 72
Section 14.1: Form and Input States
........................................................................................................................... 72
Section 14.2: CSS Classes
............................................................................................................................................ 72
Section 14.3: Basic Form Validation
........................................................................................................................... 72
Section 14.4: Custom Form Validation
....................................................................................................................... 73
Section 14.5: Async validators
.................................................................................................................................... 74
Section 14.6: ngMessages
........................................................................................................................................... 74
Section 14.7: Nested Forms
......................................................................................................................................... 75
Chapter 15: Routing using ngRoute
................................................................................................................... 76
Section 15.1: Basic example
........................................................................................................................................ 76
Section 15.2: Defining custom behavior for individual routes
................................................................................. 77
Section 15.3: Route parameters example
................................................................................................................. 78
Chapter 16: ng-class directive
.............................................................................................................................. 80
Section 16.1: Three types of ng-class expressions
.................................................................................................... 80
Chapter 17: ng-repeat
.............................................................................................................................................. 82
Section 17.1: ng-repeat-start + ng-repeat-end
......................................................................................................... 82
Section 17.2: Iterating over object properties
........................................................................................................... 82
Section 17.3: Tracking and Duplicates
....................................................................................................................... 83
Chapter 18: ng-style
.................................................................................................................................................. 84
Section 18.1: Use of ng-style
....................................................................................................................................... 84
Chapter 19: ng-view
................................................................................................................................................... 85
Section 19.1: Registration navigation
......................................................................................................................... 85
Section 19.2: ng-view
................................................................................................................................................... 85
Chapter 20: AngularJS bindings options (`=`, `@`, `&` etc.)
.................................................................... 87
Section 20.1: Bind optional attribute
.......................................................................................................................... 87
Section 20.2: @ one-way binding, attribute binding
............................................................................................... 87
Section 20.3: = two-way binding
................................................................................................................................ 87
Section 20.4: & function binding, expression binding
.............................................................................................. 88
Section 20.5: Available binding through a simple sample
...................................................................................... 88
Chapter 21: Directives using ngModelController
........................................................................................ 89
Section 21.1: A simple control: rating
.......................................................................................................................... 89
Section 21.2: A couple of complex controls: edit a full object
................................................................................. 91
Chapter 22: Providers
............................................................................................................................................... 94
Section 22.1: Provider
.................................................................................................................................................. 94
Section 22.2: Factory
.................................................................................................................................................. 94
Section 22.3: Constant
................................................................................................................................................ 95
Section 22.4: Service
................................................................................................................................................... 95
Section 22.5: Value
...................................................................................................................................................... 96
Chapter 23: Decorators
........................................................................................................................................... 97
Section 23.1: Decorate service, factory
..................................................................................................................... 97
Section 23.2: Decorate directive
................................................................................................................................ 97
Section 23.3: Decorate filter
....................................................................................................................................... 98
Chapter 24: Print
........................................................................................................................................................ 99
Section 24.1: Print Service
........................................................................................................................................... 99
Chapter 25: ui-router
.............................................................................................................................................. 101
Section 25.1: Basic Example
..................................................................................................................................... 101
Section 25.2: Multiple Views
..................................................................................................................................... 102
Section 25.3: Using resolve functions to load data
............................................................................................... 103
Section 25.4: Nested Views / States
........................................................................................................................ 104
Chapter 26: Custom filters
................................................................................................................................... 106
Section 26.1: Use a filter in a controller, a service or a filter
................................................................................. 106
Section 26.2: Create a filter with parameters
........................................................................................................ 106
Section 26.3: Simple filter example
.......................................................................................................................... 106
Chapter 27: Built-in helper Functions
............................................................................................................. 108
Section 27.1: angular.equals
..................................................................................................................................... 108
Section 27.2: angular.toJson
.................................................................................................................................... 108
Section 27.3: angular.copy
....................................................................................................................................... 109
Section 27.4: angular.isString
................................................................................................................................... 109
Section 27.5: angular.isArray
................................................................................................................................... 109
Section 27.6: angular.merge
.................................................................................................................................... 110
Section 27.7: angular.isDefined and angular.isUndefined
.................................................................................... 110
Section 27.8: angular.isDate
..................................................................................................................................... 111
Section 27.9: angular.noop
....................................................................................................................................... 111
Section 27.10: angular.isElement
.............................................................................................................................. 111
Section 27.11: angular.isFunction
.............................................................................................................................. 112
Section 27.12: angular.identity
................................................................................................................................. 112
Section 27.13: angular.forEach
................................................................................................................................. 113
Section 27.14: angular.isNumber
.............................................................................................................................. 113
Section 27.15: angular.isObject
................................................................................................................................ 113
Section 27.16: angular.fromJson
.............................................................................................................................. 114
Chapter 28: digest loop walkthrough
............................................................................................................ 115
Section 28.1: $digest and $watch
............................................................................................................................ 115
Section 28.2: the $scope tree
................................................................................................................................... 115
Section 28.3: two way data binding
........................................................................................................................ 116
Chapter 29: Angular $scopes
............................................................................................................................. 118
Section 29.1: A function available in the entire app
............................................................................................... 118
Section 29.2: Avoid inheriting primitive values
....................................................................................................... 118
Section 29.3: Basic Example of $scope inheritance
.............................................................................................. 119
Section 29.4: How can you limit the scope on a directive and why would you do this?
................................... 119
Section 29.5: Using $scope functions
...................................................................................................................... 120
Section 29.6: Creating custom $scope events
....................................................................................................... 121
Chapter 30: Using AngularJS with TypeScript
.......................................................................................... 123
Section 30.1: Using Bundling / Minification
............................................................................................................. 123
Section 30.2: Angular Controllers in Typescript
..................................................................................................... 123
Section 30.3: Using the Controller with ControllerAs Syntax
................................................................................ 125
Section 30.4: Why ControllerAs Syntax?
................................................................................................................. 125
Chapter 31: $http request
.................................................................................................................................... 127
Section 31.1: Timing of an $http request
................................................................................................................. 127
Section 31.2: Using $http inside a controller
........................................................................................................... 127
Section 31.3: Using $http request in a service
........................................................................................................ 128
Chapter 32: Angular promises with $q service
.......................................................................................... 130
Section 32.1: Wrap simple value into a promise using $q.when()
........................................................................ 130
Section 32.2: Using angular promises with $q service
.......................................................................................... 130
Section 32.3: Using the $q constructor to create promises
.................................................................................. 132
Section 32.4: Avoid the $q Deferred Anti-Pattern
.................................................................................................. 133
Section 32.5: Using $q.all to handle multiple promises
......................................................................................... 134
Section 32.6: Deferring operations using $q.defer
................................................................................................ 135
Chapter 33: Prepare for Production - Grunt
............................................................................................... 136
Section 33.1: View preloading
................................................................................................................................... 136
Section 33.2: Script optimisation
.............................................................................................................................. 137
Chapter 34: Grunt tasks
........................................................................................................................................ 139
Section 34.1: Run application locally
....................................................................................................................... 139
Chapter 35: Angular Project - Directory Structure
................................................................................. 142
Section 35.1: Directory Structure
.............................................................................................................................. 142
Chapter 36: Lazy loading
...................................................................................................................................... 144
Section 36.1: Preparing your project for lazy loading
........................................................................................... 144
Section 36.2: Usage
................................................................................................................................................... 144
Section 36.3: Usage with router
............................................................................................................................... 144
Section 36.4: Using dependency injection
.............................................................................................................. 145
Section 36.5: Using the directive
.............................................................................................................................. 145
Chapter 37: HTTP Interceptor
............................................................................................................................ 146
Zgłoś jeśli naruszono regulamin