Pro Angular 6. Third Edition. Adam Freeman

Transcription

1 Pro Angular 6 Third Edition Adam Freeman

2 Pro Angular 6 Adam Freeman London, UK ISBN-13 (pbk): ISBN-13 (electronic): Library of Congress Control Number: Copyright 2018 by Adam Freeman 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: Joan Murray Development Editor: Laura Berendson Coordinating Editor: Mark Powers Cover designed by estudiocalamar Cover image designed by Freepik ( Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY Phone SPRINGER, fax (201) , orders-ny@springer-sbm.com, or visit 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 editorial@apress.com, for reprint, paperback, or audio rights, please bookpermissions@springernature.com. 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 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 For more detailed information, please visit Printed on acid-free paper

3 Dedicated to my lovely wife, Jacqui Griffyth. (And also to Peanut.)

4 Table of Contents About the Author...xxiii About the Technical Reviewer...xxv Part I: Getting Started with Angular... 1 Chapter 1: Getting Ready... 3 What Do You Need to Know?... 3 What Is the Structure of This Book?... 4 Part 1: Getting Started with Angular... 4 Part 2: Angular in Detail... 4 Part 3: Advanced Angular Features... 4 Are There Lots of Examples?... 4 Where Can You Get the Example Code?... 6 How Do You Set Up Your Development Environment?... 6 Contacting the Author... 6 Summary... 6 Chapter 2: Your First Angular App... 7 Preparing the Development Environment... 7 Installing Node.js... 7 Installing the angular-cli Package... 8 Installing Git... 8 Installing an Editor... 9 Installing a Browser... 9 v

5 vi Creating and Preparing the Project Creating the Project Adding the Bootstrap CSS Package Starting the Development Tools Editing the HTML File Adding Angular Features to the Project Preparing the HTML File Creating a Data Model Preparing the Template Preparing the Component Putting the Application Together Adding Features to the Example Application Adding the To-Do Table Creating a Two-Way Data Binding Adding To-Do Items Summary Chapter 3: Putting Angular in Context Understanding Where Angular Excels Understanding Round-Trip and Single-Page Applications Comparing Angular to jquery Comparing Angular to React and Vue.js Understanding the MVC Pattern Understanding Models Understanding Controllers/Components Understanding Views/Templates Understanding RESTful Services Common Design Pitfalls Putting the Logic in the Wrong Place Adopting the Data Store Data Format Just Enough Knowledge to Cause Trouble Summary... 42

6 Chapter 4: An HTML and CSS Primer Preparing the Example Project Understanding HTML Understanding Void Elements Understanding Attributes Applying Attributes Without Values Quoting Literal Values in Attributes Understanding Element Content Understanding the Document Structure Understanding Bootstrap Applying Basic Bootstrap Classes Using Bootstrap to Style Tables Using Bootstrap to Create Forms Using Bootstrap to Create Grids Summary Chapter 5: JavaScript and TypeScript: Part Preparing the Example Project Understanding the Basic Workflow Using Statements Defining and Using Functions Defining Functions with Parameters Defining Functions That Return Results Using Functions As Arguments to Other Functions Using Variables and Types Using Variable Closure Using the Primitive Types Using JavaScript Operators Using Conditional Statements The Equality Operator vs. the Identity Operator Explicitly Converting Types vii

7 Working with Arrays Using an Array Literal Reading and Modifying the Contents of an Array Enumerating the Contents of an Array Using the Spread Operator Using the Built-in Array Methods Summary Chapter 6: JavaScript and TypeScript: Part Preparing the Example Project Working with Objects Using Object Literals Using Functions as Methods Defining Classes Working with JavaScript Modules Creating and Using Modules Useful TypeScript Features Using Type Annotations Using Tuples Using Indexable Types Using Access Modifiers Summary Chapter 7: SportsStore: A Real Application Preparing the Project Installing the Additional NPM Packages Preparing the RESTful Web Service Preparing the HTML File Creating the Folder Structure Running the Example Application Starting the RESTful Web Service viii

8 Preparing the Angular Project Features Updating the Root Component Updating the Root Module Inspecting the Bootstrap File Starting the Data Model Creating the Model Classes Creating the Dummy Data Source Creating the Model Repository Creating the Feature Module Starting the Store Creating the Store Component and Template Creating the Store Feature Module Updating the Root Component and Root Module Adding Store Features the Product Details Displaying the Product Details Adding Category Selection Adding Product Pagination Creating a Custom Directive Summary Chapter 8: Spor tsstore: Orders and Checkout Preparing the Example Application Creating the Cart Creating the Cart Model Creating the Cart Summary Components Integrating the Cart into the Store Adding URL Routing Creating the Cart Detail and Checkout Components Creating and Applying the Routing Configuration Navigating Through the Application Guarding the Routes ix

9 x Completing the Cart Detail Feature Processing Orders Extending the Model Collecting the Order Details Using the RESTful Web Service Applying the Data Source Summary Chapter 9: SportsStore: Administration Preparing the Example Application Creating the Module Configuring the URL Routing System Navigating to the Administration URL Implementing Authentication Understanding the Authentication System Extending the Data Source Creating the Authentication Service Enabling Authentication Extending the Data Source and Repositories Creating the Administration Feature Structure Creating the Placeholder Components Preparing the Common Content and the Feature Module Implementing the Product Feature Implementing the Orders Feature Summary Chapter 10: SportsStore: Progressive Features and Deployment Preparing the Example Application Adding Progressive Features Installing the PWA Package Caching the Data URLs Responding to Connectivity Changes

10 Preparing the Application for Deployment Creating the Data File Creating the Server Changing the Web Service URL in the Repository Class Building and Testing the Application Testing the Progressive Features Containerizing the SportsStore Application Installing Docker Preparing the Application Creating the Docker Container Running the Application Summary Part II: Angular in Detail Chapter 11: Creating an Angular Project Creating a New Angular Project Understanding the Project Structure Understanding the Source Code Folder Understanding the Packages Folder Using the Development Tools Understanding the Development HTTP Server Understanding Hot Model Replacement Using the Linter Understanding How an Angular Application Works Understanding the HTML Document Understanding the Application Bootstrap Understanding the Root Angular Module Understanding the Angular Component Understanding Content Display xi

11 Starting Development in an Angular Project Adding the Bootstrap CSS Framework Creating the Data Model Creating a Component and Template Configuring the Root Angular Module Summary Chapter 12: Using Data Bindings Preparing the Example Project Understanding One-Way Data Bindings Understanding the Binding Target Understanding the Expression Understanding the Brackets Understanding the Host Element Using the Standard Property and Attribute Bindings Using the Standard Property Binding Using the String Interpolation Binding Using the Attribute Binding Setting Classes and Styles Using the Class Bindings Using the Style Bindings Updating the Data in the Application Summary Chapter 13: Using the Built-in Directives Preparing the Example Project Using the Built-in Directives Using the ngif Directive Using the ngswitch Directive Using the ngfor Directive Using the ngtemplateoutlet Directive xii

12 Understanding One-Way Data Binding Restrictions Using Idempotent Expressions Understanding the Expression Context Summary Chapter 14: Using Events and Forms Preparing the Example Project Importing the Forms Module Preparing the Component and Template Using the Event Binding Understanding Dynamically Defined Properties Using Event Data Using Template Reference Variables Using Two-Way Data Bindings Using the ngmodel Directive Working with Forms Adding a Form to the Example Application Adding Form Data Validation Validating the Entire Form Using Model-Based Forms Enabling Model-Based Forms Feature Defining the Form Model Classes Using the Model for Validation Generating the Elements from the Model Creating Custom Form Validators Applying a Custom Validator Summary Chapter 15: Creating Attribute Directives Preparing the Example Project Creating a Simple Attribute Directive Applying a Custom Directive xiii

13 Accessing Application Data in a Directive Reading Host Element Attributes Creating Data-Bound Input Properties Responding to Input Property Changes Creating Custom Events Binding to a Custom Event Creating Host Element Bindings Creating a Two-Way Binding on the Host Element Exporting a Directive for Use in a Template Variable Summary Chapter 16: Creating Structural Directives Preparing the Example Project Creating a Simple Structural Directive Implementing the Structural Directive Class Enabling the Structural Directive Using the Concise Structural Directive Syntax Creating Iterating Structural Directives Providing Additional Context Data Using the Concise Structure Syntax Dealing with Property-Level Data Changes Dealing with Collection-Level Data Changes Querying the Host Element Content Querying Multiple Content Children Receiving Query Change Notifications Summary Chapter 17: Understanding Components Preparing the Example Project Structuring an Application with Components Creating New Components xiv

14 Defining Templates Completing the Component Restructure Using Component Styles Defining External Component Styles Using Advanced Style Features Querying Template Content Summary Chapter 18: Using and Creating Pipes Preparing the Example Project Understanding Pipes Creating a Custom Pipe Registering a Custom Pipe Applying a Custom Pipe Combining Pipes Creating Impure Pipes Using the Built-in Pipes Formatting Numbers Formatting Currency Values Formatting Percentages Formatting Dates Changing String Case Serializing Data as JSON Slicing Data Arrays Summary Chapter 19: Using Services Preparing the Example Project Understanding the Object Distribution Problem Demonstrating the Problem Distributing Objects as Services Using Dependency Injection Declaring Dependencies in Other Building Blocks xv

15 xvi Understanding the Test Isolation Problem Isolating Components Using Services and Dependency Injection Completing the Adoption of Services Updating the Root Component and Template Updating the Child Components Summary Chapter 20: Using Service Providers Preparing the Example Project Using Service Providers Using the Class Provider Using the Value Provider Using the Factory Provider Using the Existing Service Provider Using Local Providers Understanding the Limitations of Single Service Objects Creating Local Providers in a Component Understanding the Provider Alternatives Controlling Dependency Resolution Summary Chapter 21: Using and Creating Modules Preparing the Example Project Understanding the Root Module Understanding the imports Property Understanding the declarations Property Understanding the providers Property Understanding the bootstrap Property Creating Feature Modules Creating a Model Module Creating a Utility Feature Module Creating a Feature Module with Components Summary

16 Part III: Advanced Angular Features Chapter 22: Creating the Example Project Starting the Example Project Adding and Configuring the Bootstrap CSS Package Creating the Project Structure Creating the Model Module Creating the Product Data Type Creating the Data Source and Repository Completing the Model Module Creating the Core Module Creating the Shared State Service Creating the Table Component Creating the Form Component Completing the Core Module Creating the Messages Module Creating the Message Model and Service Creating the Component and Template Completing the Message Module Completing the Project Summary Chapter 23: Using Reactive Extensions Preparing the Example Project Understanding the Problem Solving the Problem with Reactive Extensions Understanding Observables Understanding Observers Understanding Subjects Using the Async Pipe Using the Async Pipe with Custom Pipes xvii

17 Scaling Up Application Feature Modules Going Beyond the Basics Filtering Events Transforming Events Receiving Only Distinct Events Taking and Skipping Events Summary Chapter 24: Making Asynchronous HTTP Requests Preparing the Example Project Configuring the Model Feature Module Creating the Data File Updating the Form Component Running the Example Project Understanding RESTful Web Services Replacing the Static Data Source Creating the New Data Source Service Configuring the Data Source Using the REST Data Source Saving and Deleting Data Consolidating HTTP Requests Making Cross-Origin Requests Using JSONP Requests Configuring Request Headers Handling Errors Generating User-Ready Messages Handling the Errors Summary xviii

18 Chapter 25: Routing and Navigation: Part Preparing the Example Project Getting Star ted with Routing Creating a Routing Configuration Creating the Routing Component Updating the Root Module Completing the Configuration Adding Navigation Links Understanding the Effect of Routing Completing the Routing Implementation Handling Route Changes in Components Using Route Parameters Navigating in Code Receiving Navigation Events Removing the Event Bindings and Supporting Code Summary Chapter 26: Routing and Navigation: Part Preparing the Example Project Adding Components to the Project Using Wildcards and Redirections Using Wildcards in Routes Using Redirections in Routes Navigating Within a Component Responding to Ongoing Routing Changes Styling Links for Active Routes Fixing the All Button Creating Child Routes Creating the Child Route Outlet Accessing Parameters from Child Routes Summary xix

19 Chapter 27: Routing and Navigation: Part xx Preparing the Example Project Guarding Routes Delaying Navigation with a Resolver Preventing Navigation with Guards Loading Feature Modules Dynamically Creating a Simple Feature Module Loading the Module Dynamically Guarding Dynamic Modules Targeting Named Outlets Creating Additional Outlet Elements Navigating When Using Multiple Outlets Summary Chapter 28: Using Animation Preparing the Example Project Disabling the HTTP Delay Simplifying the Table Template and Routing Configuration Getting Started with Angular Animation Enabling the Animation Module Creating the Animation Applying the Animation Testing the Animation Effect Understanding the Built-in Animation States Understanding Element Transitions Creating Transitions for the Built-in States Controlling Transition Animations Understanding Animation Style Groups Defining Common Styles in Reusable Groups Using Element Transformations Applying CSS Framework Styles Summary

20 Chapter 29: Angular Unit Testing Preparing the Example Project Running a Simple Unit Test Working with Jasmine Testing an Angular Component Working with the TestBed Class Testing Data Bindings Testing a Component with an External Template Testing Component Events Testing Output Properties Testing Input Properties Testing with Asynchronous Operations Testing an Angular Directive Summary Index xxi

21 About the Author Adam Freeman is an experienced IT professional who has held senior positions in a range of companies, most recently serving as chief technology officer and chief operating officer of a global bank. Now retired, he spends his time writing and long-distance running. xxiii

22 About the Technical Reviewer Fabio Claudio Ferracchiati is a senior consultant and a senior analyst/developer using Microsoft technologies. He works for BluArancio ( He is a Microsoft Certified Solution Developer for.net, a Microsoft Certified Application Developer for.net, a Microsoft Certified Professional, and a prolific author and technical reviewer. Over the past ten years, he s written articles for Italian and international magazines and coauthored more than ten books on a variety of computer topics. xxv