AngularJS
Notes for Professionals
AngularJS
Notes for Professionals
100+ pages
of professional hints and tricks
GoalKicker.com
Free Programming Books
Disclaimer
This is an unocial free book created for educational purposes and is
not aliated with ocial 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
Section 1.2: Showcasing all common Angular constructs
Section 1.3: The importance of scope
Section 1.4: Minification in Angular
Section 1.5: AngularJS Getting Started Video Tutorials
Section 1.6: The Simplest Possible Angular Hello World
...........................................................................................................................................
6
.........................................................................................
7
..........................................................................................................................
8
............................................................................................................................
..........................................................................................
..........................................................................................
Chapter 2: Modules
Section 2.1: Modules
Section 2.2: Modules
Chapter 3: Components
....................................................................................................................................................
....................................................................................................................................................
...................................................................................................................................................
...........................................................................................................................................
15
Section 3.1: Basic Components and LifeCycle Hooks
Section 3.2: Components In angular JS
..............................................................................................
15
....................................................................................................................
17
Chapter 4: Built-in directives
................................................................................................................................
19
................................................................................................
19
..............................................................................................................
...........................................................................................................................................................
....................................................................................................................................................
.................................................................................................................................................
Section 4.1: Angular expressions - Text vs. Number
Section 4.2: ngIf
Section 4.3: ngCloak
Section 4.4: ngRepeat
Section 4.5: Built-In Directives Cheat Sheet
Section 4.6: ngInclude
Section 4.7: ng-model-options
Section 4.8: ngCopy
Section 4.9: ngPaste
Section 4.10: ngClick
Section 4.11: ngList
Section 4.12: ngOptions
Section 4.13: ngSrc
Section 4.14: ngModel
Section 4.15: ngClass
Section 4.16: ngDblclick
Section 4.17: ngHref
Section 4.18: ngPattern
Section 4.19: ngShow and ngHide
Section 4.20: ngRequired
Section 4.21: ngMouseenter and ngMouseleave
Section 4.22: ngDisabled
Section 4.23: ngValue
.................................................................................................................................................
...................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
.......................................................................................................................................................
...............................................................................................................................................
.......................................................................................................................................................
..................................................................................................................................................
...................................................................................................................................................
...............................................................................................................................................
.....................................................................................................................................................
...............................................................................................................................................
..............................................................................................................................
...........................................................................................................................................
............................................................................................................................................
..................................................................................................................................................
......................................................................................................
Chapter 5: Use of in-built directives
.................................................................................................................
36
Section 5.1: Hide/Show HTML Elements
....................................................................................................................
36
Chapter 6: Custom Directives
...............................................................................................................................
37
Section 6.1: Creating and consuming custom directives
Section 6.2: Directive Definition Object Template
Section 6.3: How to create resuable component using directive
Section 6.4: Basic Directive example
Section 6.5: Directive decorator
Section 6.6: Basic directive with template and an isolated scope
.........................................................................................................................
.................................................................................................................................
.........................................................................
43
.........................................................................................
...................................................................................................
...........................................................................
10
11
11
13
13
13
19
20
21
24
25
25
Advertisement
26
26
27
27
28
30
30
31
31
32
32
33
34
34
34
35
38
39
40
42
42
Section 6.7: Building a reusable component
Section 6.8: Directive inheritance and interoperability
............................................................................................................
44
............................................................................................
45
Chapter 7: How data binding works
Section 7.1: Data Binding Example
.................................................................................................................
47
............................................................................................................................
47
Chapter 8: Angular Project - Directory Structure
.....................................................................................
49
Section 8.1: Directory Structure
..................................................................................................................................
49
Chapter 9: Filters
........................................................................................................................................................
51
Section 9.1: Accessing a filtered list from outside an ng-repeat
Section 9.2: Custom filter to remove values
Section 9.3: Custom filter to format values
Section 9.4: Using filters in a controller or service
Section 9.5: Performing filter in a child array
.............................................................................................................
..............................................................................................................
...................................................................................................
...........................................................................................................
............................................................................
51
Chapter 10: Custom filters
......................................................................................................................................
54
Section 10.1: Use a filter in a controller, a service or a filter
Section 10.2: Create a filter with parameters
Section 10.3: Simple filter example
...........................................................................................................
............................................................................................................................
....................................................................................
54
Chapter 11: Constants
...............................................................................................................................................
56
Section 11.1: Create your first constant
Section 11.2: Use cases
Chapter 12: Custom filters with ES6
Section 12.1: FileSize Filter using ES6
......................................................................................................................
56
................................................................................................................................................
56
...................................................................................................................
58
..........................................................................................................................
58
Chapter 13: Directives using ngModelController
........................................................................................
59
Section 13.1: A simple control: rating
Section 13.2: A couple of complex controls: edit a full object
..........................................................................................................................
59
.................................................................................
61
Chapter 14: Controllers
...........................................................................................................................................
64
Section 14.1: Your First Controller
Section 14.2: Creating Controllers, Minification safe
Section 14.3: Using ControllerAs in Angular JS
Section 14.4: Creating Minification-Safe Angular Controllers
Section 14.5: Creating Controllers
Section 14.6: Nested Controllers
Chapter 15: Controllers with ES6
...............................................................................................................................
................................................................................................
.........................................................................................................
.................................................................................
67
..............................................................................................................................
.................................................................................................................................
.........................................................................................................................
Section 15.1: Controller
................................................................................................................................................
69
Chapter 16: The Self Or This Variable In A Controller
Section 16.1: Understanding The Purpose Of The Self Variable
..............................................................................
70
.............................................................................
70
Chapter 17: Services
..................................................................................................................................................
72
Section 17.1: Creating a service using angular.factory
Section 17.2: Dierence between Service and Factory
Section 17.3: $sce - sanitize and render content and resources in templates
Section 17.4: How to create a Service
Section 17.5: How to use a service
Section 17.6: How to create a Service with dependencies using 'array syntax'
Section 17.7: Registering a Service
........................................................................................................................
.............................................................................................................................
.............................................................................................................................
77
....................................................
76
............................................................................................
...........................................................................................
......................................................
Chapter 18: Distinguishing Service vs Factory
Advertisement
Section 18.1: Factory VS Service once-and-for-all
Chapter 19: Angular promises with $q service
.............................................................................................
...................................................................................................
.............................................................................................
80
Section 19.1: Wrap simple value into a promise using $q.when()
Section 19.2: Using angular promises with $q service
...........................................................................
80
.............................................................................................
80
51
51
52
52
54
54
64
65
66
68
68
69
72
72
75
75
76
78
78
Section 19.3: Using the $q constructor to create promises
Section 19.4: Avoid the $q Deferred Anti-Pattern
Section 19.5: Using $q.all to handle multiple promises
Section 19.6: Deferring operations using $q.defer
.....................................................................................................
............................................................................................
...................................................................................................
.....................................................................................
82
Chapter 20: Dependency Injection
Section 20.1: Dynamic Injections
Section 20.2: Dynamically load AngularJS service in vanilla JavaScript
....................................................................................................................
................................................................................................................................
.............................................................
86
Chapter 21: Events
......................................................................................................................................................
87
Section 21.1: Using angular event system
Section 21.2: Always deregister $rootScope.$on listeners on the scope $destory event
Section 21.3: Uses and significance
...........................................................................................................................
89
.................................................................................................................
87
....................................
89
Chapter 22: Sharing Data
.......................................................................................................................................
92
Section 22.1: Using ngStorage to share data
Section 22.2: Sharing data from one controller to another using service
...........................................................................................................
92
............................................................
92
Chapter 23: Form Validation
.................................................................................................................................
94
Section 23.1: Form and Input States
Section 23.2: CSS Classes
Section 23.3: Basic Form Validation
Section 23.4: Custom Form Validation
Section 23.5: Async validators
Section 23.6: ngMessages
Section 23.7: Nested Forms
..........................................................................................................................
...........................................................................................................................................
..........................................................................................................................
......................................................................................................................
95
...................................................................................................................................
..........................................................................................................................................
........................................................................................................................................
Chapter 24: Routing using ngRoute
.................................................................................................................
98
Section 24.1: Basic example
Section 24.2: Defining custom behavior for individual routes
Section 24.3: Route parameters example
................................................................................
99
..............................................................................................................
100
........................................................................................................................................
98
Chapter 25: ng-class directive
...........................................................................................................................
102
Section 25.1: Three types of ng-class expressions
................................................................................................
102
Chapter 26: ng-repeat
...........................................................................................................................................
104
Section 26.1: ng-repeat-start + ng-repeat-end
Section 26.2: Iterating over object properties
Section 26.3: Tracking and Duplicates
......................................................................................................
104
........................................................................................................
....................................................................................................................
Chapter 27: ng-style
...............................................................................................................................................
106
Section 27.1: Use of ng-style
....................................................................................................................................
106
Chapter 28: ng-view
................................................................................................................................................
107
Section 28.1: Registration navigation
Section 28.2: ng-view
......................................................................................................................
107
................................................................................................................................................
107
Chapter 29: AngularJS bindings options (=, @, & etc.)
..................................................................
109
Section 29.1: Bind optional attribute
Section 29.2: @ one-way binding, attribute binding
Advertisement
Section 29.3: = two-way binding
Section 29.4: & function binding, expression binding
Section 29.5: Available binding through a simple sample
........................................................................................................................
.............................................................................................
..............................................................................................................................
............................................................................................
....................................................................................
110
Chapter 30: Providers
Section 30.1: Provider
Section 30.2: Factory
Section 30.3: Constant
Section 30.4: Service
Section 30.5: Value
............................................................................................................................................
111
................................................................................................................................................
................................................................................................................................................
..............................................................................................................................................
.................................................................................................................................................
....................................................................................................................................................
83
84
85
86
86
94
94
94
96
96
97
104
105
109
109
109
110
111
111
112
112
113
Chapter 31: Decorators
..........................................................................................................................................
114
Section 31.1: Decorate service, factory
Section 31.2: Decorate directive
Section 31.3: Decorate filter
....................................................................................................................
114
...............................................................................................................................
......................................................................................................................................
Chapter 32: Print
.......................................................................................................................................................
116
Section 32.1: Print Service
.........................................................................................................................................
116
Chapter 33: ui-router
..............................................................................................................................................
118
Section 33.1: Basic Example
Section 33.2: Multiple Views
Section 33.3: Using resolve functions to load data
Section 33.4: Nested Views / States
Chapter 34: Built-in helper Functions
......................................................................................................................................
.....................................................................................................................................
................................................................................................
120
........................................................................................................................
Section 34.1: angular.equals
Section 34.2: angular.toJson
Section 34.3: angular.copy
Section 34.4: angular.isString
Section 34.5: angular.isArray
Section 34.6: angular.merge
Section 34.7: angular.isDefined and angular.isUndefined
Section 34.8: angular.isDate
Section 34.9: angular.noop
Section 34.10: angular.isElement
Section 34.11: angular.isFunction
Section 34.12: angular.identity
Section 34.13: angular.forEach
Section 34.14: angular.isNumber
Section 34.15: angular.isObject
Section 34.16: angular.fromJson
............................................................................................................
.....................................................................................................................................
....................................................................................................................................
.......................................................................................................................................
...................................................................................................................................
...................................................................................................................................
....................................................................................................................................
....................................................................................
125
.....................................................................................................................................
.......................................................................................................................................
..............................................................................................................................
..............................................................................................................................
.................................................................................................................................
.................................................................................................................................
..............................................................................................................................
................................................................................................................................
..............................................................................................................................
Chapter 35: digest loop walkthrough
............................................................................................................
130
Section 35.1: $digest and $watch
Section 35.2: the $scope tree
Section 35.3: two way data binding
.............................................................................................................................
...................................................................................................................................
........................................................................................................................
131
Chapter 36: Angular $scopes
..............................................................................................................................
133
Section 36.1: A function available in the entire app
Section 36.2: Avoid inheriting primitive values
Section 36.3: Basic Example of $scope inheritance
Section 36.4: How can you limit the scope on a directive and why would you do this?
Section 36.5: Using $scope functions
Section 36.6: Creating custom $scope events
...............................................................................................
.......................................................................................................
......................................................................................................................
.......................................................................................................
...............................................................................................
....................................
134
Chapter 37: Using AngularJS with TypeScript
Advertisement
...........................................................................................
138
Section 37.1: Using Bundling / Minification
Section 37.2: Angular Controllers in Typescript
Section 37.3: Using the Controller with ControllerAs Syntax
Section 37.4: Why ControllerAs Syntax?
.............................................................................................................
.....................................................................................................
................................................................................
140
.................................................................................................................
140
Chapter 38: $http request
...................................................................................................................................
142
Section 38.1: Timing of an $http request
Section 38.2: Using $http inside a controller
Section 38.3: Using $http request in a service
Chapter 39: Prepare for Production - Grunt
.................................................................................................................
..........................................................................................................
........................................................................................................
...............................................................................................
145
114
115
118
119
121
123
123
123
124
124
124
125
126
126
126
127
127
128
128
128
129
130
130
133
133
134
135
136
138
138
142
142
143
Section 39.1: View preloading
Section 39.2: Script optimisation
...................................................................................................................................
145
..............................................................................................................................
146
Chapter 40: Grunt tasks
.......................................................................................................................................
148
Section 40.1: Run application locally
.......................................................................................................................
148
Chapter 41: Lazy loading
......................................................................................................................................
151
Section 41.1: Preparing your project for lazy loading
Section 41.2: Usage
Section 41.3: Usage with router
Section 41.4: Using dependency injection
Section 41.5: Using the directive
Chapter 42: HTTP Interceptor
...................................................................................................................................................
............................................................................................
151
................................................................................................................................
...............................................................................................................
...............................................................................................................................
152
Section 42.1: Generic httpInterceptor step by step
Section 42.2: Getting Started
Section 42.3: Flash message on response using http interceptor
...........................................................................................................................
................................................................................................
...................................................................................................................................
.......................................................................
154
Chapter 43: Session storage
..............................................................................................................................
156
Section 43.1: Handling session storage through service using angularjs
............................................................
156
Chapter 44: Angular MVC
....................................................................................................................................
157
Section 44.1: The Static View with controller
Section 44.2: Controller Function Definition
Section 44.3: Adding information to the model
..........................................................................................................
...........................................................................................................
.....................................................................................................
157
Chapter 45: SignalR with AngularJS
..............................................................................................................
158
Section 45.1: SignalR and AngularJS [ ChatProject ]
............................................................................................
158
Chapter 46: Migration to Angular 2+
.............................................................................................................
162
Section 46.1: Converting your AngularJS app into a componend-oriented structure
Section 46.2: Introducing Webpack and ES6 modules
..........................................................................................
164
.......................................
162
Chapter 47: AngularJS with data filter, pagination etc
Section 47.1: AngularJS display data with filter, pagination
.......................................................................
165
.................................................................................
165
Chapt...