Question

Describe the components of the MEAN architecture and what role each component plays in the architecture of a web application. Describe the supporting cast components.

Answer 1

MEAN is a free and open-source JavaScript software stack for building robust, fast, and maintainable dynamic websites and web applications.

MEAN is an acronym for MongoDB, ExpressJS, AngularJS, and Node.js. From client to server to database, MEAN is full-stack JavaScript. It is very simple to use front-end and back-end and also written in one language for both client-side and server-side application execution.

Components of MEAN architecture are:

M- Mongo DB

• It is an open source NoSQL database that uses document-oriented data model.

• MongoDB is a document database in which the data is stored in flexible, JSON-like documents.

• It works on concept of collection of document

E- Express JS

• Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
• The idea of Express came from Sinatra which is very popular framework based on Ruby.

A- Angular JS

• Angular 2 is a open-source framework for building complex applications in the browser and beyond.
• It was developed by Google.
• Angular 2 is most popular JavaScript framework available today.
• Using AngularJS, we can create a single page and dynamic applications in the MVC (Model View Controller) way.

N- Node JS

• Node JS is a server-side Javascript execution environment built on Google Chrome's v8 JavaScript engine.
• It follows an event-driven architecture where there is a single-thread mechanism to process your events and event can be clicking a button or filling a form in a website. So all these eventa are sent back to your server for processing and the server generates the response after the processing is done.
• Processing of these events are done asynchronously i.e, if we have multiple events in our event queue our node server doesn't pay it for a particular event to complete so it can process or serve multiple requests at the same time.
• Provides an event-driven architecture and non blocking I/O that is optimized and scalable.

These are the following features of MEAN stack architecture:

1. One of the most important features of the MEAN stack architecture is that the developer writes the entire code from the client to the server in JavaScript.
2. MEAN stack architecture supports the MVC, i.e., Model View Controller architecture.
3. The MEAN components are free and open-source.
4. It is flexible to understand and easy to use.
5. It helps the developers to customize as per the requirement.
6. It uses JSON for data transferring and has a massive module library of node.js.

• Next set up the MEAN stack components, i.e., MongoDB, ExpressJS, AngularJS, and NodeJS.

1. We need NodeJS because we will write and run the NodeJS code for our project. It is required for our server-side logic, and even angular also needs it. A framework that has a more complex build workflow is referred to as Angular. So, we need Node for the NodeJS code. This NodeJS code is written for our back-end and for the Angular build workflow. After downloading the Node's executable file, we will install the NodeJS by simply running its executable file.
2. We will also use another tool that is Angular CLI or Angular Command Line Interface. We need a lot of tools to compile and optimize our code because of the more complex build workflow. The CLI gives us a project setup where we can focus on writing our Angular code and our logic, nothing else. We will install the Angular CLI in the following way: We will use the npm, i.e., Node Package Manager, to install the CLI tool globally on our system. The Node Package Manager is installed automatically when we install the NodeJS. So, if we have NodeJS, we will have npm. We will run the following command for installing CLI: npm install -g @angular/cli  

3. After installing the Angular CLI, we will create a new Angular project with the CLI, and then we will add MongoDB, Node, and Express to that project later. First, we will navigate into that folder where we want to create the project, and then we will create a project using the ng new command in the following way: C:\Users\snehita\OneDrive\Desktop\Mean Stack> ng new first-app

4. After creating the project successfully, we will navigate to the project folder and run the following command C:\Users\snehita\OneDrive\Desktop\Mean Stack\first-app>ng serve

5. Now, we want an IDE or some advanced text editor to make change some changes in our application. These advanced text editor makes working with our code much easier. We will install the visual studio IDE because it is free, pretty powerful, and highly extensible. It is available for Windows but also for Mac and Linux.

6. After downloading the installer, we will run it and install it. After installing it, we will open it. We will go to the File menu and open our first-app project from there. Now, we first need to install a certain extension. So, we will go to the view menu and click on the extensions. We will search for Angular Essential and install it in our IDE. The Angular Essential is an amazing collection of different extensions that enhance the IDE to work. We will also search for the Material Icon Theme.We have set our Angular, Node and IDE successfully

7. We will see a bunch of sub-folders and files in our project. Most of these files are completely for the configuration, and there is no need to worry about them.

• The json file is interesting because this file has all the dependencies and development-only dependencies of the project. We will add some MongoDB dependencies there later.
• We will also get the files for configuring the Typescript compilation, and we don't need to worry about that.
• We will also get the json file that is for the Angular CLI, and we also don't need to worry about this.
• The e2e folder is for end-to-end testing and node_modules stores all the dependencies that are listed in json.
• In the src folder, our angular application lives in. Here, we will get more config files and an app
• In-app folder, we will write the meet of our Angular application. Angular uses components which we will discuss later. We will create our whole application by composing our UI from such components

8. We remove this complete code and write the following line of code. As soon as we replace the code, the page will automatically recompile and reload. It is required that our ng server is running in our machine.

<h1> My First Application </h1>  

9. We create a Single Page Application and see that a single page in the index.html is present in the app folder.

This index.html file is served by the ng serve right now. This file doesn't contain a lot of content because our build workflow injects the script imports.

If we go back to our application, we can see that what we saw on the page is the content of the app.component.html file. In this file, we will build our components or html elements. In the index.html file, we see one html element in the body section. It is not a default html element; it is our custom component.

10. In the end, it detects this app-root element and swaps it with the content of our component.

There are other essential file name app.module.ts. This file is important for angular. Angular thinks in applications, and applications are split up in modules.

In this project, there is one module, and that module defines the building block of our applications. Components are not the only but probably the most important building block of an angular application. In the app.module.ts file, there will be a ngModule in which our AppComponent is declared. This is registering with angular. So, now angular is aware of the AppComponent. It alone would only allow us to use that component selector in another angular component, not in the index.html file. This is allowed by adding it to bootstrap array too.

There is another file name main.ts file. This file is executed first.

Adding new component in MEAN stack:

• We will create a sub-folder in the app folder, where we typically put new components or blocks of components to keep our code organized. We will create a new sub-folder named "posts" by simply clicking on the right button of the mouse on the app folder.This sub-folder will hold all the post related components, and each component is typically made up of more than one file.

• Now, we will create another sub-folder for organizing the files of a single component in it. You can also use a flatter folder structure, and you don't need to use that many folders, it is up to you. We will go with the sub-folder way in our project.

• Now, in this folder, we will create a post-create.component.ts We can give any name to this file, but it is a convention in angular to include .component in component files, and .ts is an extension because we use typescript.

• We can define the html template in the typescript file, but since we have a bit of a more complex template. So, it is good to create a separate file. We will create an html file name post-create.component.html.   

  n our typescript file, we create a component by simply creating a new class. A class is a typescript feature and available in the latest JavaScript versions also. It allows us to create a blueprint for an object. Though, we will never create that component object on our own. We just give it to angular, and angular will instantiate it, create it, and use it.

  We can only define how such a component would look like, and that includes a name for it.

import { Component } from '@angular/core';  

  

@Component({  

  selector: 'app-post-create',  

  templateUrl: './post-create.component.html',  

})  

export class PostCreateComponent {  

    

}  

1. We created a class PostCreateComponent at the bottom of the code.
2. We turned it into a component by adding a decorator (@Component()) to it. This is because angular can understand what it is.
3. The component decorator takes some configuration in the form of a JavaScript object. So, we define a template as an object. Essentially, we passed the URL of the template in the code.
4. We also added a selector in the component. A selector allows us to use that component.

• We also want to add something to the template. We will write the html code in our post-create.component.html

• Now, we will use it in our app.component.html file. We will go to that file and call our component using the selector.

• If we save it and run our application, we will see a blank screen. It will show us an error message "app-post-create is not a known element". We have to explicitly register a component if we want to use it. We will do this in the app.module.ts file. So, we will import our component and add it into the declaration as:

import { PostCreateComponent } from './posts/post-create/post-create.component';  

declarations: [  

    AppComponent,  

    PostCreateComponent  

  ],  

• Now, we save it and can see the "post create component" in the browser.