MongoDB, Express, Angular, and Node.js Fundamentals

Become a MEAN master and rule the world of web applications

Elevator Pitch

Build fast, robust, and maintainable modern full-stack web applications using MongoDB, Express, AngularJS, and Node.js

Key Features

● Build highly scalable, asynchronous, and event-driven APIs

● Develop a user authentication system with MEAN

● Build a full-fledged application using the MEAN stack

Description

Taking control of the MEAN stack and getting familiar with different JavaScript technologies during the process will transform you into a full-stack JavaScript developer. MongoDB, Express, Angular and Node.js Fundamentals shows you how to develop highly scalable, asynchronous, and event-driven APIs quickly with Express and Node.js. You'll be able to demonstrate the full-stack skill by building two full-fledged MEAN applications with the user authentication feature from scratch.

Long Description

MongoDB, Express, Angular and Node.js Fundamentals begins by demystifying the MEAN architecture. You will take a look at the features of the JavaScript technologies, frameworks, or libraries that make up a MEAN stack. You will learn how to develop a RESTful API using Node.js, Express.js, and MongoDB Atlas. You will also learn how to build a blogging application using the MEAN stack. Next, you will learn about authentication using MEAN, and explore the features of Angular, such as pipes, reactive forms, modules and optimizing apps, animations and unit testing, and much more. By the end of the course, you will get all the knowledge you need to become a pro at developing efficient web applications using JavaScript technologies.

Learning Objectives

● Understand the MEAN architecture

● Create RESTful APIs to complete CRUD tasks

● Build a blogging application with basic features

● Describe best practices to secure node applications

● Implement authentication and authorization

● Create simple animations using Angular

● Perform unit testing on Angular applications

Audience

MongoDB, Express, Angular and Node.js Fundamentals is ideal for beginners and intermediate frontend developers who want to become full-stack developers. You will need some prior working knowledge of JavaScript and MongoDB as we skim over its basics and get straight to work.

Approach

MongoDB, Express, Angular, and Node.js Fundamentals takes a hands-on approach to teach you how to build professional full-stack web applications. It contains multiple activities that use real-life business scenarios for you to practice and apply your new skills in a highly relevant context.

Author Biography

Paul Oluyege is a full-stack software engineer, who currently works as the software engineering lead in a top consumer credit company in Nigeria. With an experience of over 5 years in all fields of the software development life cycle and after playing integral roles in building well-tested, rock solid software projects, Paul is dedicated to constantly improving tools and infrastructure to maximize productivity, minimize system downtime, and quickly respond to the changing needs of the business. He is a proactive problem solver and a determined achiever looking for opportunities to prove himself.

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

Hardware and Software Requirements

Hardware Requirements

For an optimal student experience, we recommend the following hardware configuration:

• Processor: Intel Core i5 or equivalent
• Memory: 4GB RAM
• Storage: 35 GB available space

Software Requirements

You'll also need the following software installed in advance:

• OS: Windows 7 SP1 64-bit, Windows 8.1 64-bit or Windows 10 64-bit
• Browser: Google Chrome, latest version
• Postman | API Development Environment, Latest Version
• Visual Studio Code, latest version
• Node.js LTS 8.9.1 installed

Access to installation instructions can be provided separately to course material for large training centers and organizations. All source code is publicly available on GitHub and fully referenced within the training material.

Primary Keywords

• Angular / Angular JS / AngularJS/ Angular 2/ Angular 4/ Angular 5/ Angular 6
• JavaScript
• MongoDB
• MongoDB Atlas
• Mongo Cloud
• Application Program Interface / API
• Express/ Express JS
• Node / Node.js
• MEAN / Mean stack