AngularJS Notes for Professionals (GoalKicker.com) (Z-Library)

📄 File Format: PDF

💾 File Size: 2.1 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

AngularJS Notes for ProfessionalsAngularJS Notes for Professionals GoalKicker.com Free Programming Books Disclaimer This is an unocial free book created for educational purposes and is not aliated with ocial AngularJS group(s) or company(s). All trademarks and registered trademarks are the property of their respective owners 100+ pages of professional hints and tricks

📄 Page 2

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 .........................................................................................

📄 Page 3

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 ..............................................................................................................................

📄 Page 4

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 .....................................................................................................................................

📄 Page 5

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 ............................................................................................................................

📄 Page 6

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 ................................................................................................

📄 Page 7

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 ......................................................................................................................................................

📄 Page 8

GoalKicker.com – AngularJS Notes for Professionals 1 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 web@petercv.com

📄 Page 9

GoalKicker.com – AngularJS Notes for Professionals 2 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

📄 Page 10

GoalKicker.com – AngularJS Notes for Professionals 3 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

📄 Page 11

GoalKicker.com – AngularJS Notes for Professionals 4 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

📄 Page 12

GoalKicker.com – AngularJS Notes for Professionals 5 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

📄 Page 13

GoalKicker.com – AngularJS Notes for Professionals 6 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: Load the Angular framework from a Content Delivery Network.1. <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script> Define the HTML document as an Angular application with the ng-app directive2. <html ng-app> Initialize the name variable using ng-init3. <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. Bind data from the model to the view on HTML controls. Bind an <input> to the name property with ng-model4. <input ng-model="name" />

📄 Page 14

GoalKicker.com – AngularJS Notes for Professionals 7 Display content from the model using double braces {{ }}5. <span>Hello, {{ name }}</span> Another way of binding the name property is using ng-bind instead of handlebars"{{ }}"6. <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">

📄 Page 15

GoalKicker.com – AngularJS Notes for Professionals 8 <ul> <li ng-repeat="msg in vm.messages">{{ msg }}</li> </ul> </div> </body> </html> Every line of the file is explained below: Live Demo ng-app="myDemoApp", the ngApp directive that bootstraps the application and tells angular that a DOM1. element is controlled by a specific angular.module named "myDemoApp"; <script src="angular.min.js"> is the first step in bootstrapping the AngularJS library;2. Three functions (MyDataService, DemoController, and startup) are declared, which are used (and explained) below. angular.module(...) used with an array as the second argument creates a new module. This array is used3. to supply a list of module dependencies. In this example we chain calls on the result of the module(...) function; .service(...) creates an Angular Service and returns the module for chaining;4. .controller(...) creates an Angular Controller and returns the module for chaining;5. .config(...) Use this method to register work which needs to be performed on module loading.6. .run(...) makes sure code is run at startup time and takes an array of items as a parameter. Use this7. 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; ng-class is the ngClass directive to set a dynamic class, and in this example utilizes hasStarted on the8. $rootScope dynamically ng-cloak is a directive to prevent the unrendered Angular html template (e.g. "{{ msg }}") to be briefly9. shown before Angular has fully loaded the application. ng-controller is the directive that asks Angular to instantiate a new controller of specific name to10. orchestrate that part of the DOM; ng-repeat is the directive to make Angular iterate over a collection and clone a DOM template for each item;11. {{ msg }} showcases interpolation: on-the-spot rendering of a part of the scope or controller;12. 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

📄 Page 16

GoalKicker.com – AngularJS Notes for Professionals 9 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.

📄 Page 17

GoalKicker.com – AngularJS Notes for Professionals 10 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 !'.

📄 Page 18

GoalKicker.com – AngularJS Notes for Professionals 11 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

📄 Page 19

GoalKicker.com – AngularJS Notes for Professionals 12 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.

📄 Page 20

GoalKicker.com – AngularJS Notes for Professionals 13 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.