1 Acknowledgements and Revisions 1.1 Acknowledgements 1.2 Revisions 2 Introduction 2.1 How the Book Started 2.2 About the Book 2.3 Angular 2.4 Angular and Naming 2.5 My Opinion as a Developer 2.6 So Why Is Angular the Answer? 2.7 Sounds Good, Doesn’t It? 3 Web Applications and AJAX 3.1 Introduction 3.2 Introducing the Client & Server 3.3 Server (Web Server) 3.4 Client (Web Browser) 3.5 Communication (Usually Performed with HTTP) 3.6 Server-Side Web Application 3.7 Client-Side Web Application (or Single Page Web Application) 3.8 The Balancing Act 3.9 AJAX 3.10 Callbacks 3.11 Promises 3.12 Encoding 3.13 HATEOAS & HAL 3.14 Debugging Tools 3.15 Analyzing JSON 4 AngularJS vs Angular (Old vs New) 4.1 Introduction 4.2 What is AngularJS? 4.3 Why Was AngularJS so Popular? 4.4 When Were AngularJS and Angular born? 4.5 Browsers 4.6 TypeScript 4.7 Modules 4.8 Controllers and Components 4.9 Dependency Injection 4.10 Scope 4.11 Forms 4.12 Templates 4.13 Conclusion 5 JavaScript 5.1 JavaScript History 5.2 JavaScript Shortcomings (< ES6) 5.3 JavaScript Strict Mode 5.4 JavaScript (>= ES6) 5.5 Modules 5.6 Deployment of ES6 Code 5.7 TypeScript 6 TypeScript 6.1 Introduction 6.2 What is TypeScript? 6.3 Can Browsers Run TypeScript? 6.4 The Microsoft TypeScript Website 6.5 The Main Differences between the JavaScript and TypeScript Languages 7 Editors 7.1 Introduction 7.2 Visual Studio Code 7.3 Website 7.4 Opening Your Project in Visual Studio Code. 7.5 How to Open Files 7.6 How to See the Available Commands and Hot Keys 7.7 How to Configure the Build 7.8 How to Build 7.9 To View Build Errors 7.10 Sidebar Modes 7.11 Extensions 7.12 Notes 8 Node 8.1 Introduction 8.2 Installing Node 8.3 Setting Up Node in Your Project Folder 8.4 Running Code with the Node Command 8.5 Node Modules and Dependencies 8.6 Node Package Manager 8.7 Node Module Installation Levels 8.8 ‘package.json’ File 8.9 Folder ‘node_modules’ 8.10 Npm - Installing Modules into Node 8.11 Updating Node Modules 8.12 Checking Your Node Version 8.13 Uninstalling Node Modules 8.14 How to Install the Latest Angular 9 Start Coding With the CLI 9.1 Introduction 9.2 Angular CLI Gets You Going Fast 9.3 This Chapter 9.4 CLI = Command Line Interface 9.5 You Need Node to Install CLI 9.6 Create a Start Project 9.7 Open the Start Project 9.8 Modify the Start Project 9.9 Start Project - Compile Errors 9.10 Start Project - Runtime Errors 9.11 Watcher & Web Server 9.12 CLI Version 9.13 How the Start Project Bootstraps 9.14 Conclusion 10 Introducing Components 10.1 Introduction 10.2 What Does a Component Consist Of? 10.3 Component Annotation 10.4 Component Templates 10.5 Component Styles 10.6 Component Class 10.7 Model View Controller 10.8 Introduction to Data Binding 10.9 One Way Data Binding with ‘{{’ and ‘}}’ 10.10 One Way Data Binding - Example Code 10.11 One Way Data Binding with ‘[’ and ‘]’ (or *) 10.12 One Way Data Binding – Example Code #1 10.13 Html Element Attributes 10.14 One Way Data Binding – Example Code #2 10.15 Two Way Data Binding with ‘[(’ and ‘)]’ 10.16 Two Way Data Binding – Example Code 10.17 Event Handling 10.18 Event Handling – Example Code 11 Introducing Modules 11.1 Introduction 11.2 Why Modules? 11.3 Different Types of Modules 11.4 AngularJS Module System 11.5 JavaScript Modules 11.6 Angular Module System 11.7 Angular Module System – Example 11.8 Deployment - Separate Modules 11.9 Deployment – Node 12 Introducing Webpack 12.1 Introduction 12.2 Webpack and the Angular CLI 12.3 What Does Webpack Do? 12.4 What about Your Modules and Dependencies? 12.5 Benefits 12.6 Chunks 12.7 Development Process 12.8 Install Webpack 12.9 Configuration 13 Introducing Directives 13.1 Introduction 13.2 Components May Use Directives 13.3 Types of Directives 13.4 NgIf 13.5 NgIf – Example 13.6 NgFor 13.7 NgFor – Example 13.8 NgSwitch, NgSwitchWhen, NgSwitchDefault 13.9 NgSwitch – Example 13.10 NgClass 13.11 NgClass - Example 13.12 NgStyle 13.13 NgStyle - Example 13.14 Other Directives 13.15 Creating Directives 13.16 Accessing the DOM in Directives 13.17 Creating Simple Directive - Example 13.18 Accessing the DOM Events in Directives 13.19 Accessing the DOM Properties in Directives 13.20 Creating Directive with Events – Example 14 More Components 14.1 Introduction 14.2 Components and Child Components 14.3 Composition 14.4 Composition & Data Location 14.5 Data Flowing Downwards 14.6 Events Flowing Upwards 14.7 Emitting Output through @Output() 14.8 Composition Example 14.9 Template Reference Variables 14.10 Component Class Lifecycle 15 Dependency Injection 15.1 Introduction 15.2 Advantages of Dependency Injection 15.3 Angular Provided Services 15.4 Other Services 15.5 Services You May Want to Write Specifically for Your Own Project 15.6 Writing Service Classes 15.7 Providers 15.8 Injectors 15.9 Resolving Dependencies 15.10 Creating Service – Example 15.11 Why Do Multiple Instances of the Same Service Get Created? 15.12 How Do We Ensure a Single Instance of the Service Gets Created? 15.13 What Do We Do If We Want to Share a Singleton of the Service? 15.14 Convert App to Share One Instance of Service – Example #1 15.15 Convert App to Share One Instance of Service – Example #2 15.16 Class Providers 15.17 Class Providers – Example 15.18 Factory Providers 15.19 Factory Providers – Example #1 15.20 Factory Providers – Example #2 15.21 Value Providers 15.22 Value Providers – Example 15.23 Injector API 16 Angular 4 and UI Widgets 16.1 Introduction 16.2 How to Use a UI Widget Library with Angular 16.3 Pre-Angular Way 16.4 The Angular Way 16.5 Pre-Angular (Html & Css & JavaScript) vs Angular Module 16.6 Bootstrap 16.7 How to Start Using Ng Bootstrap 16.8 Bootstrap - Example Code 16.9 Material 16.10 How to Start Using Angular Material 16.11 Material – Example Code 16.12 Conclusion 17 Routes and Navigation 17.1 Introduction 17.2 Router 17.3 Router Routes on The Client Side 17.4 Router Module 17.5 Router Module – Objects Included 17.6 Simple Routing - Example 17.7 Nested Routing 17.8 Nested Routing Urls 17.9 Nested Routing – Example 17.10 Route Configuration 17.11 Route Configuration – Data 17.12 Route Configuration – Data – Example 17.13 Route Path Parameters 17.14 Route Path Parameters – Example 17.15 Route Query Parameters 17.16 Route Query Parameters – Example 17.17 Router - Imperative Navigation 17.18 Router - Imperative Navigation Methods 17.19 Router - Imperative Navigation – Example 17.20 Router – Extracting Data 17.21 Dynamically Changing Route Configuration 17.22 Route Guards 17.23 Route Guards – Example 18 Observers, Reactive Programming & RxJS 18.1 Introduction 18.2 Reactive Extensions 18.3 RxJS Libraries 18.4 What Are Asynchronous Data Streams? 18.5 Examples of Asynchronous Data Streams 18.6 Observable Sequences (Observables) 18.7 Observers 18.8 Observers - Example Code 18.9 Subscriptions 18.10 Observables, Observers and Future JavaScript ES7 18.11 Operators 18.12 Operators - Example Code 18.13 Operators that Create Observables 18.14 Operator ‘From’ 18.15 Operator ‘Interval’ 18.16 Operator ‘Of (Was ‘Just’) 18.17 Operator ‘Range’ 18.18 Operator ‘Repeat’ 18.19 Operator ‘Timer’ 18.20 Operators that Transform Items Emitted by Observables 18.21 Operator ‘Buffer’ 18.22 Operator ‘Map’ 18.23 Operator ‘Scan’ 18.24 Operators that Filter Items Emitted By Observables 18.25 Operator ‘Debounce’ 18.26 Operator ‘Debounce’ - Example Code 18.27 Operator ‘Distinct’ 18.28 Operator ‘Filter’ 18.29 Operator ‘Take’ 18.30 Operators that Combine Other Observables 18.31 Share Operator 18.32 Share Operator – Example Code 19 RxJS with Angular 19.1 Introduction 19.2 AngularJS 19.3 Angular Uses Observables Instead of Promises 19.4 Observables and Angular 19.5 Observables and DOM Events 19.6 Observables and DOM Events – Example Code 19.7 Observables and Http Services 20 Http 20.1 Introduction 20.2 Http & Http Methods 20.3 Http Headers 20.4 Http Body 20.5 Http – Passing Information 20.6 REST 20.7 JSON 20.8 Http Client 20.9 Using the Http Client 20.10 Asynchronous Operations 20.11 Request Options 20.12 Http Method ‘Get’ 20.13 Http Method ‘Get’ – Example 20.14 Http Method ‘Get’ Using Parameters 20.15 Http Method ‘Get’ Using Parameters – Example 20.16 Http Method ‘Get’ Using Path Parameters – Example 20.17 Http Method ‘Post’ 20.18 Http Method ‘Post’ – Example 20.19 Http Method ‘Put’ Using Path Parameters 20.20 Http Method ‘Patch’ Using Path Parameters 20.21 Http Method ‘Delete’ Using Path Parameters 20.22 Modifying the Server Response 20.23 Modifying the Server Response - Example 20.24 Handling an Error Server Response 20.25 Handling an Error Server Response - Example 20.26 Asynchronous Pipes 20.27 Asynchronous Pipes – Example 21 Forms 21.1 Introduction 21.2 Two Methods of Writing Forms 21.3 Form Module 21.4 Form Model Objects 21.5 Forms and CSS 21.6 Template Forms 21.7 Template Forms – Module Setup 21.8 Template Forms - Example 21.9 Template Variables and Data Binding 21.10 Template Forms and Data Binding - Example 21.11 Template Forms and CSS – Example 21.12 Reactive Forms 21.13 Reactive Forms – Module Setup 21.14 Reactive Forms – Bind Template to Model 21.15 Reactive Forms - Example 21.16 Reactive Forms – Form Builder 21.17 Reactive Forms - Form Group Nesting 21.18 Reactive Forms - Form Group Nesting – Example 21.19 Validators 21.20 Combining Multiple Validators 21.21 Custom Validation 21.22 Custom Validation – Example Code 22 Pipes 22.1 Introduction 22.2 Angular Pipes 22.3 Angular Pipes – Example 22.4 Custom Pipes 22.5 Generate Custom Pipe using CLI 22.6 Custom Pipes - Example Code 23 Zones & Change Detection 23.1 Introduction 23.2 Change Detection 23.3 NgZone is Zone.js for Angular 23.4 How Does NgZone / Zone.js Notice Events? 23.5 NgZone Is Used by Angular to Notice Events 23.6 How Does Angular Perform Change Detection? 23.7 Mutable Objects vs Immutable Objects 23.8 Using NgZone 23.9 Example Code – Running Asynchronous Code within Angular Zone. 23.10 Example Code – Running Asyncronous Code Outside Angular Zone. 24 Testing 24.1 Introduction