Outline

 Day One

Today we will get started by demystifying the MEAN architecture. We will be looking at the features and architecture of the JavaScript technologies, frameworks, or libraries that make up a MEAN stack. Our hands-on activity will be to build a blogging application (sample application) with basic features using these JavaScript technologies.

At the end of this day, students should be able to:

Understand MEAN architecture

Develop a RESTful API using Node.js, Express.js, and MongoDB Atlas

Build a blogging application using the MEAN stack

Lesson One: Introduction to the MEAN stack

Starting with a brief introduction to the MEAN architecture, we will look into the programing model of Node as well as some important features, and the newest version of Angular (version 7). At the end of this lesson, the first lesson activity shall be aimed at building a Node server for the blogging application.

MEAN Architecture Demystification

Getting Started with Node

Activity 1: Creating an HTTP Server for a Blogging Application Understanding Callbacks, Event loop and EventEmitters in Node

Understanding Buffers, Streams and Filesystem in Node

Activity 2: Streaming Data to a File

Lesson Two: Developing RESTful APIs to perform CRUD operations

After the basic foundation has been set in the first lesson, we will proceed to get started with MongoDB Atlas and the Express application framework. We will not only learn how to perform different operations on MongoDB Atlas but also learn the Express application functionalities. At the end of this lesson, the lesson activity will wrap up the backend development for our sample application by creating a RESTful API for our sample application.

Getting Started with RESTful APIs

Getting started with MongoDB Atlas

Activity 3: Connecting the Node Application with MongoDB Atlas

Getting Started with Express

Activity 4: Creating Express API Route and Controller

Activity 5: Testing Fully Functional RESTful API

Lesson Three: Beginning Frontend Development with Angular CLI

After setting a good foundation in the first lesson and developing a backend service in the second, we will proceed further to client-side development with Angular 7.0 (the latest angular version). We will start the front end development by getting started with Angular. Application logic for our sample application will be written.

Getting Started with Angular CLI

Using Components, Directives, Services, and Making HTTP Requests in Angular

Activity 6: Designing the Frontend and Components for the Blogging Application

Activity 7: Writing Services and Making HTTP Request Calls to an API

Understanding Angular Forms and Routing

Activity 8: Creating a Form Application Using the Reactive/Model-Driven Method

Activity 9: Creating and Validating Different Forms Using the Template and Reactive Driven Method

Activity 10: Implementing a Router for the Blogging Application

Day Two

Today, we will be learn about authentication using MEAN also demystifying some Angular's old and new features like Pipes, Reactive Forms, Modules & Optimizing Apps, Animations and Unit Testing and many more. We shall be fully engaged with lesson activities on each topic treated and we shall end up developing a cinema movie listings application (sample application) with user authentication and some other nice features.

At the end of this day, students should be able to:

Describe Best Practices in Securing Node Applications

Implement Authentication in MEAN

Understand Old and New Angular Features.

Lesson Four: Understanding MEAN Stack Security

This lesson begins with a skim over MEAN's architecture and workflow. We shall dive into Authentication using MEAN and also revisit backend development with Node. Later in this lesson, we shall learn how to create Data Schema, configure Passport, a Node module that simplifies the process of handling authentication in Express. We shall also learn how to create API endpoints for our application as well as how Express API generates JSON Web Token (JWT) for authentication.

Node Security and Best Practices

Node Application Authentication with JSON Web Token (JWT)

Activity 11: Securing the RESTful API

Node Application Authentication with Passport

Activity 12: Creating a Login Page to Allow Authentication with Twitter Using Passport Strategies

Lesson Five: Angular Declarables, Bootstrapping, and Modularity

In the lesson, we will be implementing the frontend of our sample application. We shall learn how Angular store and validate JSON Web Token (JWT) in order to maintain the user's session, displaying protected views and how Angular routing works. Lastly, we shall briefly learn how to implement HttpClient and also how to transport output using Pipes in Angular.

Using Inbuilt Pipes, Custom Pipes, Custom Directives, and Observables

Activity 13: Communicating Between Two Components Using Observable Angular

Bootstrapping and Modularity

Activity 14: Creating a Lazy Loaded Application

Lesson Six: Testing and Optimizing Angular Applications

In this final lesson, we will be wrapping the frontend development of our sample application. Firstly, we will be learning how shared module and lazy loading feature is used in Angular. Later in this course, we shall learn how element can be animated and also how unit testing is carried out in Angular. This lesson will be wrapped up with the overview on the new features in Angular.

Angular Animations and Latest Angular Features

Activity 15: Animating the Route Transition Between the Blog Post Page and View Post Page of the Blogging Application

Optimizing Angular Applications

Testing Angular Applications

Activity 16: Performing Unit Testing on the App Root Component and Blog-Post Component

Overview on the new features in Angular.