Pro Angular

Description

Angular 5 updates for this book are now available. Follow the Download source code link for this book on the Apress website. Get the most from Angular 2, the leading framework for building dynamic JavaScript applications. Best-selling author Adam Freeman begins by describing the MVC pattern and the benefits it can offer and then shows you how to use Angular in your projects, starting from the nuts-and-bolts and building up to the most advanced and sophisticated features, going in-depth to give you the knowledge you need. Each topic is covered clearly and concisely and is packed with the details you need to learn to be truly effective. The most important features are given a no-nonsense in-depth treatment and chapters include common problems and details of how to avoid them. What you’ll learnGain a solid architectural understanding of the MVC PatternLearn how to create rich and dynamic web app clients using Angular 2Learn how to extend and customize Angular 2Learn how to test your Angular 2 projects Who this book is for Web developers with a foundation knowledge of HTML and JavaScript who want to create rich client-side applications. Contents at a Glance Contents About the Author About the Technical Reviewer Chapter 1: Getting Ready What Do You Need to Know? What Is the Structure of This Book? Part 1: Getting Ready Part 2: Working with Angular Part 3: Advanced Angular Features Are There Lots of Examples? Where Can You Get the Example Code? How Do You Set Up Your Development Environment? Contacting the Author Summary Chapter 2: Your First Angular App Preparing the Development Environment Installing Node.js and NPM Updating NPM Installing an Editor Installing a Browser Creating and Preparing the Project Creating the Package File Installing the NPM Packages Configuring the TypeScript Compiler Installing the TypeScript Type Information Creating the HTML File Starting the Server Replacing the HTML Content Adding Angular to the Project Preparing the HTML File Creating a Data Model Creating a Template Creating a Component Understanding the Imports Understanding the Decorator Understanding the Class Putting the Application Together Running the Application Adding Features to the Example Application Adding the To-Do Table Creating a Two-Way Data Binding Filtering To-Do Items Adding To-Do Items Summary Chapter 3: Putting Angular in Context Understanding Where Angular Excels Understanding Round-Trip and Single-Page Applications Understanding the MVC Pattern Understanding Models Understanding Controllers/Components Understanding View Data 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 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 Contextual Classes Using Margin and Padding Changing Element Sizes Using Bootstrap to Style Tables Using Bootstrap to Create Forms Using Bootstrap to Create Grids Creating Responsive Grids Creating a Simplified Grid Layout Summary Chapter 5: JavaScript and TypeScript: Part 1 Preparing the Example Project Creating the HTML and JavaScript Files Configuring the TypeScript Compiler Running the Example Project Understanding the Script Element Using a JavaScript Module Loader Understanding the Basic Workflow Using Statements Defining and Using Functions Defining Functions with Parameters Using Default and Rest Parameters Defining Functions That Return Results Using Functions as Arguments to Other Functions Using Arrow Functions Using Variables and Types Using the Primitive Types Working with Booleans Working with Strings Using Template Strings Working with Numbers Using JavaScript Operators Using Conditional Statements The Equality Operator vs. the Identity Operator Explicitly Converting Types Converting Numbers to Strings Converting Strings to Numbers Working with Arrays Using an Array Literal Reading and Modifying the Contents of an Array Enumerating the Contents of an Array Using the Built-in Array Methods Summary Chapter 6: JavaScript and TypeScript: Part 2 Preparing the Example Project Working with Objects Using Object Literals Using Functions as Methods Defining Classes Defining Class Getter and Setter Properties Using Class Inheritance Working with JavaScript Modules Creating Modules Importing from JavaScript Modules Importing Specific Types Renaming Imports Importing All of the Types in a Module Useful TypeScript Features Using Type Annotations Type Annotating Properties and Variables Specifying Multiple Types or Any Type Using Tuples Using Indexable Types Using Access Modifiers Summary Chapter 7: SportsStore: A Real Application Preparing the Project Creating the Folder Structure Installing the NPM Packages Preparing the RESTful Web Service Configuring TypeScript Configuring the Development HTTP Server Configuring the JavaScript Module Loader Creating the Reactive Extensions JavaScript Module Creating the HTML File Running the Example Application Preparing the Angular Project Features Creating the Root Component Creating the Root Module Creating the Bootstrap File Adding the JavaScript Module Loader to the HTML Document 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: SportsStore: 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 Completing the Cart Detail Feature Processing Orders Extending the Model Updating the Repository and Data Source Updating the Feature Module 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 Product Editor Implementing the Orders Feature Summary Chapter 10: SportsStore: Deployment Stopping the TypeScript Compiler Working Around a Compiler Bug Using the Ahead-of-Time Compiler Installing and Configuring the AoT Compiler Configuring the Application Bootstrap Compiling the Application Shaking the Tree Testing the Application Containerizing the SportsStore Application Installing Docker Preparing the Application Configuring the HTTP Server Creating the Container Running the Application Summary Chapter 11: Creating an Angular Project Preparing a TypeScript Angular Development Project Creating the Project Folder Structure Creating and Serving the HTML Document Preparing the Project Configuration Adding Packages Understanding the Dependencies Packages Understanding the Development Dependencies Packages Setting Up TypeScript Configuring the TypeScript Compiler Configuring the Development HTTP Server Starting the Watch Processes Starting Angular Development with TypeScript Creating the Data Model Creating the Descriptive Model Class Creating the Data Source Creating the Model Repository Creating the Template and Root Component Creating the Angular Module Bootstrapping the Application Configuring the JavaScript Module Loader Resolving the RxJS Modules Resolving the Custom Application Modules Resolving the Angular Modules Applying the Configuration Options Updating the HTML Document Applying the JavaScript Module Loader Styling the Content Running the Application Summary Chapter 12: Using Data Bindings Preparing the Example Project Understanding One-Way Data Bindings Understanding the Binding Target Understanding Property Bindings 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 Setting All of an Element’s Classes with the Standard Binding Setting Individual Classes Using the Special Class Binding Setting Classes Using the ngClass Directive Using the Style Bindings Setting a Single Style Property Setting Styles Using the ngStyle Directive Updating the Data in the Application Summary Chapter 13: Using the Built-In in Directives Preparing the Example Project Using the Built-in Directives Using the ngIf Directive Using the ngSwitch Directive Avoiding Literal Value Problems Using the ngFor Directive Using Other Template Variables Using the Index Value Using the Odd and Even Values Using the First and Last Values Minimizing Element Operations Using the ngTemplateOutlet Directive Providing Context Data Understanding One-Way Data Binding Restrictions Using Idempotent Expressions Understanding the Expression Context Summary Chapter 14: Using Events and Forms Preparing the Example Project Adding 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 Styling Elements Using Validation Classes Displaying Field-Level Validation Messages Using the Component to Display Validation Messages Validating the Entire Form Displaying Summary Validation Messages Disabling the Submit Button 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 Accessing Application Data in a Directive Reading Host Element Attributes Using a Single Host Element Attribute 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 Setting the Initial Expression Value 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 Keeping Track of Views 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 Understanding the New Application Structure Defining Templates Defining External Templates Using Data Bindings in Component Templates Using Input Properties to Coordinate Between Components Using Directives in a Child Component Template Using Output Properties to Coordinate Between Components Projecting Host Element Content Completing the Component Restructure Using Component Styles Defining External Component Styles Using Advanced Style Features Setting View Encapsulation Using the Shadow DOM CSS Selectors Selecting the Host Element Selecting the Host Element’s Ancestors Pushing a Style into the Child Component’s Template Querying Template Content Summary Chapter 18: Using and Creating Pipes Preparing the Example Project Installing the Internationalization Polyfill 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 Preparing the Service Preparing the Dependent Components Registering the Service Reviewing the Dependency Injection Changes Declaring Dependencies in Other Building Blocks Declaring a Dependency in a Pipe Declaring Dependencies in Directives Understanding the Test Isolation Problem Isolating Components Using Services and Dependency Injection Preparing the Services Registering the Services Preparing the Dependent Component 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 Understanding the Token Using Opaque Tokens Understanding the useClass Property Resolving a Dependency with Multiple Objects 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 Directive Creating Local Providers in a Component Creating a Local Provider for All Children Creating a Provider for View Children Controlling Dependency Resolution Restricting the Provider Search Skipping Self-Defined Providers 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 the Module Definition Updating the Other Classes in the Application Updating the Root Module Creating a Utility Feature Module Creating the Module Folder and Moving the Files Updating the Classes in the New Module Creating the Module Definition Understanding the Imports Understanding the Providers Understanding the Declarations Understanding the Exports Updating the Other Classes in the Application Updating the Root Module Creating a Feature Module with Components Creating the Module Folder and Moving the Files Updating the Template URLs Updating the Module References Creating the Module Definition Updating the Root Module Summary Chapter 22: Creating the Example Project Starting the Example Project Adding and Configuring the Packages Configuring TypeScript Configuring the Development HTTP Server Configuring the JavaScript Module Loader 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 Table Component Template Creating the Form Component Creating the Form Component Template Creating the Form Component Styles 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 Creating the Angular Bootstrap Creating the Reactive Extensions Module Creating the HTML Document Running the Example 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 Scaling Up Application Feature Modules Going Beyond the Basics Filtering Events Transforming Events Using Different Event Objects Receiving Only Distinct Events Using a Custom Equality Checker Taking and Skipping Events Summary Chapter 24: Making Asynchronous HTTP Requests Preparing the Example Project Configuring the JavaScript Module Loader Configuring the Model Feature Module Updating the Form Component Running the Example Project Understanding RESTful Web Services Replacing the Static Data Source Creating the New Data Source Service Setting Up the HTTP Request Processing the Response 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 Chapter 25: Routing and Navigation: Part 1 Preparing the Example Project Disabling the State Change Event Display Getting Started 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 Using Multiple Route Parameters Using Optional Route Parameters Navigating in Code Receiving Navigation Events Removing the Event Bindings and Supporting Code Summary Chapter 26: Routing and Navigation: Part 2 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 Chapter 27: Routing and Navigation: Part 3 Preparing the Example Project Guarding Routes Delaying Navigation with a Resolver Creating a Resolver Service Registering the Resolver Service Applying the Resolver Displaying Placeholder Content Using a Resolver to Prevent URL Entry Problems Preventing Navigation with Guards Preventing Route Activation Consolidating Child Route Guards Preventing Route Deactivation Loading Feature Modules Dynamically Creating a Simple Feature Module Loading the Module Dynamically Creating a Route to Dynamically Load a Module Using a Dynamically Loaded Module Guarding Dynamic Modules Applying a Dynamic Loading Guard Targeting Named Outlets Creating Additional Outlet Elements Navigating When Using Multiple Outlets Summary Chapter 28: Using Animation Preparing the Example Project Adding the Animations Polyfill Disabling the HTTP Delay Simplifying the Table Template and Routing Configuration Getting Started with Angular Animation Creating the Animation Defining Style Groups Defining Element States Defining State Transitions Defining the Trigger Applying the Animation Testing the Animation Effect Understanding the Built-in Animation States Understanding Element Transitions Creating Transitions for Built-in States Animating Element Addition and Removal Controlling Transition Animations Specifying a Timing Function Specifying an Initial Delay Using Additional Styles During Transition Performing Parallel Animations Understanding Animation Style Groups Defining Common Styles in Reusable Groups Using Element Transformations Applying CSS Framework Styles Understanding Animation Trigger Events Summary Chapter 29: Angular Unit Testing Preparing the Example Project Adding the Testing Packages Configuring Karma Configuring TypeScript Creating a Simple Unit Test Starting the Tools Working with Jasmine Testing an Angular Component Working with the TestBed Class Configuring the Test Bed for Dependencies 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