Essential Angular for ASP.NET Core MVC

✍ Scribed by Adam Freeman

• Publisher: Apress
• Year: 2017
• Tongue: English
• Leaves: 307
• Edition: 1
• Category: Library

✦ Synopsis

Angular 5 and .NET Core 2 updates for this book are now available. Follow the Download Source Code link for this book on the Apress website.

Discover Angular, the leading client-side web framework, from the point of view of an ASP.NET Core MVC developer. Best-selling author Adam Freeman brings these two key technologies together and explains how to use ASP.NET Core MVC to provide back-end services for Angular applications. This fast-paced, practical guide starts from the nuts and bolt and gives you the knowledge you need to combine Angular (from version 2.0 up) and ASP.NET Core MVC in your projects. 
What You’ll Learn

• Gain a solid understanding of how ASP.NET Core MVC and Angular can work together
  
• Use Visual Studio 2017 to develop Angular/ASP.NET Core MVC projects 
  
• Create ASP.NET Core RESTful web services to support Angular applications 
  
• Expose data from Entity Framework Core to Angular applications
  
• Use ASP.NET Core Identity to provide security services to Angular applications
  

Each topic is covered clearly and concisely and is packed with the essential details you need to learn to be truly effective. 

Who This Book Is For
This book is for developers with a knowledge of ASP.NET Core MVC who are introducing Angular into their projects. 

✦ Table of Contents

Contents at a Glance
Contents
About the Author
About the Technical Reviewer
Chapter 1: Understanding Angular and ASP.NET Core MVC
Who Is This Book For?
What Does This Book Cover?
What Doesn’t This Book Cover?
What Do You Need to Know?
Are There Lots of Examples?
Where Can You Get the Example Code?
Where Can You Get Corrections for This Book?
Contacting the Author
Summary
Chapter 2: Getting Ready
Getting Ready on Windows
Installing .NET Core
Installing Node.js
Installing Bower
Installing Git
Installing Docker
Installing Visual Studio 2017
Adding the Visual Studio Extensions
Installing Visual Studio Code
Getting Ready on Linux
Installing .NET Core
Installing Node.js
Installing Bower
Installing Git
Installing Docker
Installing Visual Studio Code
Getting Ready on macOS
Installing .NET Core
Installing Node.js
Installing Bower
Installing Git
Installing Docker
Installing Visual Studio Code
Summary
Chapter 3: Creating the Project
Preparing to Create a Project
Creating the Project
Creating the Angular Part of the Project
Creating the ASP.NET Core MVC Part of the Project
Configuring the Project
Preparing the Project (Visual Studio)
Creating and Editing the Configuration Files
Enabling Logging Messages
Updating the Bootstrap Package
Removing Files
Updating the Controller, Layout, and View
Running the Project
Understanding the Combined Project and Tools
Understanding the Structure of the Project
Understanding the Tool Integration
Understanding the Project Change Systems
Updating Angular Files
Updating Razor Files
Updating C# Classes
Detecting TypeScript Errors
Summary
Chapter 4: Creating the Data Model
Preparing for This Chapter
Starting the Data Model
Preparing the Database Server
Defining the Connection String
Creating the ASP.NET Core MVC Data Model
Defining the Model Data Types
Creating the Database Context Class and the Seed Data
Testing the ASP.NET Core MVC Data Model
Starting the Angular Data Model
Understanding the TypeScript Data Model Classes
Examining the Product Constructor
Using the Right Name Capitalization Convention
Making the Parameters Optional
Unpacking the Properties
Understanding the Parameter Types
Understanding JavaScript Modules
Understanding TypeScript Access Control
Integrating the Angular Data Model
Defining the Repository
Defining the Angular Feature Module
Configuring the Angular Root Module
Displaying the Data
Reviewing the Application Structure
Reviewing the ASP.NET Core MVC Application Structure
Reviewing the Angular Application Structure
Summary
Chapter 5: Creating a Web Service
Preparing for This Chapter
Introducing a Web Service
Understanding RESTful Web Services
Creating the Web Service
Creating the Web Service Controller
Testing the Web Service
Using the Web Service in the Angular Application
Removing the Static Data from the Razor View
Consuming the Web Service Data in the Repository
Understanding the Http Class
Understanding Observables
Understanding the @Injectable Decorator
Understanding Live Data and Asynchronous Responses
Consolidating the HTTP Request Code
Adding Placeholder Content
Loading Related Data
Understanding the Circular Reference Problem
Breaking the Circular References
Breaking Circular References in Additional Related Data
Omitting Null Properties
Displaying Related Data
Implementing the GET Method for Multiple Objects
Implementing the Web Service Action Method
Querying Multiple Objects in the Angular Application
Updating the Component
Updating the Component’s Template
Filtering the Data
Applying Filtering in the Web Service
Applying Filtering in the Angular Application
Understanding the Structure of the Web Service
Summary
Chapter 6: Completing the Web Service
Preparing for This Chapter
Implementing the POST Method
Understanding the API Enhancements
Creating the Data Binding Classes
Implementing the Web Service Action Methods
Creating the Web Service Controller for Supplier Objects
Creating Data Objects in the Angular Application
Adding Support for Creating an Object in the Component
Updating the Component Template
Implementing the PUT Method
Implementing the Web Service Action Methods
Replacing Products in the Angular Application
Adding Support for Replacing Objects in the Component
Implementing the PATCH Method
Understanding JSON Patch
Enhancing the Product Binding Target
Implementing the Web Service Action Method
Updating Objects in the Angular Application
Adding Support for Updating Objects in the Component
Implementing the DELETE Method
Configuring the Database
Implementing the Web Service Action Method
Deleting Objects in the Angular Application
Adding Support for Deleting Objects in the Component
Summary
Chapter 7: Structuring an Angular Application
Preparing for This Chapter
Using the Data Model for Component Cooperation
Creating the Display Component
Creating the Component Class
Understanding the Import Statements
Understanding the Class
Understanding the Decorator
Creating the HTML Template
Creating the Filter Component
Creating the HTML Template
Applying the New Components
Understanding the Application Structure
Adding Another Component
Selecting a Product
Understanding the Revised Application Structure
Understanding Angular Routing
Creating the Routing Configuration
Applying the Routing Configuration
Navigating Using Routes
Navigating Using a Directive
Improving Navigation
Allowing Direct Navigation
Using a Segment Variable
Understanding the Application Structure
Summary
Chapter 8: Creating the Store
Preparing for This Chapter
Starting the Product Selection Feature
Blocking Out the Feature Components
Creating the Product List Component
Creating the Pagination Component
Creating the Category Filter Component
Creating the Cart Summary Component
Creating the Ratings Component
Creating the Structural Component
Creating and Registering the Store Feature Module
Configuring the Angular URL Routes
Removing the Layout Header
Displaying the Product List
Understanding the Product List Template Features
Understanding the ngIf Directive
Understanding the ngFor Directive
Understanding the Currency Pipe
Understanding the Click Handler
Creating the Category Filter
Enhancing the ASP.NET Core MVC Application
Receiving Category Data in the Angular Data Repository
Updating the Filter Component and Template
Creating the Pagination Controls
Creating and Registering a Pagination Service
Updating the Pagination Button Component
Paging the Product Data
Displaying Ratings
Adding the Font Awesome Package
Updating the Rating Component and Template
Applying the Rating Component
Summary
Chapter 9: Completing the Angular Store
Preparing for This Chapter
Creating the Shopping Cart
Extending the Angular Data Model
Registering the Cart as a Service
Wiring Up the Buttons
Creating the Cart Summary Component
Displaying the Cart Detail
Storing Carts
Extending the ASP.NET Core MVC Data Model
Creating the Cart Storage Web Service
Installing the NuGet Packages
Preparing the Database
Configuring the ASP.NET Core MVC Application
Creating the Web Service Controller
Storing and Retrieving Cart Data
Creating the Checkout Process
Extending the ASP.NET Core MVC Data Model
Creating a New Entity Framework Core Migration
Creating the ASP.NET Core MVC Web Service
Creating the Angular Checkout Process
Extending the Angular Data Model
Creating the Checkout Components
Creating the Checkout Details Component
Creating the Checkout Payment Component
Creating the Checkout Summary Component
Creating the Confirmation Component
Registering the Components and Creating the Routes
Storing Checkout Details as Session Data
Extending the Session Data Web Service
Storing Checkout Data
Summary
Chapter 10: Creating Administration Features
Preparing for This Chapter
Adding Administration Features
Creating the Administration Components
Creating the Administration Feature Components
Creating the Feature Module and Routing Configuration
Administering Products
Creating the Editor Component
Creating the Product Table
Administering Orders
Dealing with Request Errors
Creating the Error Handling and Distribution Service
Displaying Errors
Reporting Validation Errors
Summary
Chapter 11: Securing the Application
Preparing for This Chapter
Restricting Access to Action Methods
Restricting Access to Suppliers
Restricting Access to Orders
Restricting Access to Products
Testing the Restrictions
Installing and Configuring ASP.NET Core Identity
Installing the ASP.NET Core Identity NuGet Package
Creating the Identity Context Class and Seed Data
Adding Identity to the Application Configuration
Creating the Database Migration
Creating the Authentication Controller and View
Understanding the Conventional Authentication Flow
Authenticating Directly in Angular
Creating a Web Service Authentication Method
Creating the Repository Method
Creating the Authentication Service
Creating the Authentication Component
Creating the Authentication Route Guard
Creating and Registering the Authentication Feature Module
Configuring the URL Routes
Creating the Log Out Button
Disable Automatic Authentication Redirection for Web Services
Testing the Client Authentication Process
Summary
Chapter 12: Preparing for Deployment
Preparing for This Chapter
Preventing Cross-Site Request Forgery Attacks
Enabling Anti-CSRF Tokens
Sending and Receiving Anti-CSRF Tokens
Creating the Database Migration Command
Disabling Logging Messages
Disabling Automatic Angular Builds and Hot Modules
Preparing the Angular Startup Sequence
Performing the Production Dry Run
Preparing the Database
Building the Angular Application
Starting the ASP.NET Core MVC Application
Summary
Index