Build an app with ASPNET Core and Angular from scratch

Build an app with ASPNET Core and Angular from scratch

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 20.5 Hours | 2.63 GB

A practical example of how to build an application with ASP.NET Core WebAPI (v2) and Angular (v5) from start to finish

Have you learnt the basics of ASP.NET Core and Angular? Not sure where to go next? This course should be able to help with that. In this course we start from nothing and incrementally build up our API and Angular front end until we have a fully functional Web Application that we then publish to IIS and a Linux server.

These are 2 of the hottest frameworks right now for the ‘back-end’ (Microsoft’s ASP.NET Core) and the ‘front-end’ (Google’s Angular) and are well worth spending the time to learn.

In this course we build a complete application from start to finish and every line of code is demonstrated and explained.

This course is right up to date as at December 2017 using ASP.NET Core 2.0 and Angular v5 and as these frameworks evolve, this course will evolve with it.

Here are some of the things you will learn about in this course:

  • Setting up the developer environment
  • Creating the ASP.NET Core WebAPI and the Angular app using the DotNet CLI and the Angular CLI
  • Adding a Client side login and register function to our Angular application
  • Adding 3rd party components to add some pizzazz to the app
  • Adding routing to the Angular application and securing routes.
  • Using Automapper in ASP.NET Core
  • Building a great looking UI using Bootstrap
  • Adding Photo Upload functionality as well as a cool looking gallery in Angular
  • Angular Template forms and Reactive forms and validation
  • Paging, Sorting and Filtering
  • Adding a Private Messaging system to the app
  • Publishing the application to both IIS and Linux
  • Many more things as well
Table of Contents

Introduction
1 Introduction
2 Setting up the development environment

Building a Walking Skeleton
3 Introduction
4 Creating the DotNet Core WebAPI using the DotNetCLI
5 Reviewing the Project files in the DotNet Web API
6 Running the DotNet Core application
7 Adding DotNet Watch to the application
8 Creating the first Model and DataContext
9 Creating the Database using Entity Framework migrations
10 Retrieving data from the Database
11 Making our code asynchronous
12 Adding GIT for source control
13 Creating the Angular application using AngularCLI
14 The Angular bootstrapping and running the Angular app
15 Adding VS Code extensions used in this course
16 Making HTTP requests in Angular
17 Adding CORS support to the API
18 Displaying data from the API on the HTML page
19 Adding Bootstrap and Font-Awesome to our Angular app
20 Saving our Angular project into source control
21 Summary of Section 2

Security
22 Intoduction
23 Storing passwords in the Database
24 Creating the User model
25 The Repository pattern
26 Creating an Interface for the Repository
27 Creating the concrete Auth Repository
28 Registering services in the Startup class
29 Creating the Register method in our Auth Controller
30 Using DTOs (Data Transfer Objects)
31 Validation in the API
32 Token Authentication
33 Creating the Login method in the API
34 Using the Authentication middleware
35 Summary of Section 3

Client side login and register
36 Introduction
37 Creating the Navigation and Login form
38 Introduction to Angular template forms
39 Introduction to Angular Services
40 Injecting the Angular services in our Components
41 Using ngIf to conditionally display HTML Elements
42 Adding a component so users can Register to our site
43 Parent to Child Component communication using Input properties
44 Component Communication Child to Parent using Output properties
45 Adding the register method to the Auth Service
46 Clean up and save changes into source control
47 Summary of Section 4

Error Handling
48 Introduction
49 Handling errors with the Global Exception handler in the API
50 Handling errors in Angular
51 Summary of Section 5

Adding 3rd party components to our app
52 Introduction
53 Wrapping 3rd party libraries as an Angular service
54 Using the Angular JWT library to improve token handling
55 Using the Angular JWT library to decode tokens
56 Adding Ngx Bootstrap to power our Bootstrap components
57 Bringing some color to our app with a theme from Bootswatch
58 Summary of Section 6

Routing in Angular
59 Introduction
60 Setting up routing in Angular
61 Using RouterLinkActive to make our links… active
62 Using routing in our components
63 Protecting our routes with a route guard
64 Protecting multiple routes with a single route guard using dummy routes
65 Summary of Section 7

Extending the API
66 Introduction
67 Extending the User Model
68 Exploring Entity Framework migrations
69 Entity Framework Relationships
70 Seeding Data to the Database – Part 1
71 Seeding Data to the Database Part 2
72 Creating a new repository for our API
73 Creating the Users Controller
74 Shaping the data to return with DTOs
75 Using AutoMapper Part 1
76 Using AutoMapper Part 2
77 Summary

Building a great looking User Interface
78 Introduction
79 Introduction to Interfaces in Typescript
80 Adding Interfaces to our Typescript code
81 Creating another Angular service
82 Retrieving the Members into the Member List Component
83 Creating Member Cards to display on our Member list page
84 Giving our Members some style with CSS
85 Adding animated buttons to the member cards
86 Using AuthHttp to send JWT Tokens per request
87 Creating the Member Detailed View component class
88 Designing the Member detailed view template – left hand side
89 Adding a tabbed panel for the right hand side of the Member detailed page
90 Using Route Resolvers to retrieve data
91 Adding a photo gallery to our application
92 Summary

Updating Resources
93 Introduction
94 Creating a Member Edit Component
95 Designing the template for the member profile edit page – part 1
96 Creating the Member Edit Template part 2
97 Adding a CanDeactivate route guard
98 Persisting the Member updates
99 Finishing off the Member edit component
100 Summary

Adding Photo upload functionality to the application
101 Introduction
102 Where should we store the photos
103 Using Cloudinary as a photo storage solution
104 Creating the Photos controller Part 1
105 Creating the Photos Controller Part 2
106 Testing the Photo upload with Postman
107 Creating the Photo upload component in Angular
108 Adding a 3rd Party File Uploader
109 Configuring the 3rd Party file uploader
110 Adding the Set Main photo functionality to the API
111 Adding the Set Main Photo functionality to the SPA
112 Using Underscore to manipulate arrays in the SPA
113 Output properties revisited.
114 Adding the main photo to the Nav bar
115 Any to Any component communication in Angular
116 Using BehaviorSubject to add any to any communication to our app.
117 Adding the Delete photo function to the API
118 Adding the Delete Photo functionality to the SPA
119 Summary

Reactive Forms in Angular
120 Introduction
121 Introduction to Reactive Forms in Angular
122 Validation in Reactive forms
123 Custom Validators in Reactive forms
124 Providing Validation feedback to the user
125 Using the Reactive Forms FormBuilder Service
126 Expanding the Registration form
127 Handling Dates in Forms
128 Updating the Register method in the API
129 Completing the Registration implementation
130 Fixing the Photos issue for newly registered users
131 Summary

Action Filters in ASP.NET Core
132 Introduction
133 Using a TimeAgo pipe for dates in Angular
134 Using Action Filters

Paging Sorting and Filtering
135 Introduction
136 Paging in ASP.NET Core Web API
137 Adding a PagedList class
138 Setting up the paging helper classes
139 Implementing pagination in the API
140 Setting up pagination in the SPA
141 Using nix-bootstrap pagination module
142 Filtering in the API
143 Adding additional filtering parameters to the API
144 Adding filtering functionality to the SPA
145 Sorting results in the API
146 Adding the Sorting functionality to the SPA
147 Summary

Adding the Likes functionality from start to finish
148 Introduction
149 Configuring the EF relationship so users can like each other
150 Creating the Like entity
151 Adding the Send Like functionality in the API
152 Retrieving the list of users liked and liked by user
153 Adding the Send like functionality to the SPA
154 Creating the Lists component
155 Summary of Section 15

Add a private messaging system to the application
156 Introduction
157 Creating the Message Entity and relationships
158 Adding the repository methods for the messages
159 Adding the Create Message method in the API
160 Adding the Repository methods for an Inbox Outbox
161 Creating the Message Controller
162 Adding the Message thread methods to the API
163 Working with the message component in the SPA
164 Designing the Inbox and Outbox template
165 Getting the message thread in the component
166 Designing the message tab chat system
167 Adding Query params to an Angular route
168 Adding the send message functionality and a challenge
169 Challenge solution – resolving the issue with the photos
170 Adding the Delete message functionality to the API
171 Deleting messages in the SPA
172 Adding the Mark as Read functionality
173 Summary of Section 16

Publishing
174 Introduction
175 Fixing warnings from Entity Framework in the terminal
176 Fixing and cleaning up the Angular code
177 Migrating to the HttpClientModule Part 1 – Angular JWT
178 Migrating to the HttpClientModule Part 2 – Services
179 Migrating to the HttpClientModule Part 3 – HTTP Interceptor for error handling
180 Using NG Build – Running our Angular app from the Kestrel server
181 Angular Production build with the Angular CLI
182 Using the Angular CLI for Ahead of Time Compilation
183 Swapping the Database backend to MySQL
184 Publishing our app to an IIS Server
185 Preparing a Linux server for publishing our application
186 Publishing the app to the Linux server
187 Course Wrap Up