Course Description:
MEAN Stack is one of the most popular Technology Stack. It is used to develop a Full Stack Web Application. Although it is a Stack of different technologies, all of these are based on JavaScript language.
MEAN Stands for:
- M – MongoDB
- E – Express
- A – Angular
- N – Node.js
This stack leads to faster development as well as the deployment of the Web Application. Angular is Frontend Development Framework whereas Node.js, Express, and MongoDB are used for Backend development
Introduction
- Introduction to MEAN, Single Page Application (SPA)
- Introduction to NodeJS
- Installing Node, Angular CLI and MongoDB
- Working with VSCode
- Creating an Angular Project
- Understanding Project Structure
Angular
Typescript Fundamentals
- Introduction
- Using Types
- Classes
- Interfaces
- Generics
- Modules
Angular Fundamentals
- Structure of an Angular App
- Components
- Understanding the Role of AppModule and Component Declaration
- Using Custom Components
- Creating Components with the CLI & Nesting Components
- Working with Component Templates
- Working with Component Styles
- What is Databinding?
- String Interpolation
- Property Binding
- Property Binding vs String Interpolation
- Event Binding
- Passing and Using Data with Event Binding
- Two-Way-Databinding
- Combining all Forms of Databinding
- Practicing Databinding
- Understanding Directives
- Using ngIf to Output Data Conditionally
- Enhancing ngIf with an Else Condition
- Styling Elements Dynamically with ngStyle
- Applying CSS Classes Dynamically with ngClass
- Outputting Lists with ngFor
- Getting the Index when using ngFor
Working on a Project
Components & Databinding
- Introduction to Databinding
- Splitting Apps into Components
- Property & Event Binding Overview
- Binding to Custom Properties
- Assigning an Alias to Custom Properties
- Binding to Custom Events
- Assigning an Alias to Custom Events
- Custom Property and Event Binding Summary
- Understanding View Encapsulation
- Using Local References in Templates
- @ViewChild() in Angular
- Getting Access to the Template & DOM with @ViewChild
- Projecting Content into Components with ng-content
- Understanding the Component Lifecycle
- Understanding Lifecycle Hooks
- Lifecycle Hooks and Template Access
- @ContentChild() in Angular
- Getting Access to ng-content with @ContentChild
Working on the Project
Angular Directives
- ngFor and ngIf Recap
- ngClass and ngStyle Recap
- Creating a Basic Attribute Directive
- Using the Renderer to build a Better Attribute Directive
- Using HostListener to Listen to Host Events
- Using HostBinding to Bind to Host Properties
- Binding to Directive Properties
- Understanding Structural Directives
- Building a Structural Directive
- Understanding ngSwitch
- Building and Using a Dropdown Directive
Services and Dependency Injection
- Introduction to Services
- Creating a Logging Service
- Injecting the Logging Service into Components
- Creating a Data Service
- Understanding the Hierarchical Injector
- Injecting Services into Services
- Using Services for Cross-Component Communication
Working on the Project
Routing
- Introduction
- Setting up and Loading Routes
- Navigating with Router Links
- Understanding Navigation Paths
- Styling Active Router Links
- Navigating Programmatically
- Using Relative Paths in Programmatic Navigation
- Passing Parameters to Routes
- Fetching Route Parameters
- Fetching Route Parameters Reactively
- Understanding Route Observables
- Passing Query Parameters and Fragments
- Retrieving Query Parameters and Fragments
- Setting up Child (Nested) Routes
- Using Query Parameters
- Configuring the Handling of Query Parameters
- Redirecting and Wildcard Routes
- Redirection Path Matching
- Outsourcing the Route Configuration
- An Introduction to Guards
- Protecting Routes with canActivate
- Protecting Child (Nested) Routes with canActivateChild
- Using a Fake Auth Service
- Controlling Navigation with canDeactivate
- Passing Static Data to a Route
- Resolving Dynamic Data with the resolve Guard
- Understanding Location Strategies
Working on the Project
Understanding Observables
- Analyzing Angular Observables
- Getting Closer to the Core of Observables
- Building a Custom Observable
- Errors & Completion
- Understanding Operators
- Subjects
- Improving the Reactive Service with Observables (Subjects)
Handling Forms in Angular
- Introduction
- Template-Driven (TD) vs Reactive Approach
- An Example Form
- TD: Creating the Form and Registering the Controls
- TD: Submitting and Using the Form
- TD: Understanding Form State
- TD: Accessing the Form with @ViewChild
- TD: Adding Validation to check User Input
- Built-in Validators & Using HTML5 Validation
- TD: Using the Form State
- TD: Outputting Validation Error Messages
- TD: Set Default Values with ngModel Property Binding
- TD: Using ngModel with Two-Way-Binding
- TD: Grouping Form Controls
- TD: Handling Radio Buttons
- TD: Setting and Patching Form Values
- TD: Using Form Data
- TD: Resetting Forms
- Practicing Template-Driven Forms
- Introduction to the Reactive Approach
- Reactive: Setup
- Reactive: Creating a Form in Code
- Reactive: Syncing HTML and Form
- Reactive: Submitting the Form
- Reactive: Adding Validation
- Reactive: Getting Access to Controls
- Reactive: Grouping Controls
- Fixing a Bug
- Reactive: Arrays of Form Controls (FormArray)
- Reactive: Creating Custom Validators
- Reactive: Using Error Codes
- Reactive: Creating a Custom Async Validator
- Reactive: Reacting to Status or Value Changes
- Reactive: Setting and Patching Values
Working on the Project
Using Pipes to Transform Output
- Introduction
- Using Pipes
- Parametrizing Pipes
- Where to learn more about Pipes
- Chaining Multiple Pipes
- Creating a Custom Pipe
- Parametrizing a Custom Pipe
- Example: Creating a Filter Pipe
- Pure and Impure Pipes
- Understanding the "async" Pipe
Making HTTP Requests - RxJS
- Introduction
- How Does Angular Interact With Backends?
- The Anatomy of a Http Request
- Backend (Firebase) Setup
- Sending a POST Request
- GETting Data
- Using RxJS Operators to Transform Response Data
- Using Types with the HttpClient
- Outputting Posts
- Showing a Loading Indicator
- Using a Service for Http Requests
- Services & Components Working Together
- Sending a DELETE Request
- Handling Errors
- Using Subjects for Error Handling
- Using the catchError Operator
- Error Handling & UX
- Setting Headers
- Adding Query Params
- Observing Different Types of Responses
- Changing the Response Body Type
- Introducing Interceptors
- Manipulating Request Objects
- Response Interceptors
- Multiple Interceptors
Working on the Project
Authentication & Route Protection
- Introduction
- How Authentication Works
- Adding the Auth Page
- Switching Between Auth Modes
- Handling Form Input
- Preparing the Backend
- Preparing the Signup Request
- Sending the Signup Request
- Adding a Loading Spinner & Error Handling Logic
- Sending Login Requests
- Login Error Handling
- Creating & Storing the User Data
- Reflecting the Auth State in the UI
- Adding the Token to Outgoing Requests
- Attaching the Token with an Interceptor
- Adding Logout
- Adding Auto-Login
- Adding Auto-Logout
- Adding an Auth Guard
Dynamic Components
- Introduction
- Adding an Alert Modal Component
- Understanding the Different Approaches
- Using ngIf
- Preparing Programmatic Creation
- Creating a Component Programmatically
- Understanding entryComponents
- Data Binding & Event Binding
Angular Modules & Optimizing Angular Apps
- Introduction
- What are Modules?
- Analyzing the AppModule
- Getting Started with Feature Modules
- Splitting Modules Correctly
- Adding Routes to Feature Modules
- Component Declarations
- The ShoppingList Feature Module
- Understanding Shared Modules
- Understanding the Core Module
- Adding an Auth Feature Module
- Understanding Lazy Loading
- Implementing Lazy Loading
- More Lazy Loading
- Preloading Lazy-Loaded Code
- Modules & Services
- Loading Services Differently
- Ahead-of-Time Compilation
Deploying an Angular App
- Introduction
- Deployment Preparation & Steps
- Using Environment Variables
- Deployment Example: Firebase Hosting
NodeJS and ExpressJS
- What is a RESTful API?
- Adding the Node Backend
- Adding the Express Framework
- Improving the server.js Code
- Fetching Initial Posts
- Using the Angular HTTP Client
- Understanding CORS
- Adding the POST Backend Point
- Adding Angular
MongoDB
- What is MongoDB?
- Comparing SQL & NoSQL
- Connecting Angular to a Database
- Setting Up MongoDB
- Using MongoDB Atlas & IP Whitelist
- Adding Mongoose
- Understanding Mongoose Schemas & Models
- Creating a POST Instance
- Connecting our Node Express App to MongoDB
- Storing Data in a Database
- Fetching Data From a Database
- Transforming Response Data
- Deleting Documents
- Updating the Frontend after Deleting Posts
- Adding Posts with an ID
User Authentication & Authorization
- Adding the Login Input Fields
- Handling User Input
- Adding the Signup Screen
- Creating the User Model
- Creating a New User Upon Request
- Connecting Angular to the Backend
- Understanding SPA Authentication
- Implementing SPA Authentication
- Sending the Token to the Frontend
- Adding Middleware to Protect Routes
- Adding the Token to Authenticate Requests
- Improving the UI Header to Reflect the Authentication Status
- Improving the UI Messages to Reflect the Authentication Status
- Connecting the Logout Button to the Authentication Status
- Redirecting Users
- Adding Route Guards
- Reflecting the Token Expiration in the UI
- Saving the Token in the Local Storage
- Adding a Reference to the Model
- Adding the User ID to Posts
- Protecting Resources with Authorization
- Passing the User ID to the Frontend
- Using the User ID on the Frontend
Project Deployment
- Deployment Options
- Deploying the REST API
- Deploying the REST Api
- Deploying Angular
- Angular Deployment - Finishing the Two App Setup
- Using the Integrated Approach
MEAN Stack (Angular NodeJS ExpressJS MongoDB) Training center in West Delhi, Uttam nagar. Best certified computer course curriculum for professional learning institute near Dwarka, Uttam Nagar, Jankapuri, Tilak Nagar, Subhash Nagar, Tagore Garden, Rajouri Garden, Ramesh Nagar, Moti Nagar, Kirti Nagar, Shadipur, Patel Nagar, Rajendra Place, Karol Bagh, Jhandewalan, Ramakrishna Ashram, Connaught Place, vikaspuri, najafgarh, Delhi Cantt, Dhaula Kuan, Palam Colony, Palam Villag, Dabri, Hari Nagar, Fateh Nagar, Raja Garden, Punjabi Bagh, Shivaji Park, Paschim Vihar, Peeragarhi, Inderlok, Netaji Subhash Place, Pitampura, Rohini, Chandni Chowk, New Delhi, East Delhi, North Delhi, West Delhi.