Back To Course Home
Building a Full-stack Application Using the MEAN Stack
0% completed
Course Overview
Before We Begin
Introduction to the MEAN Stack
What is the MEAN Stack?Why Use the MEAN Stack?Node and Angular CLI VersionsCourse Project Overview: Course Management AppQuiz: Introduction to the MEAN Stack
The Angular Frontend - Designing the App
Angular OverviewUnderstanding the Folder StructureServices, Interceptors, and GuardsForms and RoutersCreate and Serve the Angular ProjectAdding Bootstrap 5 and Font AwesomeCreate NavbarDesigning the Home PageDesigning and Adding Forms to our Registration PageDesigning and Adding Forms to our Login PageDesigning the Create Course PageDesigning the Edit Course PageDesigning the Course List PageAdd Routes to the ApplicationSummary: Designing the Angular ApplicationQuiz: The Angular Front-end Design

Course Assessment

MEAN Stack Assessment 1 (The Frontend)
The Backend: Adding NodeJS to our Project
Node.js OverviewUnderstanding the Folder StructureCreating a ProjectSetting up the .env file and Git Ignore FileSetting up the Start Scripts and Running the ServerAdding CORS, Express, and Morgan MiddlewareCreating Error Handler MiddlewareQuiz: Adding Node.js to our ProjectChallenge: Creating a Web ServerSolution Review: Creating a Web Server
Setting up Mongo DB
MongoDB Atlas OverviewSetting up MongoDB & IP WhitelistSetup Schemas and Models for Users and Course CollectionConnect to MongoDB Database Using MongooseQuiz: Setting up Mongo DB
Working with RESTful API
REST API OverviewCreating the Login and Register API using ExpressCreating REST API for the Course Management ApplicationCreate, Deploy, and Test the REST API on HerokuQuiz: Working with RESTful APIChallenge: Making POST and GET Requests to a Public REST APISolution Review: Making POST and GET Requests to Public REST API

Course Assessment

MEAN Stack Assessment 2 (The Backend)
Angular Services, The HttpClient Module, Providers and Dependency
Overview of Services in Angular
Overview of HTTPClient in Angular
Overview of Dependency Injection
Implement the User Service
Implement the Course Service
Quiz: Service, HttpClientModule, and Dependency Injection
Challenge: Displaying Data from a REST API
Solution Review: Displaying Data from a REST API
Implementing User Authentication
Create FormBuilder and Validators for the Register PageConsuming REST API for the Register PageCreating FormBuilder and Validators for the Login PageConsuming REST API for the Login Page.Implementing User Authentication Status in the NavbarAdding the canActivate Route Guard to the Router ModuleAdding Token Interceptors to Authenticate Requests in AngularQuiz: Implementing User AuthenticationChallenge: Making a Reactive Form ValidSolution Review: Making a Reactive Form Valid
Implementing CRUD Functionality in the Frontend
Implementing Functionality to Add a New CourseFetching Courses Created from the DatabaseSetting up the Activated Route to Update a CourseConsuming REST API for the Edit and Delete FunctionalityQuiz: Implementing CRUD Functionality in the Frontend
Toast Notifications, Preloaders and Deployment
Add Toast Notification to ComponentsAdding Preloaders to ComponentsDeploying the Angular Project with NetlifyQuiz: Toast Notifications, Preloaders, and Deployment
Conclusion
Course Summary
Appendix
Installation of the MEAN Stack TechnologiesInstalling the Express Framework and npm PackagesSetting up the Express, CORS, and the Morgan MiddlewareInstallation and Set up of an Angular ApplicationInstallation of ngx-toastrInstallation of ngx-spinnerInstallation and Set up of Heroku CLI

Overview of Dependency Injection

Learn about dependency injection in Angular.

We'll cover the following
  • What is dependency injection in Angular?
  • Merits of dependency injection
  • Elements of dependency injection
    • Service
    • Providers
    • Injector
  • Dependency injection in action
    • Step 1: Create a new Angular project
    • Step 2: Generate a new service file
    • Step 3: Configure the service file
    • Import and inject the dependency injection provider
    • Implementing the dependency injection provider in our template view

What is dependency injection in Angular?

Get hands-on with 1400+ tech skills courses.