In 2020, I recorded a series of video walkthroughs for students taking SNHU's CS-465 Full Stack Development course. I also wrote a 70+ page guide that walks students through the steps.
NOTE: This material is becoming dated due to "versionitis" so when you see a command to install something you probably should append "@12.16.1" or whatever the appropriate version number is.
Here are the versions I used when recording these videos:
> node --version
v12.16.1
> npm --version
6.13.4
> ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 6.2.9
Node: 12.16.1
OS: win32 x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.8.9
@angular-devkit/core 0.8.9
@angular-devkit/schematics 0.8.9
@schematics/angular 0.8.9
@schematics/update 0.8.9
rxjs 6.2.2
typescript 2.9.2
TLDR; Here is a playlist of the entire series
CS-465 Lesson 1 Introduction
Set up a NodeJS 10 website with the Express framework using Windows 10
CS-465 Lesson 2 MVC Routing (Part 1)
Walkthrough of refactoring a simple backend HTML website into an application that uses the Model View Controller (MVC) design pattern.
CS-465 Lesson 2 Dynamic View Rendering (Part 2)
Walkthrough of taking a plain HTML file and converting it to a Handlebars template, then applying directives to make it dynamic.
CS-465 Lesson 3 Static HTML to JSON
Walkthrough of taking static content from within a HTML file and converting it to JSON data files that are then read and injected into the Handlebars template before sending the content to the browser.
CS-465 Lesson 4 NoSQL
Walkthrough of adding the Mongoose framework, creating a schema to represent trips, and seeding a database with test data.
CS-465 Lesson 5 RESTful API (Part 1)
Walkthrough of creating a new backend "logical" application for the API logic, creating new routes for the data being served, and retrieving/returning the data as JSON.
CS-465 Lesson 5 RESTful API (Part 2)
Watch this walkthrough of refactoring the public website code to use an HTTP client to call the API endpoints for data access.
CS-465 Lesson 6 Building a SPA in Angular (Part 1)
Walkthrough of setting up an AngularJS single-page application, or SPA.
CS-465 Lesson 6 Building a SPA in Angular (Part 2)
Walkthrough of generating a component called a Trip Listing.
CS-465 Lesson 6 Building a SPA in Angular (Part 3)
So far, your website only displays the Trip Listing one way. Watch this walkthrough to see how to add the ability to have components change between different views to create a modern user interface.
CS-465 Lesson 6 Building a SPA in Angular (Part 4)
Walkthrough of building logic within the Angular SPA to retrieve data from the backend API RESTful endpoint.
CS-465 Lesson 6 Building a SPA in Angular (Part 5)
Walkthrough to learn how to generate a new Angular component called Add Trip.
CS-465 Lesson 6 Building a SPA in Angular (Part 6)
Finally, after creating the logic to add a trip, you will need to add the ability to edit trips. Watch this walkthrough video to learn how to add a button for editing trips.
CS-465 Lesson 7 Backend Security (Part 1)
This is the first part of a two-part lesson on security in the MEAN stack. Watch this video to learn how to secure the API endpoints..
CS-465 Lesson 7 Frontend Security (Part 2)
This is the second part of a two-part lesson on security in the MEAN stack. Watch this video to learn how to add security to the frontend Angular single page application (SPA).