Angularjs Notes For Professionals Goalkickercom

download

https://ebookbell.com/product/angularjs-notes-for-professionals-
goalkickercom-22033354

Explore and download more ebooks at ebookbell.com

Here are some recommended products that we believe you will be
interested in. You can click the link to download.

Angular Js Notes For Professionals 100 Pages Of Professional Hints And

Tricks Goalkickercom

https://ebookbell.com/product/angular-js-notes-for-
professionals-100-pages-of-professional-hints-and-tricks-
goalkickercom-11074474

Angularjs Web Application Development Blueprints Vinci Rufus

https://ebookbell.com/product/angularjs-web-application-development-
blueprints-vinci-rufus-55893708

Angularjs Maintaining Web Applications Rodrigo Branas Chandermani

https://ebookbell.com/product/angularjs-maintaining-web-applications-
rodrigo-branas-chandermani-23272318

Angularjs Succinctly Frederik Dietz

https://ebookbell.com/product/angularjs-succinctly-frederik-
dietz-36134704
Angularjs Brad Green Shyam Seshadri

https://ebookbell.com/product/angularjs-brad-green-shyam-
seshadri-4144268

Angularjs Up And Running Enhanced Productivity With Structured Web

Apps 1st Edition Shyam Seshadri

https://ebookbell.com/product/angularjs-up-and-running-enhanced-
productivity-with-structured-web-apps-1st-edition-shyam-
seshadri-4912732

Angularjs Essentials Rodrigo Branas

https://ebookbell.com/product/angularjs-essentials-rodrigo-
branas-4939658

Angularjs Novice To Ninja 1st Edition Sandeep Panda

https://ebookbell.com/product/angularjs-novice-to-ninja-1st-edition-
sandeep-panda-4944544

Angularjs Web Application Development Cookbook Matt Frisbie

https://ebookbell.com/product/angularjs-web-application-development-
cookbook-matt-frisbie-4985094
 AngularJS
AngularJS
Notes for Professionals

Notes for Professionals

100+ pages
of professional hints and tricks

Disclaimer
GoalKicker.com 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).
Free Programming Books 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
 Section 37.1: Generic httpInterceptor step by step ................................................................................................ 146
Section 37.2: Getting Started .................................................................................................................................... 147
Section 37.3: Flash message on response using http interceptor ........................................................................ 147
Chapter 38: Distinguishing Service vs Factory .......................................................................................... 149
Section 38.1: Factory VS Service once-and-for-all ................................................................................................ 149
Chapter 39: Use of in-built directives ............................................................................................................. 151
Section 39.1: Hide/Show HTML Elements ................................................................................................................ 151
Chapter 40: Session storage .............................................................................................................................. 152
Section 40.1: Handling session storage through service using angularjs ........................................................... 152
Chapter 41: Angular MVC ..................................................................................................................................... 153
Section 41.1: The Static View with controller ........................................................................................................... 153
Section 41.2: Controller Function Definition ............................................................................................................ 153
Section 41.3: Adding information to the model ...................................................................................................... 153
Chapter 42: The Self Or This Variable In A Controller .......................................................................... 154
Section 42.1: Understanding The Purpose Of The Self Variable .......................................................................... 154
Chapter 43: Controllers with ES6 ..................................................................................................................... 156
Section 43.1: Controller .............................................................................................................................................. 156
Chapter 44: Custom filters with ES6 .............................................................................................................. 157
Section 44.1: FileSize Filter using ES6 ....................................................................................................................... 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 ....................................... 162
Section 46.2: Introducing Webpack and ES6 modules .......................................................................................... 164
Chapter 47: AngularJS with data filter, pagination etc ....................................................................... 165
Section 47.1: AngularJS display data with filter, pagination ................................................................................. 165
Chapter 48: Profiling and Performance ....................................................................................................... 166
Section 48.1: 7 Simple Performance Improvements .............................................................................................. 166
Section 48.2: Bind Once ............................................................................................................................................ 169
Section 48.3: ng-if vs ng-show ................................................................................................................................. 170
Section 48.4: Watchers ............................................................................................................................................. 170
Section 48.5: Always deregister listeners registered on other scopes other than the current scope .............. 172
Section 48.6: Scope functions and filters ................................................................................................................ 173
Section 48.7: Debounce Your Model ........................................................................................................................ 173
Chapter 49: Performance Profiling ................................................................................................................. 175
Section 49.1: All About Profiling ................................................................................................................................ 175
Chapter 50: Debugging ......................................................................................................................................... 177
Section 50.1: Using ng-inspect chrome extension .................................................................................................. 177
Section 50.2: Getting the Scope of element ........................................................................................................... 179
Section 50.3: Basic debugging in markup .............................................................................................................. 179
Chapter 51: Unit tests ............................................................................................................................................. 181
Section 51.1: Unit test a component (1.5+) ............................................................................................................... 181
Section 51.2: Unit test a filter .................................................................................................................................... 181
Section 51.3: Unit test a service ................................................................................................................................ 182
Section 51.4: Unit test a controller ........................................................................................................................... 183
Section 51.5: Unit test a directive ............................................................................................................................. 183
Chapter 52: AngularJS gotchas and traps .................................................................................................. 185
Section 52.1: Things to do when using html5Mode ................................................................................................ 185
 Section 52.2: Two-way data binding stops working ............................................................................................. 186
Section 52.3: 7 Deadly Sins of AngularJS ............................................................................................................... 187
Credits ............................................................................................................................................................................ 191
You may also like ...................................................................................................................................................... 194
About

Please feel free to share this PDF with anyone for free,
latest version of this book can be downloaded from:
https://goalkicker.com/AngularJSBook

This AngularJS Notes for Professionals book is compiled from Stack Overflow
Documentation, the content is written by the beautiful people at Stack Overflow.
Text content is released under Creative Commons BY-SA, see credits at the end
of this book whom contributed to the various chapters. Images may be copyright
of their respective owners unless otherwise specified

This is an unofficial free book created for educational purposes and is not
affiliated with official AngularJS group(s) or company(s) nor Stack Overflow. All
trademarks and registered trademarks are the property of their respective
company owners

The information presented in this book is not guaranteed to be correct nor

accurate, use at your own risk

Please send feedback and corrections to [email protected]

GoalKicker.com – AngularJS Notes for Professionals 1

Chapter 1: Getting started with AngularJS
Version Release Date
1.6.5 2017-07-03
1.6.4 2017-03-31
1.6.3 2017-03-08
1.6.2 2017-02-07
1.5.11 2017-01-13
1.6.1 2016-12-23
1.5.10 2016-12-15
1.6.0 2016-12-08
1.6.0-rc.2 2016-11-24
1.5.9 2016-11-24
1.6.0-rc.1 2016-11-21
1.6.0-rc.0 2016-10-26
1.2.32 2016-10-11
1.4.13 2016-10-10
1.2.31 2016-10-10
1.5.8 2016-07-22
1.2.30 2016-07-21
1.5.7 2016-06-15
1.4.12 2016-06-15
1.5.6 2016-05-27
1.4.11 2016-05-27
1.5.5 2016-04-18
1.5.4 2016-04-14
1.5.3 2016-03-25
1.5.2 2016-03-19
1.4.10 2016-03-16
1.5.1 2016-03-16
1.5.0 2016-02-05
1.5.0-rc.2 2016-01-28
1.4.9 2016-01-21
1.5.0-rc.1 2016-01-16
1.5.0-rc.0 2015-12-09
1.4.8 2015-11-20
1.5.0-beta.2 2015-11-18
1.4.7 2015-09-30
1.3.20 2015-09-30
1.2.29 2015-09-30
1.5.0-beta.1 2015-09-30
1.5.0-beta.0 2015-09-17
1.4.6 2015-09-17
1.3.19 2015-09-17
1.4.5 2015-08-28

GoalKicker.com – AngularJS Notes for Professionals 2

1.3.18 2015-08-19
1.4.4 2015-08-13
1.4.3 2015-07-15
1.3.17 2015-07-07
1.4.2 2015-07-07
1.4.1 2015-06-16
1.3.16 2015-06-06
1.4.0 2015-05-27
1.4.0-rc.2 2015-05-12
1.4.0-rc.1 2015-04-24
1.4.0-rc.0 2015-04-10
1.3.15 2015-03-17
1.4.0-beta.6 2015-03-17
1.4.0-beta.5 2015-02-24
1.3.14 2015-02-24
1.4.0-beta.4 2015-02-09
1.3.13 2015-02-09
1.3.12 2015-02-03
1.4.0-beta.3 2015-02-03
1.3.11 2015-01-27
1.4.0-beta.2 2015-01-27
1.4.0-beta.1 2015-01-20
1.3.10 2015-01-20
1.3.9 2015-01-15
1.4.0-beta.0 2015-01-14
1.3.8 2014-12-19
1.2.28 2014-12-16
1.3.7 2014-12-15
1.3.6 2014-12-09
1.3.5 2014-12-02
1.3.4 2014-11-25
1.2.27 2014-11-21
1.3.3 2014-11-18
1.3.2 2014-11-07
1.3.1 2014-10-31
1.3.0 2014-10-14
1.3.0-rc.5 2014-10-09
1.2.26 2014-10-03
1.3.0-rc.4 2014-10-02
1.3.0-rc.3 2014-09-24
1.2.25 2014-09-17
1.3.0-rc.2 2014-09-17
1.2.24 2014-09-10
1.3.0-rc.1 2014-09-10
1.3.0-rc.0 2014-08-30
1.2.23 2014-08-23

GoalKicker.com – AngularJS Notes for Professionals 3

1.3.0-beta.19 2014-08-23
1.2.22 2014-08-12
1.3.0-beta.18 2014-08-12
1.2.21 2014-07-25
1.3.0-beta.17 2014-07-25
1.3.0-beta.16 2014-07-18
1.2.20 2014-07-11
1.3.0-beta.15 2014-07-11
1.2.19 2014-07-01
1.3.0-beta.14 2014-07-01
1.3.0-beta.13 2014-06-16
1.3.0-beta.12 2014-06-14
1.2.18 2014-06-14
1.3.0-beta.11 2014-06-06
1.2.17 2014-06-06
1.3.0-beta.10 2014-05-24
1.3.0-beta.9 2014-05-17
1.3.0-beta.8 2014-05-09
1.3.0-beta.7 2014-04-26
1.3.0-beta.6 2014-04-22
1.2.16 2014-04-04
1.3.0-beta.5 2014-04-04
1.3.0-beta.4 2014-03-28
1.2.15 2014-03-22
1.3.0-beta.3 2014-03-21
1.3.0-beta.2 2014-03-15
1.3.0-beta.1 2014-03-08
1.2.14 2014-03-01
1.2.13 2014-02-15
1.2.12 2014-02-08
1.2.11 2014-02-03
1.2.10 2014-01-25
1.2.9 2014-01-15
1.2.8 2014-01-10
1.2.7 2014-01-03
1.2.6 2013-12-20
1.2.5 2013-12-13
1.2.4 2013-12-06
1.2.3 2013-11-27
1.2.2 2013-11-22
1.2.1 2013-11-15
1.2.0 2013-11-08
1.2.0-rc.3 2013-10-14
1.2.0-rc.2 2013-09-04
1.0.8 2013-08-22
1.2.0rc1 2013-08-13

GoalKicker.com – AngularJS Notes for Professionals 4

1.0.7 2013-05-22
1.1.5 2013-05-22
1.0.6 2013-04-04
1.1.4 2013-04-04
1.0.5 2013-02-20
1.1.3 2013-02-20
1.0.4 2013-01-23
1.1.2 2013-01-23
1.1.1 2012-11-27
1.0.3 2012-11-27
1.1.0 2012-09-04
1.0.2 2012-09-04
1.0.1 2012-06-25
1.0.0 2012-06-14
v1.0.0rc12 2012-06-12
v1.0.0rc11 2012-06-11
v1.0.0rc10 2012-05-24
v1.0.0rc9 2012-05-15
v1.0.0rc8 2012-05-07
v1.0.0rc7 2012-05-01
v1.0.0rc6 2012-04-21
v1.0.0rc5 2012-04-12
v1.0.0rc4 2012-04-05
v1.0.0rc3 2012-03-30
v1.0.0rc2 2012-03-21
g3-v1.0.0rc1 2012-03-14
g3-v1.0.0-rc2 2012-03-16
1.0.0rc1 2012-03-14
0.10.6 2012-01-17
0.10.5 2011-11-08
0.10.4 2011-10-23
0.10.3 2011-10-14
0.10.2 2011-10-08
0.10.1 2011-09-09
0.10.0 2011-09-02
0.9.19 2011-08-21
0.9.18 2011-07-30
0.9.17 2011-06-30
0.9.16 2011-06-08
0.9.15 2011-04-12
0.9.14 2011-04-01
0.9.13 2011-03-14
0.9.12 2011-03-04
0.9.11 2011-02-09
0.9.10 2011-01-27
0.9.9 2011-01-14

GoalKicker.com – AngularJS Notes for Professionals 5

0.9.7 2010-12-11
0.9.6 2010-12-07
0.9.5 2010-11-25
0.9.4 2010-11-19
0.9.3 2010-11-11
0.9.2 2010-11-03
0.9.1 2010-10-27
0.9.0 2010-10-21

Section 1.1: Getting Started

Create a new HTML file and paste the following content:

<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello, Angular</title>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
</head>
<body ng-init="name='World'">
<label>Name</label>
<input ng-model="name" />
<span>Hello, {{ name }}!</span>
<p ng-bind="name"></p>
</body>
</html>

Live demo

When you open the file with a browser, you will see an input field followed by the text Hello, World!. Editing the
value in the input will update the text in real-time, without the need to refresh the whole page.

Explanation:

1. Load the Angular framework from a Content Delivery Network.

<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>

2. Define the HTML document as an Angular application with the ng-app directive

<html ng-app>

3. Initialize the name variable using ng-init

<body ng-init=" name = 'World' ">

Note that ng-init should be used for demonstrative and testing purposes only. When building an actual application,
controllers should initialize the data.

4. Bind data from the model to the view on HTML controls. Bind an <input> to the name property with ng-model

<input ng-model="name" />

GoalKicker.com – AngularJS Notes for Professionals 6

 5. Display content from the model using double braces {{ }}

<span>Hello, {{ name }}</span>

6. Another way of binding the name property is using ng-bind instead of handlebars"{{ }}"

<span ng-bind="name"></span>

The last three steps establish the two way data-binding. Changes made to the input update the model, which is
reflected in the view.

There is a difference between using handlebars and ng-bind. If you use handlebars, you might see the actual
Hello, {{name}} as the page loads before the expression is resolved (before the data is loaded) whereas if you use
ng-bind, it will only show the data when the name is resolved. As an alternative the directive ng-cloak can be used
to prevent handlebars to display before it is compiled.

Section 1.2: Showcasing all common Angular constructs

The following example shows common AngularJS constructs in one file:

<!DOCTYPE html>
<html ng-app="myDemoApp">
<head>
<style>.started { background: gold; }</style>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script>
function MyDataService() {
return {
getWorlds: function getWorlds() {
return ["this world", "another world"];
}
};
}

function DemoController(worldsService) {
var vm = this;
vm.messages = worldsService.getWorlds().map(function(w) {
return "Hello, " + w + "!";
});
}

function startup($rootScope, $window) {

$window.alert("Hello, user! Loading worlds...");
$rootScope.hasStarted = true;
}

angular.module("myDemoApp", [/* module dependencies go here */])

.service("worldsService", [MyDataService])
.controller("demoController", ["worldsService", DemoController])
.config(function() {
console.log('configuring application');
})
.run(["$rootScope", "$window", startup]);
</script>
</head>
<body ng-class="{ 'started': hasStarted }" ng-cloak>
<div ng-controller="demoController as vm">

GoalKicker.com – AngularJS Notes for Professionals 7

 <ul>
<li ng-repeat="msg in vm.messages">{{ msg }}</li>
</ul>
</div>
</body>
</html>

Every line of the file is explained below:

Live Demo

1. ng-app="myDemoApp", the ngApp directive that bootstraps the application and tells angular that a DOM
element is controlled by a specific angular.module named "myDemoApp";
2. <script src="angular.min.js"> is the first step in bootstrapping the AngularJS library;

Three functions (MyDataService, DemoController, and startup) are declared, which are used (and explained)
below.

3. angular.module(...) used with an array as the second argument creates a new module. This array is used
to supply a list of module dependencies. In this example we chain calls on the result of the module(...)
function;

4. .service(...) creates an Angular Service and returns the module for chaining;

5. .controller(...) creates an Angular Controller and returns the module for chaining;

6. .config(...) Use this method to register work which needs to be performed on module loading.

7. .run(...) makes sure code is run at startup time and takes an array of items as a parameter. Use this
method to register work which should be performed when the injector is done loading all modules.

the first item is letting Angular know that the startup function requires the built-in $rootScope service
to be injected as an argument;
the second item is letting Angular know that the startup function requires the built-in $window service
to be injected as an argument;
the last item in the array, startup, is the actual function to run on startup;

8. ng-class is the ngClass directive to set a dynamic class, and in this example utilizes hasStarted on the
$rootScope dynamically

9. ng-cloak is a directive to prevent the unrendered Angular html template (e.g. "{{ msg }}") to be briefly
shown before Angular has fully loaded the application.

10. ng-controller is the directive that asks Angular to instantiate a new controller of specific name to
orchestrate that part of the DOM;

11. ng-repeat is the directive to make Angular iterate over a collection and clone a DOM template for each item;

12. {{ msg }} showcases interpolation: on-the-spot rendering of a part of the scope or controller;

Section 1.3: The importance of scope

As Angular uses HTML to extend a web page and plain Javascript to add logic, it makes it easy to create a web page
using ng-app, ng-controller and some built-in directives such as ng-if, ng-repeat, etc. With the new controllerAs
syntax, newcomers to Angular users can attach functions and data to their controller instead of using $scope.

However, sooner or later, it is important to understand what exactly this $scope thing is. It will keep showing up in

GoalKicker.com – AngularJS Notes for Professionals 8

examples so it is important to have some understanding.

The good news is that it is a simple yet powerful concept.

When you create the following:

<div ng-app="myApp">
<h1>Hello {{ name }}</h1>
</div>

Where does name live?

The answer is that Angular creates a $rootScope object. This is simply a regular Javascript object and so name is a
property on the $rootScope object:

angular.module("myApp", [])
.run(function($rootScope) {
$rootScope.name = "World!";
});

And just as with global scope in Javascript, it's usually not such a good idea to add items to the global scope or
$rootScope.

Of course, most of the time, we create a controller and put our required functionality into that controller. But when
we create a controller, Angular does it's magic and creates a $scope object for that controller. This is sometimes
referred to as the local scope.

So, creating the following controller:

<div ng-app="myApp">
<div ng-controller="MyController">
<h1>Hello {{ name }}</h1>
</div>
</div>

would allow the local scope to be accessible via the $scope parameter.

angular.module("myApp", [])
.controller("MyController", function($scope) {
$scope.name = "Mr Local!";
});

A controller without a $scope parameter may simply not need it for some reason. But it is important to realize that,
even with controllerAs syntax, the local scope exists.

As $scope is a JavaScript object, Angular magically sets it up to prototypically inherit from $rootScope. And as you
can imagine, there can be a chain of scopes. For example, you could create a model in a parent controller and
attach to it to the parent controller's scope as $scope.model.

Then via the prototype chain, a child controller could access that same model locally with $scope.model.

None of this is initially evident, as it's just Angular doing its magic in the background. But understanding $scope is
an important step in getting to know how Angular works.

GoalKicker.com – AngularJS Notes for Professionals 9

Section 1.4: Minification in Angular
What is Minification ?

It is the process of removing all unnecessary characters from source code without changing its functionality.

Normal Syntax

If we use normal angular syntax for writing a controller then after minifiying our files it going to break our
functionality.

Controller (Before minification) :

var app = angular.module('mainApp', []);

app.controller('FirstController', function($scope) {
$scope.name= 'Hello World !';
});

After using minification tool, It will be minified as like below.

var app=angular.module("mainApp",[]);app.controller("FirstController",function(e){e.name= 'Hello

World !'})

Here, minification removed unnecessary spaces and the $scope variable from code. So when we use this minified
code then its not going to print anything on view. Because $scope is a crucial part between controller and view,
which is now replaced by the small 'e' variable. So when you run the application it is going to give Unknown
Provider 'e' dependency error.

There are two ways of annotating your code with service name information which are minification safe:

Inline Annotation Syntax

var app = angular.module('mainApp', []);

app.controller('FirstController', ['$scope', function($scope) {
$scope.message = 'Hello World !';
}]);

$inject Property Annotation Syntax

FirstController.$inject = ['$scope'];
var FirstController = function($scope) {
$scope.message = 'Hello World !';
}

var app = angular.module('mainApp', []);

app.controller('FirstController', FirstController);

After minification, this code will be

var
app=angular.module("mainApp",[]);app.controller("FirstController",["$scope",function(a){a.message="
Hello World !"}]);

Here, angular will consider variable 'a' to be treated as $scope, and It will display output as 'Hello World !'.

GoalKicker.com – AngularJS Notes for Professionals 10

Section 1.5: AngularJS Getting Started Video Tutorials
There are a lot of good video tutorials for the AngularJS framework on egghead.io

https://egghead.io/courses/angularjs-app-from-scratch-getting-started
https://egghead.io/courses/angularjs-application-architecture
https://egghead.io/courses/angular-material-introduction
https://egghead.io/courses/building-an-angular-1-x-ionic-application
https://egghead.io/courses/angular-and-webpack-for-modular-applications
https://egghead.io/courses/angularjs-authentication-with-jwt
https://egghead.io/courses/angularjs-data-modeling
https://egghead.io/courses/angular-automation-with-gulp
https://egghead.io/courses/learn-protractor-testing-for-angularjs
https://egghead.io/courses/ionic-quickstart-for-windows
https://egghead.io/courses/build-angular-1-x-apps-with-redux
https://egghead.io/courses/using-angular-2-patterns-in-angular-1-x-apps

Section 1.6: The Simplest Possible Angular Hello World

Angular 1 is at heart a DOM compiler. We can pass it HTML, either as a template or just as a regular web page, and
then have it compile an app.

We can tell Angular to treat a region of the page as an expression using the {{ }} handlebars style syntax. Anything
between the curly braces will be compiled, like so:

{{ 'Hello' + 'World' }}

This will output:

HelloWorld

ng-app

GoalKicker.com – AngularJS Notes for Professionals 11

We tell Angular which portion of our DOM to treat as the master template using the ng-app directive. A directive is a
custom attribute or element that the Angular template compiler knows how to deal with. Let's add an ng-app
directive now:

<html>
<head>
<script src="/angular.js"></script>
</head>
<body ng-app>
{{ 'Hello' + 'World' }}
</body>
</html>

I've now told the body element to be the root template. Anything in it will be compiled.

Directives

Directives are compiler directives. They extend the capabilities of the Angular DOM compiler. This is why Misko, the
creator of Angular, describes Angular as:

"What a web browser would have been had it been built for web applications.

We literally create new HTML attributes and elements, and have Angular compile them into an app. ng-app is a
directive that simply turns on the compiler. Other directives include:

ng-click, which adds a click handler,

ng-hide, which conditionally hides an element, and
<form>, which adds additional behaviour to a standard HTML form element.

Angular comes with around 100 built-in directives which allow you to accomplish most common tasks. We can also
write our own, and these will be treated in the same way as the built in directives.

We build an Angular app out of a series of directives, wired together with HTML.

GoalKicker.com – AngularJS Notes for Professionals 12

Chapter 2: Controllers
Section 2.1: Your First Controller
A controller is a basic structure used in Angular to preserve scope and handle certain actions within a page. Each
controller is coupled with an HTML view.

Below is a basic boilerplate for an Angular app:

<!DOCTYPE html>

<html lang="en" ng-app='MyFirstApp'>

<head>
<title>My First App</title>

<!-- angular source -->

<script src="https://code.angularjs.org/1.5.3/angular.min.js"></script>

<!-- Your custom controller code -->

<script src="js/controllers.js"></script>
</head>
<body>
<div ng-controller="MyController as mc">
<h1>{{ mc.title }}</h1>
<p>{{ mc.description }}</p>
<button ng-click="mc.clicked()">
Click Me!
</button>
</div>
</body>
</html>

There are a few things to note here:

<html ng-app='MyFirstApp'>

Setting the app name with ng-app lets you access the application in an external Javascript file, which will be covered
below.

<script src="js/controllers.js"></script>

We'll need a Javascript file where you define your controllers and their actions/data.

<div ng-controller="MyController as mc">

The ng-controller attribute sets the controller for that DOM element and all elements that are children
(recursively) below it.

You can have multiple of the same controller (in this case, MyController) by saying ... as mc, we're giving this
instance of the controller an alias.

<h1>{{ mc.title }}</h1>

The {{ ... }} notation is an Angular expression. In this case, this will set the inner text of that <h1> element to
whatever the value of mc.title is.

GoalKicker.com – AngularJS Notes for Professionals 13

Note: Angular employs dual-way data binding, meaning that regardless of how you update the mc.title value, it
will be reflected in both the controller and the page.

Also note that Angular expressions do not have to reference a controller. An Angular expression can be as simple as
{{ 1 + 2 }} or {{ "Hello " + "World" }}.

<button ng-click="mc.clicked()">

ng-click is an Angular directive, in this case binding the click event for the button to trigger the clicked() function
of the MyController instance.

With those things in mind, let's write an implementation of the MyController controller. With the example above,
you would write this code in js/controller.js.

First, you'll need to instantiate the Angular app in your Javascript.

var app = angular.module("MyFirstApp", []);

Note that the name we pass here is the same as the name you set in your HTML with the ng-app directive.

Now that we have the app object, we can use that to create controllers.

app.controller('MyController', function(){
var ctrl = this;

ctrl.title = "My First Angular App";

ctrl.description = "This is my first Angular app!";

ctrl.clicked = function(){
alert("MyController.clicked()");
};
});

Note: For anything that we want to be a part of the controller instance, we use the this keyword.

This is all that is required to build a simple controller.

Section 2.2: Creating Controllers, Minification safe

There are a couple different ways to protect your controller creation from minification.

The first is called inline array annotation. It looks like the following:

var app = angular.module('app');

app.controller('sampleController', ['$scope', '$http', function(a, b){
//logic here
}]);

The second parameter of the controller method can accept an array of dependencies. As you can see I've defined
$scope and $http which should correspond to the parameters of the controller function in which a will be the
$scope, and b would be $http. Take note that the last item in the array should be your controller function.

The second option is using the $inject property. It looks like the following:

var app = angular.module('app');

app.controller('sampleController', sampleController);

GoalKicker.com – AngularJS Notes for Professionals 14

sampleController.$inject = ['$scope', '$http'];
function sampleController(a, b) {
//logic here
}

This does the same thing as inline array annotation but provides a different styling for those that prefer one option
over the other.

The order of injected dependencies is important

When injecting dependencies using the array form, be sure that the list of the dependencies match its
corresponding list of arguments passed to the controller function.

Note that in the following example, $scope and $http are reversed. This will cause a problem in the code.

// Intentional Bug: injected dependencies are reversed which will cause a problem
app.controller('sampleController', ['$scope', '$http',function($http, $scope) {
$http.get('sample.json');
}]);

Section 2.3: Using ControllerAs in Angular JS

In Angular $scope is the glue between the Controller and the View that helps with all of our data binding needs.
Controller As is another way of binding controller and view and is mostly recommended to use. Basically these are
the two controller constructs in Angular (i.e $scope and Controller As).

Different ways of using Controller As are -

controllerAs View Syntax

<div ng-controller="CustomerController as customer">

{{ customer.name }}
</div>

controllerAs Controller Syntax

function CustomerController() {
this.name = {};
this.sendMessage = function() { };
}

controllerAs with vm

function CustomerController() {
/*jshint validthis: true */
var vm = this;
vm.name = {};
vm.sendMessage = function() { };
}

controllerAs is syntactic sugar over $scope. You can still bind to the View and still access $scope methods. Using
controllerAs, is one of the best practices suggested by the angular core team. There are many reason for this, few
of them are -

$scope is exposing the members from the controller to the view via an intermediary object. By setting
this.*, we can expose just what we want to expose from the controller to the view. It also follow the

GoalKicker.com – AngularJS Notes for Professionals 15

 standard JavaScript way of using this.

using controllerAs syntax, we have more readable code and the parent property can be accessed using the
alias name of the parent controller instead of using the $parent syntax.

It promotes the use of binding to a "dotted" object in the View (e.g. customer.name instead of name), which
is more contextual, easier to read, and avoids any reference issues that may occur without "dotting".

Helps avoid using $parent calls in Views with nested controllers.

Use a capture variable for this when using the controllerAs syntax. Choose a consistent variable name such
as vm, which stands for ViewModel. Because, this keyword is contextual and when used within a function
inside a controller may change its context. Capturing the context of this avoids encountering this problem.

NOTE: using controllerAs syntax add to current scope reference to current controller, so it available as field

<div ng-controller="Controller as vm>...</div>

vm is available as $scope.vm.

Section 2.4: Creating Minification-Safe Angular Controllers

To create minification-safe angular controllers, you will change the controller function parameters.

The second argument in the module.controller function should be passed an array, where the last parameter is
the controller function, and every parameter before that is the name of each injected value.

This is different from the normal paradigm; that takes the controller function with the injected arguments.

Given:

var app = angular.module('myApp');

The controller should look like this:

app.controller('ctrlInject',
[
/* Injected Parameters */
'$Injectable1',
'$Injectable2',
/* Controller Function */
function($injectable1Instance, $injectable2Instance) {
/* Controller Content */
}
]
);

Note: The names of injected parameters are not required to match, but they will be bound in order.

This will minify to something similar to this:

var
a=angular.module('myApp');a.controller('ctrlInject',['$Injectable1','$Injectable2',function(b,c){/*
Controller Content */}]);

The minification process will replace every instance of app with a, every instance of $Injectable1Instance with b,
and every instance of $Injectable2Instance with c.

GoalKicker.com – AngularJS Notes for Professionals 16

Section 2.5: Creating Controllers
angular
.module('app')
.controller('SampleController', SampleController)

SampleController.$inject = ['$log', '$scope'];

function SampleController($log, $scope){
$log.debug('*****SampleController******');

/* Your code below */

}

Note: The .$inject will make sure your dependencies doesn't get scrambled after minification. Also, make sure it's
in order with the named function.

Section 2.6: Nested Controllers

Nesting controllers chains the $scope as well. Changing a $scope variable in the nested controller changes the same
$scope variable in the parent controller.

.controller('parentController', function ($scope) {

$scope.parentVariable = "I'm the parent";
});

.controller('childController', function ($scope) {

$scope.childVariable = "I'm the child";

$scope.childFunction = function () {
$scope.parentVariable = "I'm overriding you";
};
});

Now let's try to handle both of them, nested.

<body ng-controller="parentController">
What controller am I? {{parentVariable}}
<div ng-controller="childController">
What controller am I? {{childVariable}}
<button ng-click="childFunction()"> Click me to override! </button>
</div>
</body>

Nesting controllers may have it's benefits, but one thing must be kept in mind when doing so. Calling the
ngController directive creates a new instance of the controller - which can often create confusion and unexpected
results.

GoalKicker.com – AngularJS Notes for Professionals 17

Chapter 3: Built-in directives
Section 3.1: Angular expressions - Text vs. Number
This example demonstrates how Angular expressions are evaluated when using type="text" and type="number"
for the input element. Consider the following controller and view:

Controller

var app = angular.module('app', []);

app.controller('ctrl', function($scope) {
$scope.textInput = {
value: '5'
};
$scope.numberInput = {
value: 5
};
});

View

<div ng-app="app" ng-controller="ctrl">

<input type="text" ng-model="textInput.value">
{{ textInput.value + 5 }}
<input type="number" ng-model="numberInput.value">
{{ numberInput.value + 5 }}
</div>

When using + in an expression bound to text input, the operator will concatenate the strings (first example),
displaying 55 on the screen*.
When using + in an expression bound to number input, the operator return the sum of the numbers (second
example), displaying 10 on the screen*.

* - That is until the user changes the value in the input field, afterward the display will change accordingly.

Working Example

Section 3.2: ngIf

ng-if is a directive similar to ng-show but inserts or removes the element from the DOM instead of simply hiding it.
Angular 1.1.5 introduced ng-If directive. You can Use ng-if directive above 1.1.5 versions. This is useful because
Angular will not process digests for elements inside a removed ng-if reducing the workload of Angular especially
for complex data bindings.

Unlike ng-show, the ng-if directive creates a child scope which uses prototypal inheritance. This means that setting
a primitive value on the child scope will not apply to the parent. To set a primitive on the parent scope the $parent
property on the child scope will have to be used.

JavaScript
angular.module('MyApp', []);

angular.module('MyApp').controller('myController', ['$scope', '$window', function

myController($scope, $window) {
$scope.currentUser= $window.localStorage.getItem('userName');

GoalKicker.com – AngularJS Notes for Professionals 18

}]);

View
<div ng-controller="myController">
<div ng-if="currentUser">
Hello, {{currentUser}}
</div>
<div ng-if="!currentUser">
<a href="/login">Log In</a>
<a href="/register">Register</a>
</div>
</div>

DOM If currentUser Is Not Undefined

<div ng-controller="myController">
<div ng-if="currentUser">
Hello, {{currentUser}}
</div>
<!-- ng-if: !currentUser -->
</div>

DOM If currentUser Is Undefined

<div ng-controller="myController">
<!-- ng-if: currentUser -->
<div ng-if="!currentUser">
<a href="/login">Log In</a>
<a href="/register">Register</a>
</div>
</div>

Working Example

Function Promise

The ngIf directive accepts functions as well, which logically require to return true or false.

<div ng-if="myFunction()">
<span>Span text</span>
</div>

The span text will only appear if the function returns true.

$scope.myFunction = function() {
var result = false;
// Code to determine the boolean value of result
return result;
};

As any Angular expression the function accepts any kind of variables.

Section 3.3: ngCloak

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the
browser in its raw (uncompiled) form while your application is loading. - View source

HTML

GoalKicker.com – AngularJS Notes for Professionals 19

<div ng-cloak>
<h1>Hello {{ name }}</h1>
</div>

ngCloak can be applied to the body element, but the preferred usage is to apply multiple ngCloak directives to
small portions of the page to permit progressive rendering of the browser view.

The ngCloak directive has no parameters.

See also: Preventing flickering

Section 3.4: ngRepeat

ng-repeat is a built in directive in Angular which lets you iterate an array or an object and gives you the ability to
repeat an element once for each item in the collection.

ng-repeat an array

<ul>
<li ng-repeat="item in itemCollection">
{{item.Name}}
</li>
</ul>

Where:
item = individual item in the collection
itemCollection = The array you are iterating

ng-repeat an object

<ul>
<li ng-repeat="(key, value) in myObject">
{{key}} : {{value}}
</li>
</ul>

Where:
key = the property name
value = the value of the property
myObject = the object you are iterating

filter your ng-repeat by user input

<input type="text" ng-model="searchText">

<ul>
<li ng-repeat="string in stringArray | filter:searchText">
{{string}}
</li>
</ul>

Where:
searchText = the text that the user wants to filter the list by
stringArray = an array of strings, e.g. ['string', 'array']

You can also display or reference the filtered items elsewhere by assigning the filter output an alias with as

GoalKicker.com – AngularJS Notes for Professionals 20

aliasName, like so:

<input type="text" ng-model="searchText">

<ul>
<li ng-repeat="string in stringArray | filter:searchText as filteredStrings">
{{string}}
</li>
</ul>
<p>There are {{filteredStrings.length}} matching results</p>

ng-repeat-start and ng-repeat-end

To repeat multiple DOM elements by defining a start and an end point you can use the ng-repeat-start and ng-
repeat-end directives.

<ul>
<li ng-repeat-start="item in [{a: 1, b: 2}, {a: 3, b:4}]">
{{item.a}}
</li>
<li ng-repeat-end>
{{item.b}}
</li>
</ul>

Output:

1
2
3
4

It is important to always close ng-repeat-start with ng-repeat-end.

Variables

ng-repeat also exposes these variables inside the expression

Variable Type Details

Equals to the index of the current iteration ($index===0 will evaluate to true at the first iterated
$index Number
element; see $first)
$first Boolean Evaluates to true at the first iterated element
$last Boolean Evaluates to true at the last iterated element
$middle Boolean Evaluates to true if the element is between the $first and $last
$even Boolean Evaluates to true at an even numbered iteration (equivalent to $index%2===0)
$odd Boolean Evaluates to true at an odd numbered iteration (equivalent to $index%2===1)

Performance considerations

Rendering ngRepeat can become slow, especially when using large collections.

If the objects in the collection have an identifier property, you should always track by the identifier instead of the
whole object, which is the default functionality. If no identifier is present, you can always use the built-in $index.

<div ng-repeat="item in itemCollection track by item.id">

<div ng-repeat="item in itemCollection track by $index">

GoalKicker.com – AngularJS Notes for Professionals 21

Scope of ngRepeat

ngRepeat will always create an isolated child scope so care must be taken if the parent scope needs to be accessed
inside the repeat.

Here is a simple example showing how you can set a value in your parent scope from a click event inside of
ngRepeat.

scope val: {{val}}<br/>

ctrlAs val: {{ctrl.val}}
<ul>
<li ng-repeat="item in itemCollection">
<a href="#" ng-click="$parent.val=item.value; ctrl.val=item.value;">
{{item.label}} {{item.value}}
</a>
</li>
</ul>

$scope.val = 0;
this.val = 0;

$scope.itemCollection = [{
id: 0,
value: 4.99,
label: 'Football'
},
{
id: 1,
value: 6.99,
label: 'Baseball'
},
{
id: 2,
value: 9.99,
label: 'Basketball'
}];

If there was only val = item.value at ng-click it won't update the val in the parent scope because of the isolated
scope. That's why the parent scope is accessed with $parent reference or with the controllerAs syntax (e.g. ng-
controller="mainController as ctrl").

Nested ng-repeat

You can also use nested ng-repeat.

<div ng-repeat="values in test">

<div ng-repeat="i in values">
[{{$parent.$index}},{{$index}}] {{i}}
</div>
</div>

var app = angular.module("myApp", []);

app.controller("ctrl", function($scope) {
$scope.test = [
['a', 'b', 'c'],
['d', 'e', 'f']
];
});

GoalKicker.com – AngularJS Notes for Professionals 22

Here to access the index of parent ng-repeat inside child ng-repeat, you can use $parent.$index.

Section 3.5: Built-In Directives Cheat Sheet

ng-app Sets the AngularJS section.

ng-init Sets a default variable value.

ng-bind Alternative to {{ }} template.

ng-bind-template Binds multiple expressions to the view.

ng-non-bindable States that the data isn't bindable.

ng-bind-html Binds inner HTML property of an HTML element.

ng-change Evaluates specified expression when the user changes the input.

ng-checked Sets the checkbox.

ng-class Sets the css class dynamically.

ng-cloak Prevents displaying the content until AngularJS has taken control.

ng-click Executes a method or expression when element is clicked.

ng-controller Attaches a controller class to the view.

ng-disabled Controls the form element's disabled property

ng-form Sets a form

ng-href Dynamically bind AngularJS variables to the href attribute.

ng-include Used to fetch, compile and include an external HTML fragment to your page.

ng-if Remove or recreates an element in the DOM depending on an expression

ng-switch Conditionally switch control based on matching expression.

ng-model Binds an input,select, textarea etc elements with model property.

ng-readonly Used to set readonly attribute to an element.

ng-repeat Used to loop through each item in a collection to create a new template.

ng-selected Used to set selected option in element.

ng-show/ng-hide Show/Hide elements based on an expression.

ng-src Dynamically bind AngularJS variables to the src attribute.

ng-submit Bind angular expressions to onsubmit events.

ng-value Bind angular expressions to the value of .

ng-required Bind angular expressions to onsubmit events.

GoalKicker.com – AngularJS Notes for Professionals 23

ng-style Sets CSS style on an HTML element.

ng-pattern Adds the pattern validator to ngModel.

ng-maxlength Adds the maxlength validator to ngModel.

ng-minlength Adds the minlength validator to ngModel.

ng-classeven Works in conjunction with ngRepeat and take effect only on odd (even) rows.

ng-classodd Works in conjunction with ngRepeat and take effect only on odd (even) rows.

ng-cut Used to specify custom behavior on cut event.

ng-copy Used to specify custom behavior on copy event.

ng-paste Used to specify custom behavior on paste event.

ng-options Used to dynamically generate a list of elements for the element.

ng-list Used to convert string into list based on specified delimiter.

ng-open Used to set the open attribute on the element, if the expression inside ngOpen is truthy.

Source (edited a bit)

Section 3.6: ngInclude

ng-include allows you to delegate the control of one part of the page to a specific controller. You may want to do
this because the complexity of that component is becoming such that you want to encapsulate all the logic in a
dedicated controller.

An example is:

<div ng-include
src="'/gridview'"
ng-controller='gridController as gc'>
</div>

Note that the /gridview will need to be served by the web server as a distinct and legitimate url.

Also, note that the src-attribute accepts an Angular expression. This could be a variable or a function call for
example or, like in this example, a string constant. In this case you need to make sure to wrap the source URL in
single quotes, so it will be evaluated as a string constant. This is a common source of confusion.

Within the /gridview html, you can refer to the gridController as if it were wrapped around the page, eg:

<div class="row">
<button type="button" class="btn btn-default" ng-click="gc.doSomething()"></button>
</div>

Section 3.7: ng-model-options

ng-model-options allows to change the default behavior of ng-model, this directive allows to register events that
will fire when the ng-model is updated and to attach a debounce effect.

GoalKicker.com – AngularJS Notes for Professionals 24

This directive accepts an expression that will evaluate to a definition object or a reference to a scope value.

Example:

<input type="text" ng-model="myValue" ng-model-options="{'debounce': 500}">

The above example will attach a debounce effect of 500 milliseconds on myValue, which will cause the model to
update 500 ms after the user finished typing over the input (that is, when the myValue finished updating).

Available object properties

1. updateOn: specifies which event should be bound to the input

ng-model-options="{ updateOn: 'blur'}" // will update on blur

2. debounce: specifies a delay of some millisecond towards the model update

ng-model-options="{'debounce': 500}" // will update the model after 1/2 second

3. allowInvalid: a boolean flag allowing for an invalid value to the model, circumventing default form
validation, by default these values would be treated as undefined.

4. getterSetter: a boolean flag indicating if to treat the ng-model as a getter/setter function instead of a plain
model value. The function will then run and return the model value.

Example:

<input type="text" ng-model="myFunc" ng-model-options="{'getterSetter': true}">

$scope.myFunc = function() {return "value";}

5. timezone: defines the timezone for the model if the input is of the date or time. types

Section 3.8: ngCopy

The ngCopy directive specifies behavior to be run on a copy event.

Prevent a user from copying data

<p ng-copy="blockCopy($event)">This paragraph cannot be copied</p>

In the controller

$scope.blockCopy = function(event) {
event.preventDefault();
console.log("Copying won't work");
}

Section 3.9: ngPaste

The ngPaste directive specifies custom behavior to run when a user pastes content

<input ng-paste="paste=true" ng-init="paste=false" placeholder='paste here'>

pasted: {{paste}}

GoalKicker.com – AngularJS Notes for Professionals 25

Section 3.10: ngClick
The ng-click directive attaches a click event to a DOM element.

The ng-click directive allows you to specify custom behavior when an element of DOM is clicked.

It is useful when you want to attach click events on buttons and handle them at your controller.

This directive accepts an expression with the events object available as $event

HTML

<input ng-click="onClick($event)">Click me</input>

Controller

.controller("ctrl", function($scope) {
$scope.onClick = function(evt) {
console.debug("Hello click event: %o ",evt);
}
})

HTML

<button ng-click="count = count + 1" ng-init="count=0">

Increment
</button>
<span>
count: {{count}}
</span>

HTML

<button ng-click="count()" ng-init="count=0">

Increment
</button>
<span>
count: {{count}}
</span>

Controller

...

$scope.count = function(){
$scope.count = $scope.count + 1;
}
...

When the button is clicked, an invocation of the onClick function will print "Hello click event" followed by the event
object.

Section 3.11: ngList

The ng-list directive is used to convert a delimited string from a text input to an array of strings or vice versa.

GoalKicker.com – AngularJS Notes for Professionals 26

The ng-list directive uses a default delimiter of ", " (comma space).

You can set the delimiter manually by assigning ng-list a delimeter like this ng-list="; ".

In this case the delimiter is set to a semi colon followed by a space.

By default ng-list has an attribute ng-trim which is set to true. ng-trim when false, will respect white space in
your delimiter. By default, ng-list does not take white space into account unless you set ng-trim="false".

Example:

angular.module('test', [])
.controller('ngListExample', ['$scope', function($scope) {
$scope.list = ['angular', 'is', 'cool!'];
}]);

A customer delimiter is set to be ;. And the model of the input box is set to the array that was created on the scope.

<body ng-app="test" ng-controller="ngListExample">

<input ng-model="list" ng-list="; " ng-trim="false">
</body>

The input box will display with the content: angular; is; cool!

Section 3.12: ngOptions

ngOptions is a directive that simplifies the creation of a html dropdown box for the selection of an item from an
array that will be stored in a model. The ngOptions attribute is used to dynamically generate a list of <option>
elements for the <select> element using the array or object obtained by evaluating the ngOptions comprehension
expression.

With ng-options the markup can be reduced to just a select tag and the directive will create the same select:

<select ng-model="selectedFruitNgOptions"
ng-options="curFruit as curFruit.label for curFruit in fruit">
</select>

There is anther way of creating SELECT options using ng-repeat, but it is not recommended to use ng-repeat as it is
mostly used for general purpose like, the forEach just to loop. Whereas ng-options is specifically for creating
SELECT tag options.

Above example using ng-repeat would be

<select ng-model="selectedFruit">
<option ng-repeat="curFruit in fruit" value="{{curFruit}}">
{{curFruit.label}}
</option>
</select>

FULL EXAMPLE

Lets see the above example in detail also with some variations in it.

Data model for the example:

$scope.fruit = [

GoalKicker.com – AngularJS Notes for Professionals 27

 { label: "Apples", value: 4, id: 2 },
{ label: "Oranges", value: 2, id: 1 },
{ label: "Limes", value: 4, id: 4 },
{ label: "Lemons", value: 5, id: 3 }
];

<!-- label for value in array -->

<select ng-options="f.label for f in fruit" ng-model="selectedFruit"></select>

Option tag generated on selection:

<option value="{ label: "Apples", value: 4, id: 2 }"> Apples </option>

Effects:

f.label will be the label of the <option> and the value will contain the entire object.

FULL EXAMPLE

<!-- select as label for value in array -->

<select ng-options="f.value as f.label for f in fruit" ng-model="selectedFruit"></select>

Option tag generated on selection:

<option value="4"> Apples </option>

Effects:

f.value (4) will be the value in this case while the label is still the same.

FULL EXAMPLE

<!-- label group by group for value in array -->

<select ng-options="f.label group by f.value for f in fruit" ng-model="selectedFruit"></select>

Option tag generated on selection:

<option value="{ label: "Apples", value: 4, id: 2 }"> Apples </option>

Effects:

Options will be grouped based on there value. Options with same value will fall under one category

FULL EXAMPLE

<!-- label disable when disable for value in array -->

<select ng-options="f.label disable when f.value == 4 for f in fruit" ng-
model="selectedFruit"></select>

Option tag generated on selection:

<option disabled="" value="{ label: "Apples", value: 4, id: 2 }"> Apples </option>

GoalKicker.com – AngularJS Notes for Professionals 28

Effects:

"Apples" and "Limes" will be disabled (unable to select) because of the condition disable when f.value==4. All
options with value=4 shall be disabled

FULL EXAMPLE

<!-- label group by group for value in array track by trackexpr -->
<select ng-options="f.value as f.label group by f.value for f in fruit track by f.id" ng-
model="selectedFruit"></select>

Option tag generated on selection:

<option value="4"> Apples </option>

Effects:

There is not visual change when using trackBy, but Angular will detect changes by the id instead of by reference
which is most always a better solution.

FULL EXAMPLE

<!-- label for value in array | orderBy:orderexpr track by trackexpr -->

<select ng-options="f.label for f in fruit | orderBy:'id' track by f.id" ng-
model="selectedFruit"></select>

Option tag generated on selection:

<option disabled="" value="{ label: "Apples", value: 4, id: 2 }"> Apples </option>

Effects:

orderBy is a AngularJS standard filter which arranges options in ascending order(by default) so "Oranges" in this will
appear 1st since its id = 1.

FULL EXAMPLE

All <select> with ng-options must have ng-model attached.

Section 3.13: ngSrc

Using Angular markup like {{hash}} in a src attribute doesn't work right. The browser will fetch from the URL with
the literal text {{hash}} until Angular replaces the expression inside {{hash}}. ng-src directive overrides the
original src attribute for the image tag element and solves the problem

<div ng-init="pic = 'pic_angular.jpg'">

<h1>Angular</h1>
<img ng-src="{{pic}}">
</div>

Section 3.14: ngModel

With ng-model you can bind a variable to any type of input field. You can display the variable using double curly

GoalKicker.com – AngularJS Notes for Professionals 29

braces, eg {{myAge}}.

<input type="text" ng-model="myName">

<p>{{myName}}</p>

As you type in the input field or change it in any way you will see the value in the paragraph update instantly.

The ng-model variable, in this instance, will be available in your controller as $scope.myName. If you are using the
controllerAs syntax:

<div ng-controller="myCtrl as mc">

<input type="text" ng-model="mc.myName">
<p>{{mc.myName}}</p>
</div>

You will need to refer to the controller's scope by pre-pending the controller's alias defined in the ng-controller
attribute to the ng-model variable. This way you won't need to inject $scope into your controller to reference your
ng-model variable, the variable will be available as this.myName inside your controller's function.

Section 3.15: ngClass

Let's assume that you need to show the status of a user and you have several possible CSS classes that could be
used. Angular makes it very easy to choose from a list of several possible classes which allow you to specify an
object list that include conditionals. Angular is able to use the correct class based on the truthiness of the
conditionals.

Your object should contain key/value pairs. The key is a class name that will be applied when the value (conditional)
evaluates to true.

<style>
.active { background-color: green; color: white; }
.inactive { background-color: gray; color: white; }
.adminUser { font-weight: bold; color: yellow; }
.regularUser { color: white; }
</style>

<span ng-class="{
active: user.active,
inactive: !user.active,
adminUser: user.level === 1,
regularUser: user.level === 2
}">John Smith</span>

Angular will check the $scope.user object to see the active status and the level number. Depending on the values
in those variables, Angular will apply the matching style to the <span>.

Section 3.16: ngDblclick

The ng-dblclick directive is useful when you want to bind a double-click event into your DOM elements.

This directive accepts an expression

HTML

<input type="number" ng-model="num = num + 1" ng-init="num=0">

GoalKicker.com – AngularJS Notes for Professionals 30

<button ng-dblclick="num++">Double click me</button>

In the above example, the value held at the input will be incremented when the button is double clicked.

Section 3.17: ngHref

ngHref is used instead of href attribute, if we have a angular expressions inside href value. The ngHref directive
overrides the original href attribute of an html tag using href attribute such as tag, tag etc.

The ngHref directive makes sure the link is not broken even if the user clicks the link before AngularJS has evaluated
the code.

Example 1

<div ng-init="linkValue = 'http://stackoverflow.com'">

<p>Go to <a ng-href="{{linkValue}}">{{linkValue}}</a>!</p>
</div>

Example 2 This example dynamically gets the href value from input box and load it as href value.

<input ng-model="value" />

<a id="link" ng-href="{{value}}">link</a>

Example 3

<script>
angular.module('angularDoc', [])
.controller('myController', function($scope) {
// Set some scope value.
// Here we set bootstrap version.
$scope.bootstrap_version = '3.3.7';

// Set the default layout value

$scope.layout = 'normal';
});
</script>
<!-- Insert it into Angular Code -->
<link rel="stylesheet" ng-href="//maxcdn.bootstrapcdn.com/bootstrap/{{ bootstrap_version
}}/css/bootstrap.min.css">
<link rel="stylesheet" ng-href="layout-{{ layout }}.css">

Section 3.18: ngPattern

The ng-pattern directive accepts an expression that evaluates to a regular expression pattern and uses that
pattern to validate a textual input.

Example:

Lets say we want an <input> element to become valid when it's value (ng-model) is a valid IP address.

Template:

<input type="text" ng-model="ipAddr" ng-pattern="ipRegex" name="ip" required>

Controller:

GoalKicker.com – AngularJS Notes for Professionals 31

$scope.ipRegex =
/\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b/;

Section 3.19: ngShow and ngHide

The ng-show directive shows or hides the HTML element based on if the expression passed to it is true or false. If
the value of the expression is falsy then it will hide. If it is truthy then it will show.

The ng-hide directive is similar. However, if the value is falsy it will show the HTML element. When the expression is
truthy it will hide it.

Working JSBin Example

Controller:

var app = angular.module('app', []);

angular.module('app')
.controller('ExampleController', ExampleController);

function ExampleController() {

var vm = this;

//Binding the username to HTML element

vm.username = '';

//A taken username

vm.taken_username = 'StackOverflow';

View

<section ng-controller="ExampleController as main">

<p>Enter Password</p>
<input ng-model="main.username" type="text">

<hr>

<!-- Will always show as long as StackOverflow is not typed in -->

<!-- The expression is always true when it is not StackOverflow -->
<div style="color:green;" ng-show="main.username != main.taken_username">
Your username is free to use!
</div>

<!-- Will only show when StackOverflow is typed in -->

<!-- The expression value becomes falsy -->
<div style="color:red;" ng-hide="main.username != main.taken_username">
Your username is taken!
</div>

<p>Enter 'StackOverflow' in username field to show ngHide directive.</p>

</section>

GoalKicker.com – AngularJS Notes for Professionals 32

Section 3.20: ngRequired
The ng-required adds or removes the required validation attribute on an element, which in turn will enable and
disable the require validation key for the input.

It is used to optionally define if an input element is required to have a non-empty value. The directive is helpful
when designing validation on complex HTML forms.

HTML

<input type="checkbox" ng-model="someBooleanValue">

<input type="text" ng-model="username" ng-required="someBooleanValue">

Section 3.21: ngMouseenter and ngMouseleave

The ng-mouseenter and ng-mouseleave directives are useful to run events and apply CSS styling when you hover
into or out of your DOM elements.

The ng-mouseenter directive runs an expression one a mouse enter event (when the user enters his mouse pointer
over the DOM element this directive resides in)

HTML

<div ng-mouseenter="applyStyle = true" ng-class="{'active': applyStyle}">

At the above example, when the user points his mouse over the div, applyStyle turns to true, which in turn
applies the .active CSS class at the ng-class.

The ng-mouseleave directive runs an expression one a mouse exit event (when the user takes his mouse cursor
away from the DOM element this directive resides in)

HTML

<div ng-mouseenter="applyStyle = true" ng-mouseleaver="applyStyle = false" ng-class="{'active':

applyStyle}">

Reusing the first example, now when the user takes him mouse pointer away from the div, the .active class is
removed.

Section 3.22: ngDisabled

This directive is useful to limit input events based on certain existing conditions.

The ng-disabled directive accepts and expression that should evaluate to either a truthy or a falsy values.

ng-disabled is used to conditionally apply the disabled attribute on an input element.

HTML

<input type="text" ng-model="vm.name">

<button ng-disabled="vm.name.length===0" ng-click="vm.submitMe">Submit</button>

vm.name.length===0 is evaluated to true if the input's length is 0, which is turn disables the button, disallowing the

GoalKicker.com – AngularJS Notes for Professionals 33

user to fire the click event of ng-click

Section 3.23: ngValue

Mostly used under ng-repeat ngValue is useful when dynamically generating lists of radio buttons using ngRepeat

<script>
angular.module('valueExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.names = ['pizza', 'unicorns', 'robots'];
$scope.my = { favorite: 'unicorns' };
}]);
</script>
<form ng-controller="ExampleController">
<h2>Which is your favorite?</h2>
<label ng-repeat="name in names" for="{{name}}">
{{name}}
<input type="radio"
ng-model="my.favorite"
ng-value="name"
id="{{name}}"
name="favorite">
</label>
<div>You chose {{my.favorite}}</div>
</form>

Working plnkr

GoalKicker.com – AngularJS Notes for Professionals 34

Chapter 4: Modules
Section 4.1: Modules
Module serves as a container of different parts of your app such as controllers, services, filters, directives, etc.
Modules can be referenced by other modules through Angular's dependency injection mechanism.

Creating a module:

angular
.module('app', []);

Array [] passed in above example is the list of modules app depends on, if there are no dependencies then we pass
Empty Array i.e. [].

Injecting a module as a dependency of another module:

angular.module('app', [
'app.auth',
'app.dashboard'
]);

Referencing a module:

angular
.module('app');

Section 4.2: Modules

Module is a container for various parts of your applications - controller, services, filters, directive, etc.

Why to use Modules

Most applications have a main method that instantiates and wires together the different parts of the application.
Angular apps don't have main method.
But in AngularJS the declarative process is easy to understand and one can package code as reusable modules.
Modules can be loaded in any order because modules delay execution.

declare a module

var app = angular.module('myApp', []);

// Empty array is list of modules myApp is depends on.
// if there are any required dependancies,
// then you can add in module, Like ['ngAnimate']

app.controller('myController', function() {

// write your business logic here

});

Module Loading and Dependencies

1. Configuration Blocks: get executed during provider and configuration phase.

angular.module('myModule', []).

GoalKicker.com – AngularJS Notes for Professionals 35

 config(function(injectables) {
// here you can only inject providers in to config blocks.
});

2. Run Blocks: get executed after the injector is created and are used to start the application.

angular.module('myModule', []).
run(function(injectables) {
// here you can only inject instances in to config blocks.
});

GoalKicker.com – AngularJS Notes for Professionals 36

Chapter 5: Components
Parameter Details
For using two-way data binding. This means that if you update that variable in your
=
component scope, the change will be reflected on the parent scope.
One-way bindings when we just want to read a value from a parent scope and not
<
update it.
@ String parameters.
& For callbacks in case your component needs to output something to its parent scope.
- -
LifeCycle Hooks Details (requires angular.version >= 1.5.3 )
Called on each controller after all the controllers on an element have been constructed
$onInit() and had their bindings initialized. This is a good place to put initialization code for your
controller.
Called whenever one-way bindings are updated. The changesObj is a hash whose keys
$onChanges(changesObj) are the names of the bound properties that have changed, and the values are an object
of the form { currentValue, previousValue, isFirstChange() } .
Called on a controller when its containing scope is destroyed. Use this hook for
$onDestroy()
releasing external resources, watches and event handlers.
Called after this controller’s element and its children have been linked. This hook can
$postLink() be considered analogous to the ngAfterViewInit and ngAfterContentInit hooks in
Angular 2.
Called on each turn of the digest cycle. Provides an opportunity to detect and act on
changes. Any actions that you wish to take in response to the changes that you detect
$doCheck()
must be invoked from this hook; implementing this has no effect on when $onChanges
is called.

Section 5.1: Basic Components and LifeCycle Hooks

What’s a component?

A component is basically a directive that uses a simpler configuration and that is suitable for a component-
based architecture, which is what Angular 2 is all about. Think of a component as a widget: A piece of HTML
code that you can reuse in several different places in your web application.

Component

angular.module('myApp', [])
.component('helloWorld', {
template: '<span>Hello World!</span>'
});

Markup

<div ng-app="myApp">
<hello-world> </hello-world>
</div>

Live Demo

Using External data in Component:

We could add a parameter to pass a name to our component, which would be used as follows:

GoalKicker.com – AngularJS Notes for Professionals 37

angular.module("myApp", [])
.component("helloWorld",{
template: '<span>Hello {{$ctrl.name}}!</span>',
bindings: { name: '@' }
});

Markup

<div ng-app="myApp">
<hello-world name="'John'" > </hello-world>
</div>

Live Demo

Using Controllers in Components

Let’s take a look at how to add a controller to it.

angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
controller: function(){
this.myName = 'Alain';
}
});

Markup

<div ng-app="myApp">
<hello-world name="John"> </hello-world>
</div>

CodePen Demo

Parameters passed to the component are available in the controller's scope just before its $onInit function gets
called by Angular. Consider this example:

angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
controller: function(){
this.$onInit = function() {
this.myName = "Mac" + this.name;
}
}
});

In the template from above, this would render "Hello John, I'm MacJohn!".

Note that $ctrl is the Angular default value for controllerAs if one is not specified.

Live Demo

GoalKicker.com – AngularJS Notes for Professionals 38

Using “require” as an Object

In some instances you may need to access data from a parent component inside your component.

This can be achieved by specifying that our component requires that parent component, the require will give us
reference to the required component controller, which can then be used in our controller as shown in the example
below:

Notice that required controllers are guaranteed to be ready only after the $onInit hook.

angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
require: {
parent: '^parentComponent'
},
controller: function () {
// here this.parent might not be initiated yet

this.$onInit = function() {
// after $onInit, use this.parent to access required controller
this.parent.foo();
}

}
});

Keep in mind, though, that this creates a tight coupling between the child and the parent.

Section 5.2: Components In angular JS

The components in angularJS can be visualised as a custom directive (< html > this in an HTML directive, and
something like this will be a custom directive < ANYTHING >). A component contains a view and a controller.
Controller contains the business logic which is binded with an view , which the user sees. The component differs
from a angular directive because it contains less configuration. An angular component can be defined like this.

angular.module("myApp",[]).component("customer", {})

Components are defined on the angular modules. They contains two arguments, One is the name of the
component and second one is a object which contains key value pair, which defines which view and which
controller it is going to use like this .

angular.module("myApp",[]).component("customer", {
templateUrl : "customer.html", // your view here
controller: customerController, //your controller here
controllerAs: "cust" //alternate name for your controller
})

"myApp" is the name of the app we are building and customer is the name of our component. Now for calling it in
main html file we will just put it like this

<customer></customer>

Now this directive will be replaced by the view you have specified and the business logic you have written in your

GoalKicker.com – AngularJS Notes for Professionals 39

controller.

NOTE : Remember component take a object as second argument while directive take a factory function as
argument.

GoalKicker.com – AngularJS Notes for Professionals 40

Chapter 6: Custom Directives
Parameter Details
Property to set the scope of the directive. It can be set as false, true or as an isolate scope:
scope
{ @, =, <, & }.
scope: falsy Directive uses parent scope. No scope created for directive.
Directive inherits parent scope prototypically as a new child scope. If there are multiple
scope: true directives on the same element requesting a new scope, then they will share one new
scope.
One way binding of a directive scope property to a DOM attribute value. As the attribute
scope: { @ }
value bound in the parent, it will change in the directive scope.
Bi-directional attribute binding that changes the attribute in the parent if the directive
scope: { = }
attribute changes and vice-versa.
One way binding of a directive scope property and a DOM attribute expression. The
expression is evaluated in the parent. This watches the identity of the parent value so
scope: { < } changes to an object property in the parent won't be reflected in the directive. Changes to
an object property in a directive will be reflected in the parent, since both reference the
same object
scope: { & } Allows the directive to pass data to an expression to be evaluated in the parent.
This function is used to perform DOM transformation on the directive template before the
link function runs. It accepts tElement ( the directive template ) and tAttr ( list of
compile: function attributes declared on the directive ). It does not have access to the scope. It may return a
function that will be registered as a post-link function or it may return an object with pre
and post properties with will be registered as the pre-link and post-link functions.
The link property can be configured as a function or object. It can receive the following
arguments: scope(directive scope), iElement( DOM element where directive is applied ),
iAttrs( collection of DOM element attributes ), controller( array of controllers required by
link: function/object
directive ), transcludeFn. It is mainly used to for setting up DOM listeners, watching model
properties for changes, and updating the DOM. It executes after the template is cloned. It
is configured independently if there is no compile function.
Link function that executes before any child link functions. By default, child directive link
pre-link function functions execute before parent directive link functions and the pre-link function enables
the parent to link first. One use case is if the child requires data from the parent.
Link function that executives after child elements are linked to parent. It is commonly used
post-link function for attaching event handlers and accessing child directives, but data required by the child
directive should not be set here because the child directive will have already been linked.
Defines how to call the directive from within the DOM. Possible values (Assuming our
directive name is demoDirective): E - Element name (<demo-directive></demo-
directive>), A - Attribute (<div demo-directive></div>), C - Matching class (<div
restrict: string class="demo-directive"></div>), M - By comment (<!-- directive: demo-directive -
->). The restrict property can also support multiple options, for example - restrict:
"AC" will restrict the directive to Attribute OR Class. If omitted, the default value is "EA"
(Element or Attribute).
require: Locate demoDirective's controller on the current element and inject its controller as the
'demoDirective' fourth argument to the linking function. Throw an error if not found.
require:
Attempt to locate the demoDirective's controller or pass null to the link fn if not found.
'?demoDirective'
require: Locate the demoDirective's controller by searching the element and its parents. Throw an
'^demoDirective' error if not found.
require: Locate the demoDirective's controller by searching the element's parents. Throw an error
'^^demoDirective' if not found.
require: Attempt to locate the demoDirective's controller by searching the element and its parents
'?^demoDirective' or pass null to the link fn if not found.
require: Attempt to locate the demoDirective's controller by searching the element's parents, or
'?^^demoDirective' pass null to the link fn if not found.

GoalKicker.com – AngularJS Notes for Professionals 41

Here you will learn about the Directives feature of AngularJS. Below you will find information on what Directives are,
as well as Basic and Advanced examples of how to use them.

Section 6.1: Creating and consuming custom directives

Directives are one of the most powerful features of angularjs. Custom angularjs directives are used to extend
functionality of html by creating new html elements or custom attributes to provide certain behavior to an html tag.

directive.js

// Create the App module if you haven't created it yet

var demoApp= angular.module("demoApp", []);

// If you already have the app module created, comment the above line and create a reference of the
app module
var demoApp = angular.module("demoApp");

// Create a directive using the below syntax

// Directives are used to extend the capabilities of html element
// You can either create it as an Element/Attribute/class
// We are creating a directive named demoDirective. Notice it is in CamelCase when we are defining
the directive just like ngModel
// This directive will be activated as soon as any this element is encountered in html

demoApp.directive('demoDirective', function () {

// This returns a directive definition object

// A directive definition object is a simple JavaScript object used for configuring the directive’s
behaviour,template..etc
return {
// restrict: 'AE', signifies that directive is Element/Attribute directive,
// "E" is for element, "A" is for attribute, "C" is for class, and "M" is for comment.
// Attributes are going to be the main ones as far as adding behaviors that get used the most.
// If you don't specify the restrict property it will default to "A"
restrict :'AE',

// The values of scope property decides how the actual scope is created and used inside a
directive. These values can be either “false”, “true” or “{}”. This creates an isolate scope for the
directive.
// '@' binding is for passing strings. These strings support {{}} expressions for interpolated
values.
// '=' binding is for two-way model binding. The model in parent scope is linked to the model in
the directive's isolated scope.
// '&' binding is for passing a method into your directive's scope so that it can be called
within your directive.
// The method is pre-bound to the directive's parent scope, and supports arguments.
scope: {
name: "@", // Always use small casing here even if it's a mix of 2-3 words
},

// template replaces the complete element with its text.

template: "<div>Hello {{name}}!</div>",

// compile is called during application initialization. AngularJS calls it once when html page is
loaded.
compile: function(element, attributes) {
element.css("border", "1px solid #cccccc");

// linkFunction is linked with each element with scope to get the element specific data.

GoalKicker.com – AngularJS Notes for Professionals 42

 var linkFunction = function($scope, element, attributes) {
element.html("Name: <b>"+$scope.name +"</b>");
element.css("background-color", "#ff00ff");
};
return linkFunction;
}
};
});

This directive can then be used in App as :

<html>

<head>
<title>Angular JS Directives</title>
</head>
<body>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="directive.js"></script>
<div ng-app = "demoApp">
<!-- Notice we are using Spinal Casing here -->
<demo-directive name="World"></demo-directive>

</div>
</body>
</html>

Section 6.2: Directive Definition Object Template

demoApp.directive('demoDirective', function () {
var directiveDefinitionObject = {
multiElement:
priority:
terminal:
scope: {},
bindToController: {},
controller:
controllerAs:
require:
restrict:
templateNamespace:
template:
templateUrl:
transclude:
compile:
link: function(){}
};
return directiveDefinitionObject;
});

1. multiElement - set to true and any DOM nodes between the start and end of the directive name will be
collected and grouped together as directive elements
2. priority - allows specification of the order to apply directives when multiple directives are defined on a
single DOM element. Directives with higher numbers are compiled first.
3. terminal - set to true and the current priority will be the last set of directives to execute
4. scope - sets scope of the directive
5. bind to controller - binds scope properties directly to directive controller
6. controller - controller constructor function

GoalKicker.com – AngularJS Notes for Professionals 43

Exploring the Variety of Random
Documents with Different Content
 5. BELGRAVE ROAD, PIMLICO, LONDON.

C HEAP BOOKS.—Just
CATALOGUE of BOOKS
published,
(may be had on
a

application), some of which are:—Mant's and

Dayly's Bible, 4 vols. 4to., calf gilt edges, 4
guineas; Bolingbroke's Works and
Correspondence, 7 vols. 4to., russia, fine
copy, 3l. 5s.; Stafford Gallery, nearly 300
engravings. 2 vols. folio, half morocco, 3
guineas, published at 10 guineas; Hussey's
(Dr., of Hayes) Holy Bible, 3 vols. imperial
8vo., half calf, 2 guineas; Don's General
Gardener and Dictionary, 4 vols. 4to., new,
half calf gilt, full of plates, 2l. 10s.; Hobbes'
Works, with Life, best edition, folio calf, fine
copy, 2l. 12s. 6d.; Hammond's (Dr H.)
complete Works, with Life by Bishop Fell 4
vols. folio, calf, fine copy, 4 guineas; a large
pulpit Bible, elephant folio, whole bound in
morocco, gilt edges, 3 guineas, the binding
alone cost 5 guineas; Watts' Bibliotheca
Britannica, 4to., 11 Parts, 5l. 10s.; a folio
volume of Drawings by Bartolozzi, half bound
morocco, 3l. 13s. 6d., published at 25l. On
sale by THOMAS MILLARD 70. Newgate
Street, City.

HANDBOOKS FOR THE

CLASSICAL STUDENT,
(WITH QUESTIONS):
UNDER THE GENERAL SUPERINTENDENCE
AND EDITORSHIP OF THE

REV. T. K. ARNOLD, M.A.,

RECTOR OF LYNDON, AND LATE FELLOW OF
TRINITY COLLEGE, CAMBRIDGE.
"The leading characteristics of these
Handbooks is their exceeding simplicity,
the excellent order with which they are
arranged, the completeness of their
details, and the remarkable accuracy and
elaborate erudition which they exhibit in
every page. They have this further
advantage, which it is impossible to over-
 estimate:—that they bring down their
respective subjects to the very latest
period, and present us with the results of
the most recent investigations of the
critics and antiquarians by whom they
have been discussed."—Dublin Review,
October 1, 1851.
I. HANDBOOKS OF HISTORY AND
GEOGRAPHY. From the German of Pütz.
Translated by the Rev. R. B. PAUL.
1. ANCIENT HISTORY, 6s. 6d. 2.
MEDIÆVAL HISTORY, 4s. 6d. 3.
MODERN HISTORY, 5s. 6d.—These
Works have been already translated
into the Swedish and Dutch languages.
II. THE ATHENIAN STAGE, 4s. From the
German of WITZSCHEL. Translated by
the Rev. R. B. PAUL.
III. GRECIAN ANTIQUITIES, 3s. 6d.—ROMAN
ANTIQUITIES, 3s. 6d. From the Swedish
of BOJESEN. Translated from Dr. HOFFA'S
German version, by the Rev. R. B. PAUL.
—HEBREW ANTIQUITIES, by the Rev. H.
BROWNE, M.A. 4s.
IV. HANDBOOKS of SYNONYMES.
1. GREEK SYNONYMES, 6s. 6d. From
the French of PILLON.
2. LATIN SYNONYMES, 7s. 6d. From
the German of DÖDERLEIN. Translated
by the Rev. H. H. ARNOLD.
V. HANDBOOKS of VOCABULARY.
1. GREEK (in the press).
2. LATIN (in preparation.)
3. FRENCH, 4s. 6d.
4. GERMAN, 4s.
VI. HANDBOOK of GRECIAN MYTHOLOGY
(with Outline Engravings of Ancient
Statues), 5s. From the German of
Professor STOLL, by the Rev. R. B. PAUL.
RIVINGTONS, St. Paul's Church Yard, and
Waterloo Place.

Q UARTERLY
No.
REVIEW.
CLXXX.—NOTICE.—
ADVERTISEMENTS and BILLS for the above
Periodical will be in time if forwarded to the
Publisher before the 27th inst.
JOHN MURRAY, Albemarle Street.

Now Ready, with Maps, 8vo.

H ISTORY of GREECE. By GEORGE GROTE,

Esq. Vols. IX. and X. From the Restoration
of the Democracy at Athens, down to the
Accession of Philip of Macedon, B.C. 403-359.
JOHN MURRAY, Albemarle Street.

Now Ready, 8vo. 15s.

H ISTORY of ENGLAND and FRANCE under

the HOUSE of LANCASTER. With an
Introductory View of the Early Reformation.
JOHN MURRAY, Albemarle Street.

This Day, with Portrait, 8vo., 10s. 6d.

H ISTORY of GUSTAVUS VASA, King of

Sweden: With Extracts from his
Correspondence.
JOHN MURRAY, Albemarle Street.

M UDIE'S SELECT LIBRARY is REMOVED

from 28. Upper King Street, to 510. NEW
OXFORD STREET, and 20. MUSEUM STREET,
BLOOMSBURY, with improved arrangements,
and greatly increased supplies of New and
Choice Books.—For Prospectuses apply to
CHARLES EDWARD MUDIE, 510. New Oxford
Street.

B OOK PLATES.—Heraldic Queries answered;

Family Arms found, and every information
afforded. Drawing of Arms, 2s. 6d.; Painting
ditto, 5s.; Book Plate Crest, 5s.; Arms, &c.,
from 20s.; Crest on Card Plate, and One
Hundred Cards, 8s.; Queries answered for 1s.
Saxon, Mediæval, and Modern Style Book
Plates. The best Authorities and MS. Books of
thirty-five years' practice consulted. Heraldic
Stamps for Linen or Books, with reversed
Cyphers and Crests. Apply, if by letter,
enclosing stamps or post office order, to
JAMES FRISWELL (Son-in-law to J. Rumley,
publisher of "The Crest Book," "Heraldic
Illustrations"). Heraldic Engraver, 12. Brooke
Street, Holborn.

Just Published, price 1s.

O N GEOLOGY in relation to the STUDIES of

the UNIVERSITY of OXFORD. By H. E.
STRICKLAND, M.A., F.G.S., Deputy Reader in
Geology, Oxford.
J. VINCENT, Oxford; G. BELL, Fleet Street,
London.

15th March, 1852.

T OAdvertisement
SELLERS of OLD BOOKS.—The following
is inserted as an
experiment, and in the hope that, though the
Works wanted are generally of little value,
Booksellers will be so obliging as to look over
their stock, and, if they have a copy of any of
the under-mentioned, be pleased to send
notice of it, and of the price, to Mr. J.
FRANCIS, 14. Wellington Street North,
Strand, London.
A Collection of LETTERS on GOVERNMENT,
LIBERTY, and the CONSTITUTION, which
appeared from the time Lord Bute was
appointed First Lord of the Treasury to
the Death of Lord Egremont. 3 vols.
[possibly 4], published in 1774 by Almon.
A Collection of esteemed POLITICAL TRACTS,
which appeared 1764, 5, and 6, 3 or 4
vols., published 1766 or 7, by Almon.
A Collection of most interesting POLITICAL
LETTERS which appeared in the Public
Papers from 1763 to 1765. 3 or 4 vols.
Almon, 1766.
THE BRITON (a Periodical). 1763.
THE AUDITOR (a Periodical). 1763.
A Collection of all REMARKABLE and
PERSONAL PASSAGES in the BRITON,
NORTH BRITON, and AUDITOR, Almon,
1765.
THE EXPOSTULATION, a Poem. Bingley,
1768.
VOX SENATUS, 1771.
TWO REMARKABLE LETTERS of JUNIUS and
THE FREEHOLDER. 1770.
 A complete Collection of JUNIUS'S LETTERS.
Thompson, 1770.
JUNIUS'S LETTERS, Wheble, 1771.
WILKES'S SPEECHES. 3 vols.

Printed by Thomas Clark Shaw, of No. 8. New Street Square, at No. 5.

New Street Square, in the Parish of St. Bride, in the City of
London; and published by George Bell, of No. 186. Fleet Street,
in the Parish of St. Dunstan in the West, in the City of London,
Publisher, at 186. Fleet Street aforesaid.—Saturday, March 20,
1852.

Transcriber's Note: Original spelling variations have not

been standardized.

Pages in "Notes and Queries", Vol. I-V

Notes and Queries Vol. I.

Vol., No., Date, Year, Pages, PG #

Vol. I No. 1 November 3, 1849. Pages 1 - 17 PG # 8603

Vol. I No. 2 November 10, 1849. Pages 18 - 32 PG # 11265
Vol. I No. 3 November 17, 1849. Pages 33 - 46 PG # 11577
Vol. I No. 4 November 24, 1849. Pages 49 - 63 PG # 13513

Vol. I No. 5 December 1, 1849. Pages 65 - 80 PG # 11636

Vol. I No. 6 December 8, 1849. Pages 81 - 95 PG # 13550
Vol. I No. 7 December 15, 1849. Pages 97 - 112 PG #
11651
Vol. I No. 8 December 22, 1849. Pages 113 - 128 PG #
11652
Vol. I No. 9 December 29, 1849. Pages 130 - 144 PG #
13521
Vol. I No. 10 January 5, 1850. Pages 145 - 160 PG #
Vol. I No. 11 January 12, 1850. Pages 161 - 176 PG #
11653
Vol. I No. 12 January 19, 1850. Pages 177 - 192 PG #
11575
Vol. I No. 13 January 26, 1850. Pages 193 - 208 PG #
11707

Vol. I No. 14 February 2, 1850. Pages 209 - 224 PG #

13558
Vol. I No. 15 February 9, 1850. Pages 225 - 238 PG #
11929
Vol. I No. 16 February 16, 1850. Pages 241 - 256 PG #
16193
Vol. I No. 17 February 23, 1850. Pages 257 - 271 PG #
12018

Vol. I No. 18 March 2, 1850. Pages 273 - 288 PG # 13544

Vol. I No. 19 March 9, 1850. Pages 289 - 309 PG # 13638
Vol. I No. 20 March 16, 1850. Pages 313 - 328 PG # 16409
Vol. I No. 21 March 23, 1850. Pages 329 - 343 PG # 11958
Vol. I No. 22 March 30, 1850. Pages 345 - 359 PG # 12198

Vol. I No. 23 April 6, 1850. Pages 361 - 376 PG # 12505

Vol. I No. 24 April 13, 1850. Pages 377 - 392 PG # 13925
Vol. I No. 25 April 20, 1850. Pages 393 - 408 PG # 13747
Vol. I No. 26 April 27, 1850. Pages 409 - 423 PG # 13822

Vol. I No. 27 May 4, 1850. Pages 425 - 447 PG # 13712

Vol. I No. 28 May 11, 1850. Pages 449 - 463 PG # 13684
Vol. I No. 29 May 18, 1850. Pages 465 - 479 PG # 15197
Vol. I No. 30 May 25, 1850. Pages 481 - 495 PG # 13713

Notes and Queries Vol. II.

Vol., No., Date, Year, Pages, PG #

Vol. II No. 31 June 1, 1850. Pages 1- 15 PG # 12589

Vol. II No. 32 June 8, 1850. Pages 17- 32 PG # 15996
Vol. II No. 33 June 15, 1850. Pages 33- 48 PG # 26121
Vol. II No. 34 June 22, 1850. Pages 49- 64 PG # 22127
Vol. II No. 35 June 29, 1850. Pages 65- 79 PG # 22126

Vol. II No. 36 July 6, 1850. Pages 81- 96 PG # 13361

Vol. II No. 37 July 13, 1850. Pages 97-112 PG # 13729
Vol. II No. 38 July 20, 1850. Pages 113-128 PG # 13362
Vol. II No. 39 July 27, 1850. Pages 129-143 PG # 13736

Vol. II No. 40 August 3, 1850. Pages 145-159 PG # 13389

Vol. II No. 41 August 10, 1850. Pages 161-176 PG # 13393
Vol. II No. 42 August 17, 1850. Pages 177-191 PG # 13411
Vol. II No. 43 August 24, 1850. Pages 193-207 PG # 13406
Vol. II No. 44 August 31, 1850. Pages 209-223 PG # 13426

Vol. II No. 45 September 7, 1850. Pages 225-240 PG #

13427
Vol. II No. 46 September 14, 1850. Pages 241-256 PG #
13462
Vol. II No. 47 September 21, 1850. Pages 257-272 PG #
13936
Vol. II No. 48 September 28, 1850. Pages 273-288 PG #
13463

Vol. II No. 49 October 5, 1850. Pages 289-304 PG # 13480

Vol. II No. 50 October 12, 1850. Pages 305-320 PG #
13551
Vol. II No. 51 October 19, 1850. Pages 321-351 PG #
15232
Vol. II No. 52 October 26, 1850. Pages 353-367 PG #
22624

Vol. II No. 53 November 2, 1850. Pages 369-383 PG #

13540
Vol. II No. 54 November 9, 1850. Pages 385-399 PG #
22138
Vol. II No. 55 November 16, 1850. Pages 401-415 PG #
15216
Vol. II No. 56 November 23, 1850. Pages 417-431 PG #
15354
Vol. II No. 57 November 30, 1850. Pages 433-454 PG #
15405

Vol. II No. 58 December 7, 1850. Pages 457-470 PG #

21503
Vol. II No. 59 December 14, 1850. Pages 473-486 PG #
15427
Vol. II No. 60 December 21, 1850. Pages 489-502 PG #
24803
Vol. II No. 61 December 28, 1850. Pages 505-524 PG #
16404

Notes and Queries Vol. III.

Vol., No., Date, Year, Pages, PG #

Vol. III No. 62 January 4, 1851. Pages 1- 15 PG # 15638

Vol. III No. 63 January 11, 1851. Pages 17- 31 PG # 15639
Vol. III No. 64 January 18, 1851. Pages 33- 47 PG # 15640
Vol. III No. 65 January 25, 1851. Pages 49- 78 PG # 15641

Vol. III No. 66 February 1, 1851. Pages 81- 95 PG # 22339

Vol. III No. 67 February 8, 1851. Pages 97-111 PG # 22625
Vol. III No. 68 February 15, 1851. Pages 113-127 PG #
22639
Vol. III No. 69 February 22, 1851. Pages 129-159 PG #
23027

Vol. III No. 70 March 1, 1851. Pages 161-174 PG # 23204

Vol. III No. 71 March 8, 1851. Pages 177-200 PG # 23205
Vol. III No. 72 March 15, 1851. Pages 201-215 PG # 23212
Vol. III No. 73 March 22, 1851. Pages 217-231 PG # 23225
Vol. III No. 74 March 29, 1851. Pages 233-255 PG # 23282

Vol. III No. 75 April 5, 1851. Pages 257-271 PG # 23402

Vol. III No. 76 April 12, 1851. Pages 273-294 PG # 26896
Vol. III No. 77 April 19, 1851. Pages 297-311 PG # 26897
Vol. III No. 78 April 26, 1851. Pages 313-342 PG # 26898

Vol. III No. 79 May 3, 1851. Pages 345-359 PG # 26899

Vol. III No. 80 May 10, 1851. Pages 361-382 PG # 32495
Vol. III No. 81 May 17, 1851. Pages 385-399 PG # 29318
Vol. III No. 82 May 24, 1851. Pages 401-415 PG # 28311
Vol. III No. 83 May 31, 1851. Pages 417-440 PG # 36835

Vol. III No. 84 June 7, 1851. Pages 441-472 PG # 37379

Vol. III No. 85 June 14, 1851. Pages 473-488 PG # 37403
Vol. III No. 86 June 21, 1851. Pages 489-511 PG # 37496
Vol. III No. 87 June 28, 1851. Pages 513-528 PG # 37516

Notes and Queries Vol. IV.

Vol., No., Date, Year, Pages, PG #

Vol. IV No. 88 July 5, 1851. Pages 1- 15 PG # 37548

Vol. IV No. 89 July 12, 1851. Pages 17- 31 PG # 37568
Vol. IV No. 90 July 19, 1851. Pages 33- 47 PG # 37593
Vol. IV No. 91 July 26, 1851. Pages 49- 79 PG # 37778

Vol. IV No. 92 August 2, 1851. Pages 81- 94 PG # 38324

Vol. IV No. 93 August 9, 1851. Pages 97-112 PG # 38337
Vol. IV No. 94 August 16, 1851. Pages 113-127 PG # 38350
Vol. IV No. 95 August 23, 1851. Pages 129-144 PG # 38386
Vol. IV No. 96 August 30, 1851. Pages 145-167 PG # 38405

Vol. IV No. 97 September 6, 1851. Pages 169-183 PG #

38433
Vol. IV No. 98 September 13, 1851. Pages 185-200 PG #
38491
Vol. IV No. 99 September 20, 1851. Pages 201-216 PG #
38574
Vol. IV No. 100 September 27, 1851. Pages 217-246 PG #
38656

Vol. IV No. 101 October 4, 1851. Pages 249-264 PG #

38701
Vol. IV No. 102 October 11, 1851. Pages 265-287 PG #
38773
Vol. IV No. 103 October 18, 1851. Pages 289-303 PG #
38864
Vol. IV No. 104 October 25, 1851. Pages 305-333 PG #
38926

Vol. IV No. 105 November 1, 1851. Pages 337-359 PG #

39076
Vol. IV No. 106 November 8, 1851. Pages 361-374 PG #
39091
Vol. IV No. 107 November 15, 1851. Pages 377-396 PG #
39135
Vol. IV No. 108 November 22, 1851. Pages 401-414 PG #
39197
Vol. IV No. 109 November 29, 1851. Pages 417-430 PG #
39233

Vol. IV No. 110 December 6, 1851. Pages 433-460 PG #

39338
Vol. IV No. 111 December 13, 1851. Pages 465-478 PG #
39393
Vol. IV No. 112 December 20, 1851. Pages 481-494 PG #
39438
Vol. IV No. 113 December 27, 1851. Pages 497-510 PG #
39503

Notes and Queries Vol. V.

Vol., No., Date, Year, Pages, PG #

Vol. V No. 114 January 3, 1852. Pages 1-19 PG # 40171

Vol. V No. 115 January 10, 1852. Pages 25-45 PG # 40582
Vol. V No. 116 January 17, 1852. Pages 49-70 PG # 40642
Vol. V No. 117 January 24, 1852. Pages 73-95 PG # 40678
Vol. V No. 118 January 31, 1852. Pages 97-118 PG # 40716

Vol. V No. 119 February 7, 1852. Pages 121-143 PG #

40742
Vol. V No. 120 February 14, 1852. Pages 145-167 PG #
40743
Vol. V No. 121 February 21, 1852. Pages 169-191 PG #
40773
Vol. V No. 122 February 28, 1852. Pages 193-215 PG #
40779

Vol. V No. 123 March 6, 1852. Pages 217-239 PG # 40804

Vol. V No. 124 March 13, 1852. Pages 241-263 PG # 40843

Index
Vol., Dates, Year, PG #

Vol I. Index. [Nov. 1849-May 1850] PG # 13536

INDEX TO THE SECOND VOLUME. MAY-DEC., 1850 PG #
13571
INDEX TO THE THIRD VOLUME. JAN.-JUNE, 1851 PG #
26770
INDEX TO THE FOURTH VOLUME. JULY-DEC., 1851 PG #
40166
*** END OF THE PROJECT GUTENBERG EBOOK NOTES AND
QUERIES, VOL. V, NUMBER 125, MARCH 20, 1852 ***

Updated editions will replace the previous one—the old editions

will be renamed.

Creating the works from print editions not protected by U.S.

copyright law means that no one owns a United States
copyright in these works, so the Foundation (and you!) can copy
and distribute it in the United States without permission and
without paying copyright royalties. Special rules, set forth in the
General Terms of Use part of this license, apply to copying and
distributing Project Gutenberg™ electronic works to protect the
PROJECT GUTENBERG™ concept and trademark. Project
Gutenberg is a registered trademark, and may not be used if
you charge for an eBook, except by following the terms of the
trademark license, including paying royalties for use of the
Project Gutenberg trademark. If you do not charge anything for
copies of this eBook, complying with the trademark license is
very easy. You may use this eBook for nearly any purpose such
as creation of derivative works, reports, performances and
research. Project Gutenberg eBooks may be modified and
printed and given away—you may do practically ANYTHING in
the United States with eBooks not protected by U.S. copyright
law. Redistribution is subject to the trademark license, especially
commercial redistribution.

START: FULL LICENSE

THE FULL PROJECT GUTENBERG LICENSE
 PLEASE READ THIS BEFORE YOU DISTRIBUTE OR USE THIS WORK

To protect the Project Gutenberg™ mission of promoting the

free distribution of electronic works, by using or distributing this
work (or any other work associated in any way with the phrase
“Project Gutenberg”), you agree to comply with all the terms of
the Full Project Gutenberg™ License available with this file or
online at www.gutenberg.org/license.

Section 1. General Terms of Use and

Redistributing Project Gutenberg™
electronic works
1.A. By reading or using any part of this Project Gutenberg™
electronic work, you indicate that you have read, understand,
agree to and accept all the terms of this license and intellectual
property (trademark/copyright) agreement. If you do not agree
to abide by all the terms of this agreement, you must cease
using and return or destroy all copies of Project Gutenberg™
electronic works in your possession. If you paid a fee for
obtaining a copy of or access to a Project Gutenberg™
electronic work and you do not agree to be bound by the terms
of this agreement, you may obtain a refund from the person or
entity to whom you paid the fee as set forth in paragraph 1.E.8.

1.B. “Project Gutenberg” is a registered trademark. It may only

be used on or associated in any way with an electronic work by
people who agree to be bound by the terms of this agreement.
There are a few things that you can do with most Project
Gutenberg™ electronic works even without complying with the
full terms of this agreement. See paragraph 1.C below. There
are a lot of things you can do with Project Gutenberg™
electronic works if you follow the terms of this agreement and
help preserve free future access to Project Gutenberg™
electronic works. See paragraph 1.E below.
1.C. The Project Gutenberg Literary Archive Foundation (“the
Foundation” or PGLAF), owns a compilation copyright in the
collection of Project Gutenberg™ electronic works. Nearly all the
individual works in the collection are in the public domain in the
United States. If an individual work is unprotected by copyright
law in the United States and you are located in the United
States, we do not claim a right to prevent you from copying,
distributing, performing, displaying or creating derivative works
based on the work as long as all references to Project
Gutenberg are removed. Of course, we hope that you will
support the Project Gutenberg™ mission of promoting free
access to electronic works by freely sharing Project Gutenberg™
works in compliance with the terms of this agreement for
keeping the Project Gutenberg™ name associated with the
work. You can easily comply with the terms of this agreement
by keeping this work in the same format with its attached full
Project Gutenberg™ License when you share it without charge
with others.

1.D. The copyright laws of the place where you are located also
govern what you can do with this work. Copyright laws in most
countries are in a constant state of change. If you are outside
the United States, check the laws of your country in addition to
the terms of this agreement before downloading, copying,
displaying, performing, distributing or creating derivative works
based on this work or any other Project Gutenberg™ work. The
Foundation makes no representations concerning the copyright
status of any work in any country other than the United States.

1.E. Unless you have removed all references to Project

Gutenberg:

1.E.1. The following sentence, with active links to, or other

immediate access to, the full Project Gutenberg™ License must
appear prominently whenever any copy of a Project
Gutenberg™ work (any work on which the phrase “Project
Gutenberg” appears, or with which the phrase “Project
Gutenberg” is associated) is accessed, displayed, performed,
viewed, copied or distributed:

This eBook is for the use of anyone anywhere in the United

States and most other parts of the world at no cost and
with almost no restrictions whatsoever. You may copy it,
give it away or re-use it under the terms of the Project
Gutenberg License included with this eBook or online at
www.gutenberg.org. If you are not located in the United
States, you will have to check the laws of the country
where you are located before using this eBook.

1.E.2. If an individual Project Gutenberg™ electronic work is

derived from texts not protected by U.S. copyright law (does not
contain a notice indicating that it is posted with permission of
the copyright holder), the work can be copied and distributed to
anyone in the United States without paying any fees or charges.
If you are redistributing or providing access to a work with the
phrase “Project Gutenberg” associated with or appearing on the
work, you must comply either with the requirements of
paragraphs 1.E.1 through 1.E.7 or obtain permission for the use
of the work and the Project Gutenberg™ trademark as set forth
in paragraphs 1.E.8 or 1.E.9.

1.E.3. If an individual Project Gutenberg™ electronic work is

posted with the permission of the copyright holder, your use and
distribution must comply with both paragraphs 1.E.1 through
1.E.7 and any additional terms imposed by the copyright holder.
Additional terms will be linked to the Project Gutenberg™
License for all works posted with the permission of the copyright
holder found at the beginning of this work.

1.E.4. Do not unlink or detach or remove the full Project

Gutenberg™ License terms from this work, or any files
 containing a part of this work or any other work associated with
Project Gutenberg™.

1.E.5. Do not copy, display, perform, distribute or redistribute

this electronic work, or any part of this electronic work, without
prominently displaying the sentence set forth in paragraph 1.E.1
with active links or immediate access to the full terms of the
Project Gutenberg™ License.

1.E.6. You may convert to and distribute this work in any binary,
compressed, marked up, nonproprietary or proprietary form,
including any word processing or hypertext form. However, if
you provide access to or distribute copies of a Project
Gutenberg™ work in a format other than “Plain Vanilla ASCII” or
other format used in the official version posted on the official
Project Gutenberg™ website (www.gutenberg.org), you must,
at no additional cost, fee or expense to the user, provide a copy,
a means of exporting a copy, or a means of obtaining a copy
upon request, of the work in its original “Plain Vanilla ASCII” or
other form. Any alternate format must include the full Project
Gutenberg™ License as specified in paragraph 1.E.1.

1.E.7. Do not charge a fee for access to, viewing, displaying,

performing, copying or distributing any Project Gutenberg™
works unless you comply with paragraph 1.E.8 or 1.E.9.

1.E.8. You may charge a reasonable fee for copies of or

providing access to or distributing Project Gutenberg™
electronic works provided that:

• You pay a royalty fee of 20% of the gross profits you derive
from the use of Project Gutenberg™ works calculated using the
method you already use to calculate your applicable taxes. The
fee is owed to the owner of the Project Gutenberg™ trademark,
but he has agreed to donate royalties under this paragraph to
the Project Gutenberg Literary Archive Foundation. Royalty
 payments must be paid within 60 days following each date on
which you prepare (or are legally required to prepare) your
periodic tax returns. Royalty payments should be clearly marked
as such and sent to the Project Gutenberg Literary Archive
Foundation at the address specified in Section 4, “Information
about donations to the Project Gutenberg Literary Archive
Foundation.”

• You provide a full refund of any money paid by a user who

notifies you in writing (or by e-mail) within 30 days of receipt
that s/he does not agree to the terms of the full Project
Gutenberg™ License. You must require such a user to return or
destroy all copies of the works possessed in a physical medium
and discontinue all use of and all access to other copies of
Project Gutenberg™ works.

• You provide, in accordance with paragraph 1.F.3, a full refund of

any money paid for a work or a replacement copy, if a defect in
the electronic work is discovered and reported to you within 90
days of receipt of the work.

• You comply with all other terms of this agreement for free
distribution of Project Gutenberg™ works.

1.E.9. If you wish to charge a fee or distribute a Project

Gutenberg™ electronic work or group of works on different
terms than are set forth in this agreement, you must obtain
permission in writing from the Project Gutenberg Literary
Archive Foundation, the manager of the Project Gutenberg™
trademark. Contact the Foundation as set forth in Section 3
below.

1.F.

1.F.1. Project Gutenberg volunteers and employees expend

considerable effort to identify, do copyright research on,
transcribe and proofread works not protected by U.S. copyright
law in creating the Project Gutenberg™ collection. Despite these
efforts, Project Gutenberg™ electronic works, and the medium
on which they may be stored, may contain “Defects,” such as,
but not limited to, incomplete, inaccurate or corrupt data,
transcription errors, a copyright or other intellectual property
infringement, a defective or damaged disk or other medium, a
computer virus, or computer codes that damage or cannot be
read by your equipment.

1.F.2. LIMITED WARRANTY, DISCLAIMER OF DAMAGES - Except

for the “Right of Replacement or Refund” described in
paragraph 1.F.3, the Project Gutenberg Literary Archive
Foundation, the owner of the Project Gutenberg™ trademark,
and any other party distributing a Project Gutenberg™ electronic
work under this agreement, disclaim all liability to you for
damages, costs and expenses, including legal fees. YOU AGREE
THAT YOU HAVE NO REMEDIES FOR NEGLIGENCE, STRICT
LIABILITY, BREACH OF WARRANTY OR BREACH OF CONTRACT
EXCEPT THOSE PROVIDED IN PARAGRAPH 1.F.3. YOU AGREE
THAT THE FOUNDATION, THE TRADEMARK OWNER, AND ANY
DISTRIBUTOR UNDER THIS AGREEMENT WILL NOT BE LIABLE
TO YOU FOR ACTUAL, DIRECT, INDIRECT, CONSEQUENTIAL,
PUNITIVE OR INCIDENTAL DAMAGES EVEN IF YOU GIVE
NOTICE OF THE POSSIBILITY OF SUCH DAMAGE.

1.F.3. LIMITED RIGHT OF REPLACEMENT OR REFUND - If you

discover a defect in this electronic work within 90 days of
receiving it, you can receive a refund of the money (if any) you
paid for it by sending a written explanation to the person you
received the work from. If you received the work on a physical
medium, you must return the medium with your written
explanation. The person or entity that provided you with the
defective work may elect to provide a replacement copy in lieu
of a refund. If you received the work electronically, the person
or entity providing it to you may choose to give you a second
opportunity to receive the work electronically in lieu of a refund.
If the second copy is also defective, you may demand a refund
in writing without further opportunities to fix the problem.

1.F.4. Except for the limited right of replacement or refund set

forth in paragraph 1.F.3, this work is provided to you ‘AS-IS’,
WITH NO OTHER WARRANTIES OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO WARRANTIES OF
MERCHANTABILITY OR FITNESS FOR ANY PURPOSE.

1.F.5. Some states do not allow disclaimers of certain implied

warranties or the exclusion or limitation of certain types of
damages. If any disclaimer or limitation set forth in this
agreement violates the law of the state applicable to this
agreement, the agreement shall be interpreted to make the
maximum disclaimer or limitation permitted by the applicable
state law. The invalidity or unenforceability of any provision of
this agreement shall not void the remaining provisions.

1.F.6. INDEMNITY - You agree to indemnify and hold the

Foundation, the trademark owner, any agent or employee of the
Foundation, anyone providing copies of Project Gutenberg™
electronic works in accordance with this agreement, and any
volunteers associated with the production, promotion and
distribution of Project Gutenberg™ electronic works, harmless
from all liability, costs and expenses, including legal fees, that
arise directly or indirectly from any of the following which you
do or cause to occur: (a) distribution of this or any Project
Gutenberg™ work, (b) alteration, modification, or additions or
deletions to any Project Gutenberg™ work, and (c) any Defect
you cause.

Section 2. Information about the Mission

of Project Gutenberg™
Project Gutenberg™ is synonymous with the free distribution of
electronic works in formats readable by the widest variety of
computers including obsolete, old, middle-aged and new
computers. It exists because of the efforts of hundreds of
volunteers and donations from people in all walks of life.

Volunteers and financial support to provide volunteers with the

assistance they need are critical to reaching Project
Gutenberg™’s goals and ensuring that the Project Gutenberg™
collection will remain freely available for generations to come. In
2001, the Project Gutenberg Literary Archive Foundation was
created to provide a secure and permanent future for Project
Gutenberg™ and future generations. To learn more about the
Project Gutenberg Literary Archive Foundation and how your
efforts and donations can help, see Sections 3 and 4 and the
Foundation information page at www.gutenberg.org.

Section 3. Information about the Project

Gutenberg Literary Archive Foundation
The Project Gutenberg Literary Archive Foundation is a non-
profit 501(c)(3) educational corporation organized under the
laws of the state of Mississippi and granted tax exempt status
by the Internal Revenue Service. The Foundation’s EIN or
federal tax identification number is 64-6221541. Contributions
to the Project Gutenberg Literary Archive Foundation are tax
deductible to the full extent permitted by U.S. federal laws and
your state’s laws.

The Foundation’s business office is located at 809 North 1500

West, Salt Lake City, UT 84116, (801) 596-1887. Email contact
links and up to date contact information can be found at the
Foundation’s website and official page at
www.gutenberg.org/contact
 Section 4. Information about Donations to
the Project Gutenberg Literary Archive
Foundation
Project Gutenberg™ depends upon and cannot survive without
widespread public support and donations to carry out its mission
of increasing the number of public domain and licensed works
that can be freely distributed in machine-readable form
accessible by the widest array of equipment including outdated
equipment. Many small donations ($1 to $5,000) are particularly
important to maintaining tax exempt status with the IRS.

The Foundation is committed to complying with the laws

regulating charities and charitable donations in all 50 states of
the United States. Compliance requirements are not uniform
and it takes a considerable effort, much paperwork and many
fees to meet and keep up with these requirements. We do not
solicit donations in locations where we have not received written
confirmation of compliance. To SEND DONATIONS or determine
the status of compliance for any particular state visit
www.gutenberg.org/donate.

While we cannot and do not solicit contributions from states

where we have not met the solicitation requirements, we know
of no prohibition against accepting unsolicited donations from
donors in such states who approach us with offers to donate.

International donations are gratefully accepted, but we cannot

make any statements concerning tax treatment of donations
received from outside the United States. U.S. laws alone swamp
our small staff.

Please check the Project Gutenberg web pages for current

donation methods and addresses. Donations are accepted in a
number of other ways including checks, online payments and
credit card donations. To donate, please visit:
www.gutenberg.org/donate.

Section 5. General Information About

Project Gutenberg™ electronic works
Professor Michael S. Hart was the originator of the Project
Gutenberg™ concept of a library of electronic works that could
be freely shared with anyone. For forty years, he produced and
distributed Project Gutenberg™ eBooks with only a loose
network of volunteer support.

Project Gutenberg™ eBooks are often created from several

printed editions, all of which are confirmed as not protected by
copyright in the U.S. unless a copyright notice is included. Thus,
we do not necessarily keep eBooks in compliance with any
particular paper edition.

Most people start at our website which has the main PG search
facility: www.gutenberg.org.

This website includes information about Project Gutenberg™,

including how to make donations to the Project Gutenberg
Literary Archive Foundation, how to help produce our new
eBooks, and how to subscribe to our email newsletter to hear
about new eBooks.
Welcome to our website – the perfect destination for book lovers and
knowledge seekers. We believe that every book holds a new world,
offering opportunities for learning, discovery, and personal growth.
That’s why we are dedicated to bringing you a diverse collection of
books, ranging from classic literature and specialized publications to
self-development guides and children's books.

More than just a book-buying platform, we strive to be a bridge

connecting you with timeless cultural and intellectual values. With an
elegant, user-friendly interface and a smart search system, you can
quickly find the books that best suit your interests. Additionally,
our special promotions and home delivery services help you save time
and fully enjoy the joy of reading.

Join us on a journey of knowledge exploration, passion nurturing, and

personal growth every day!

ebookbell.com