The Mean Stack

Learn how to connect your Angular Frontend to a NodeJS & Express & MongoDB Backend by building a real Application.

Description


MEAN is a free and open-source JavaScript software stack for building dynamic web sites and web applications.MongoDB : Document database – used by your back-end application to store its data as JSON.Express (sometimes referred to as Express.js): Back-end web application framework running on top of Node.js.Angular (formerly Angular.js): Front-end web app framework; runs your JavaScript code in the user’s browser, allowing your application UI to be dynamic.Node.js : JavaScript runtime environment – lets you implement your application back-end in JavaScript.

Why This Course



Using MEAN stack for modern web application prove helpful for using the same code is used for client site to the server site.
MongoDB enables easy addition, modification as well as deletion of data.
Open source software, Mean simplifies and accelerates web application development.
Card image cap
₹ 15,000₹ 16,000
1 day left at this price!
Includes
25 days training
Resources
Certificate of Completion

Course content

What is MEAN?

What is a Single Page Application (SPA)?

How Does the MEAN Stack Work?

Installing Node & the Angular CLI.

Installing our IDE.

Exploring the Project Structure.

Module Introduction.

Understanding the Folder Structure.

Understanding Angular Components.

Adding our First Component.

Listening to Events.

Outputting Content.

Getting User Input.

Installing Angular Material.

Adding a Toolbar.

Outputting Posts.

Diving Into Structural Directives.

Creating Posts with Property & Event Binding.

Creating a Post Model.

Adding Forms.

Getting Posts from Post-Create to Post-List.

Calling GET Post.

More About Observables.

Working on our Form.

Module Introduction.

Connecting Node & Angular - Theory.

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.

Module Introduction.

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.

Module Introduction.

Adding Routing.

Styling Links.

Client Side vs Server Side Routing.

Possible Error.

Creating the "edit" Form.

Finishing the Edit Feature.

Updating Posts on the Server.

Re-Organizing Backend Routes.

Adding Loading Spinners.

Module Introduction.

Adding the File Input Button.

Converting the Form from a Template Driven to a Reactive Approach.

Adding Image Controls to Store the Image.

Adding an Image Preview.

Starting with the Mime-Type Validator.

Finishing the Image Validator.

Adding Server Side Upload.

Uploading Files.

Working with the File URL.

Beware of the Spread (...) Operator.

Fetching Images on the Frontend.

Updating Posts with Images.

Adding the Pagination Component.

Working on the Pagination Backend.

Connecting the Angular Paginator to the Backend.

Fetching Posts Correctly.

Module Introduction.

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.

Module Introduction.

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.

Module Introduction.

Testing Different Places to Handle Errors.

The Error Interceptor.

Displaying the Basic Error Dialog.

Adding an Error Dialog.

Adding an Error Dialog.

Adding an Error Dialog.

Returning Error Messages on the Server.

Finishing Touches.

Using Controllers.

Separating the Middleware.

Creating an Angular Material Module.

Splitting the App Into Feature Modules.

Fixing an Update Bug.

Creating the Auth Module.

Fixing the AuthGuard.

Adding Lazy Loading.

Adding Lazy Loading.

Adding Lazy Loading.

Using a Global Angular Config.

Using Node Environment Variables.

Module Introduction.

Deployment Options.

Deploying the REST Api.

Deploying Angular.

Angular Deployment - Finishing the Two App Setup.

Using the Integrated Approach.

Get connected with us on social networks!
Company name

Embiot Technologies

Embedded and IOT platform

Useful links

Home

About us

Service

Courses

Contact

Embiot Technologies
#281/5, "20 th Main Road, Marenahalli Main Road, Vijayanagar, Bengaluru, Karnataka 560040

Panduranga@embiottechnologies .com

Ashwitha@embiottechnologies.com

+91-7019600281 +91-0000000000

+91-0000000000 +91-0000000000