Angular 5 Projects Learn to Build Single Page Web Applications Using 70+ Projects — Mark Clow Angular 5 Projects Learn to Build Single Page Web Applications Using 70+ Projects Mark Clow Angular 5 Projects Mark Clow Sandy Springs, Georgia, USA ISBN-13 (pbk): 978-1-4842-3278-1 ISBN-13 (electronic): 978-1-4842-3279-8 https://doi.org/10.1007/978-1-4842-3279-8 Library of Congress Control Number: 2018934214 Copyright © 2018 by Mark Clow This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. Managing Director, Apress Media LLC: Welmoed Spahr Acquisitions Editor: Louise Corrigan Development Editor: James Markham Coordinating Editor: Nancy Chen Cover designed by eStudioCalamar Cover image designed by Freepik (www.freepik.com) Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-ny@springer- sbm.com, or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation. For information on translations, please e-mail [email protected], or visit www.apress.com/ rights-permissions. Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales web page at www.apress.com/bulk-sales. Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub via the book’s product page, located at www.apress.com/9781484232781. For more detailed information, please visit www.apress.com/source-code. Printed on acid-free paper Table of Contents About the Author ...................................................................................................xvii About the Technical Reviewer ................................................................................xix Acknowledgments ..................................................................................................xxi Introduction ..........................................................................................................xxiii Chapter 1: Web Applications and AJAX Communications ........................................1 Introducing the Client and Server �������������������������������������������������������������������������������������������������2 Server-Side Web Applications �������������������������������������������������������������������������������������������������2 Client-Side Web Applications ���������������������������������������������������������������������������������������������������3 Striking a Balance �������������������������������������������������������������������������������������������������������������������4 Creating Web Applications with AJAX �������������������������������������������������������������������������������������������5 Callbacks ���������������������������������������������������������������������������������������������������������������������������������6 Promises ����������������������������������������������������������������������������������������������������������������������������������6 Encoding ����������������������������������������������������������������������������������������������������������������������������������7 HAL and HATEOAS �������������������������������������������������������������������������������������������������������������������8 Monitoring Data Traffic ������������������������������������������������������������������������������������������������������������9 Analyzing JSON ���������������������������������������������������������������������������������������������������������������������������11 Summary�������������������������������������������������������������������������������������������������������������������������������������13 Chapter 2: AngularJS vs. Angular (Old vs. New) ....................................................15 Semantic Versioning �������������������������������������������������������������������������������������������������������������������16 Platform ��������������������������������������������������������������������������������������������������������������������������������������17 Browsers Run JavaScript Using JavaScript Engines �������������������������������������������������������������18 Shims and Polyfills ����������������������������������������������������������������������������������������������������������������18 iii Table of ConTenTs TypeScript �����������������������������������������������������������������������������������������������������������������������������������19 Transpilation ��������������������������������������������������������������������������������������������������������������������������19 Debugging and Map Files ������������������������������������������������������������������������������������������������������20 Transpilation and the Angular CLI Tool ����������������������������������������������������������������������������������21 Modules ��������������������������������������������������������������������������������������������������������������������������������������21 Controllers and Components �������������������������������������������������������������������������������������������������������22 Dependency Injection and Constructor Injection ������������������������������������������������������������������������22 Scope, Controllers, and Components ������������������������������������������������������������������������������������������24 Forms ������������������������������������������������������������������������������������������������������������������������������������������24 Templates ������������������������������������������������������������������������������������������������������������������������������������25 Summary�������������������������������������������������������������������������������������������������������������������������������������25 Chapter 3: JavaScript .............................................................................................27 JavaScript ES5: Limitations and Shortcomings ��������������������������������������������������������������������������27 Types �������������������������������������������������������������������������������������������������������������������������������������27 Fail Fast Behavior ������������������������������������������������������������������������������������������������������������������28 Value/Object Comparison ������������������������������������������������������������������������������������������������������28 Scoping ����������������������������������������������������������������������������������������������������������������������������������30 JavaScript Strict Mode ����������������������������������������������������������������������������������������������������������31 JavaScript ES6: Changes and Improvements �����������������������������������������������������������������������������33 Constants �������������������������������������������������������������������������������������������������������������������������������34 Block Scoped Variables and Functions ����������������������������������������������������������������������������������34 Arrow Functions ��������������������������������������������������������������������������������������������������������������������35 Functions Arguments Can Now Have Default Values �������������������������������������������������������������36 Functions Now Accept Rest Parameters �������������������������������������������������������������������������������36 String Interpolation ����������������������������������������������������������������������������������������������������������������37 Modules ���������������������������������������������������������������������������������������������������������������������������������37 TypeScript ������������������������������������������������������������������������������������������������������������������������������39 Summary�������������������������������������������������������������������������������������������������������������������������������������40 iv Table of ConTenTs Chapter 4: TypeScript .............................................................................................41 Strong Typing ������������������������������������������������������������������������������������������������������������������������������42 Classes ����������������������������������������������������������������������������������������������������������������������������������������43 Interfaces ������������������������������������������������������������������������������������������������������������������������������������44 Modules ��������������������������������������������������������������������������������������������������������������������������������������46 Internal Modules ��������������������������������������������������������������������������������������������������������������������46 External Modules �������������������������������������������������������������������������������������������������������������������47 Enumerations and Generics ��������������������������������������������������������������������������������������������������������48 Constructors ��������������������������������������������������������������������������������������������������������������������������������48 Functions ������������������������������������������������������������������������������������������������������������������������������������49 Getters and Setters ���������������������������������������������������������������������������������������������������������������������51 Types �������������������������������������������������������������������������������������������������������������������������������������������52 Primitive Types ����������������������������������������������������������������������������������������������������������������������52 Object Types ��������������������������������������������������������������������������������������������������������������������������53 Union Types ���������������������������������������������������������������������������������������������������������������������������53 Alias Types �����������������������������������������������������������������������������������������������������������������������������54 Tuple Types ����������������������������������������������������������������������������������������������������������������������������54 Compilation Options ��������������������������������������������������������������������������������������������������������������������54 Summary�������������������������������������������������������������������������������������������������������������������������������������55 Chapter 5: Visual Studio Code ................................................................................57 Getting Started with Visual Studio Code �������������������������������������������������������������������������������������57 Seeing Files, Commands, and Hot Keys ��������������������������������������������������������������������������������58 Starting a Build ����������������������������������������������������������������������������������������������������������������������60 Introducing the Interface�������������������������������������������������������������������������������������������������������������62 Explorer ���������������������������������������������������������������������������������������������������������������������������������62 Search �����������������������������������������������������������������������������������������������������������������������������������63 Git ������������������������������������������������������������������������������������������������������������������������������������������64 Debug ������������������������������������������������������������������������������������������������������������������������������������64 Extensions �����������������������������������������������������������������������������������������������������������������������������������66 Summary�������������������������������������������������������������������������������������������������������������������������������������68 v Table of ConTenTs Chapter 6: Node ......................................................................................................69 Setting Up and Running Node �����������������������������������������������������������������������������������������������������70 Node Package Manager (npm) ����������������������������������������������������������������������������������������������71 Node Module Installation Levels ��������������������������������������������������������������������������������������������72 Running npm install [Module Name] to Install the Module ���������������������������������������������������72 Updating Node Modules ��������������������������������������������������������������������������������������������������������73 Uninstalling Node Modules ����������������������������������������������������������������������������������������������������73 The package�json File �����������������������������������������������������������������������������������������������������������������74 Updating package�json ����������������������������������������������������������������������������������������������������������74 Version Numbers �������������������������������������������������������������������������������������������������������������������74 The Folder node_modules �����������������������������������������������������������������������������������������������������75 Editing the package�json File and Running npm install ���������������������������������������������������������75 Summary�������������������������������������������������������������������������������������������������������������������������������������76 Chapter 7: Starting to Code with the CLI ................................................................77 Create a Start Project ������������������������������������������������������������������������������������������������������������������78 Modify the Start Project ��������������������������������������������������������������������������������������������������������������81 Start Project: Compile Errors �������������������������������������������������������������������������������������������������������82 Start Project: Runtime Errors ������������������������������������������������������������������������������������������������������82 File Watcher and Web Server ������������������������������������������������������������������������������������������������������84 Bootstrapping ������������������������������������������������������������������������������������������������������������������������������84 Useful CLI Options �����������������������������������������������������������������������������������������������������������������������85 Ahead of Time Compilation ���������������������������������������������������������������������������������������������������������86 Summary�������������������������������������������������������������������������������������������������������������������������������������87 Chapter 8: Introducing Components .......................................................................89 Anatomy of a Component ������������������������������������������������������������������������������������������������������������91 @Component Annotation �������������������������������������������������������������������������������������������������������92 Component Templates �����������������������������������������������������������������������������������������������������������94 Component Styles������������������������������������������������������������������������������������������������������������������96 Component Class �������������������������������������������������������������������������������������������������������������������97 Introducing Data Binding ������������������������������������������������������������������������������������������������������������98 vi Table of ConTenTs Example: Data Binding in a Login Component �����������������������������������������������������������������������98 Example: Data Binding and Customer Data Input ������������������������������������������������������������������99 One-Way Data Binding ��������������������������������������������������������������������������������������������������������������100 One-Way Data Binding with {{ and }} �����������������������������������������������������������������������������������100 One-Way Data Binding: Example Code components-ex100 ������������������������������������������������100 One-Way Data Binding with [ and ] or * �������������������������������������������������������������������������������102 One-Way Data Binding: Example Code components-ex200 ������������������������������������������������103 One-Way Data Binding: Example Code components-ex250 ������������������������������������������������105 Two-Way Data Binding ��������������������������������������������������������������������������������������������������������������108 Two-Way Data Binding with [( and )] �����������������������������������������������������������������������������������108 Two-Way Data Binding: Example Code components-ex300 ������������������������������������������������108 Event Handling ��������������������������������������������������������������������������������������������������������������������������111 Event Handling: Example Code components-ex400 ������������������������������������������������������������������111 CDK �������������������������������������������������������������������������������������������������������������������������������������������113 Summary�����������������������������������������������������������������������������������������������������������������������������������113 Chapter 9: Introducing Modules ...........................................................................115 Different Types of Modules �������������������������������������������������������������������������������������������������������115 AngularJS Module System ��������������������������������������������������������������������������������������������������������116 JavaScript Modules �������������������������������������������������������������������������������������������������������������������117 Exporting Code ��������������������������������������������������������������������������������������������������������������������117 Importing Code ��������������������������������������������������������������������������������������������������������������������118 Angular Module System ������������������������������������������������������������������������������������������������������������119 Modules in the Start Project ������������������������������������������������������������������������������������������������120 Root Module ������������������������������������������������������������������������������������������������������������������������121 Routing Module �������������������������������������������������������������������������������������������������������������������122 Feature Modules ������������������������������������������������������������������������������������������������������������������122 Shared Modules �������������������������������������������������������������������������������������������������������������������123 Angular Module System: Example modules-ex100 �������������������������������������������������������������������123 Deployment: Separate Modules �������������������������������������������������������������������������������������������130 Deployment: Using Node to Manage Dependencies on Common Code �������������������������������130 Summary�����������������������������������������������������������������������������������������������������������������������������������131 vii Table of ConTenTs Chapter 10: Introducing Webpack ........................................................................133 Webpack and the Angular CLI ���������������������������������������������������������������������������������������������������133 Modules and Dependencies ������������������������������������������������������������������������������������������������������134 Installing and Configuring Webpack������������������������������������������������������������������������������������������135 Summary�����������������������������������������������������������������������������������������������������������������������������������137 Chapter 11: Introducing Directives .......................................................................139 Types of Directives ��������������������������������������������������������������������������������������������������������������������140 ngIf ��������������������������������������������������������������������������������������������������������������������������������������140 ngFor �����������������������������������������������������������������������������������������������������������������������������������142 ngSwitch, ngSwitchWhen, and ngSwitchDefault �����������������������������������������������������������������144 ngClass ��������������������������������������������������������������������������������������������������������������������������������146 ngStyle ��������������������������������������������������������������������������������������������������������������������������������148 Creating Directives ��������������������������������������������������������������������������������������������������������������������151 Creating Simple Directive: Example directives-ex600 ���������������������������������������������������������152 Accessing the DOM Events in Directives ����������������������������������������������������������������������������������154 Using the Directive Element host ����������������������������������������������������������������������������������������154 HostListeners �����������������������������������������������������������������������������������������������������������������������154 Accessing the DOM Properties in Directives �����������������������������������������������������������������������������155 Creating a Directive with Events: Example directives-ex700 ����������������������������������������������������155 Summary�����������������������������������������������������������������������������������������������������������������������������������157 Chapter 12: More Components .............................................................................159 Components and Child Components �����������������������������������������������������������������������������������������159 Data Flowing Downwards ���������������������������������������������������������������������������������������������������������160 Events Flowing Upwards �����������������������������������������������������������������������������������������������������������163 Emitting Output through @Output( ) ������������������������������������������������������������������������������������������163 Composition: Example ���������������������������������������������������������������������������������������������������������������166 Data Flowing Downwards: Example ������������������������������������������������������������������������������������������171 Edit the Customer Component ���������������������������������������������������������������������������������������������171 Edit the Customer List Component ��������������������������������������������������������������������������������������172 viii Table of ConTenTs Events Flowing Upwards: Example �������������������������������������������������������������������������������������������173 Edit the Customer Component ���������������������������������������������������������������������������������������������174 Edit the Customer List Component ��������������������������������������������������������������������������������������174 Template Reference Variables ���������������������������������������������������������������������������������������������������175 ViewChild: Example �������������������������������������������������������������������������������������������������������������176 ViewChildren: Example ��������������������������������������������������������������������������������������������������������177 NgContent and Transclusion: Example ��������������������������������������������������������������������������������180 ContentChild: Example ���������������������������������������������������������������������������������������������������������182 ContentChildren: Example ���������������������������������������������������������������������������������������������������185 Component Class Lifecycle �������������������������������������������������������������������������������������������������������188 Constructor vs� OnInit ����������������������������������������������������������������������������������������������������������188 Interfaces ����������������������������������������������������������������������������������������������������������������������������189 NgOnChanges: Example ������������������������������������������������������������������������������������������������������189 NgOnInit: Example ���������������������������������������������������������������������������������������������������������������192 NgDoCheck: Example ����������������������������������������������������������������������������������������������������������194 NgAfterContentInit: Example �����������������������������������������������������������������������������������������������197 NgAfterContentChecked: Example ���������������������������������������������������������������������������������������201 NgAfterViewInit: Example ����������������������������������������������������������������������������������������������������203 NgAfterViewChecked: Example �������������������������������������������������������������������������������������������205 NgOnDestroy: Example ��������������������������������������������������������������������������������������������������������207 Summary�����������������������������������������������������������������������������������������������������������������������������������209 Chapter 13: Dependency Injection ........................................................................211 Services and Providers �������������������������������������������������������������������������������������������������������������212 Creating a Service: Example �����������������������������������������������������������������������������������������������������213 Convert App to Share One Instance of Service: Example dependency-injection-ex200 ����������������������������������������������������������������������������������������������������219 Convert App to Share One Instance of Service: Example dependency-injection-ex300 ����������������������������������������������������������������������������������������������������222 Class Providers: Example dependency-injection- ex350 �����������������������������������������������������������226 Factory Providers: Example dependency-injection- ex400 ��������������������������������������������������������227 Factory Providers: Example dependency-injection- ex500 ��������������������������������������������������������230 ix