Mean Stack Node Js | Further Reading[Edit]

The MEAN stack is a JavaScript-based framework for developing web applications. MEAN is named after MongoDB, Express, Angular, and Node, the four key technologies that make up the layers of the stack.

There are variations to the MEAN stack such as MERN (replacing Angular.js with React.js) and MEVN (using Vue.js). The MEAN stack is one of the most popular technology concepts for building web applications.

The MEAN architecture is designed to make building web applications in JavaScript and handling JSON incredibly easy.

At the very top of the MEAN stack is Angular.js, the self-styled “JavaScript MVW Framework” (MVW stands for “Model View and Whatever”).

Angular.js allows you to extend your HTML tags with metadata in order to create dynamic, interactive web experiences much more powerfully than, say, building them yourself with static HTML and JavaScript (or jQuery).

Angular has all of the bells and whistles you’d expect from a front-end JavaScript framework, including form validation, localization, and communication with your back-end service.

The next level down is Express.js, running on a Node.js server. Express.js calls itself a “fast, unopinionated, minimalist web framework for Node.js,” and that is indeed exactly what it is.

Express.js has powerful models for URL routing (matching an incoming URL with a server function), and handling HTTP requests and responses. By making XML HTTP requests (XHRs), GETs, or POSTs from your Angular.js front end, you can connect to Express.js functions that power your application.

Those functions, in turn, use MongoDB’s Node.js drivers, either via callbacks or using promises, to access and update data in your MongoDB database.

If your application stores any data (user profiles, content, comments, uploads, events, etc.), then you’re going to want a database that’s just as easy to work with as Angular, Express, and Node.

That’s where MongoDB comes in: JSON documents created in your Angular.js front end can be sent to the Express.js server, where they can be processed and (assuming they’re valid) stored directly in MongoDB for later retrieval.

Again, if you want to easily get the best of MongoDB, you’ll want to look at MongoDB Atlas. This will allow you built-in full database security and cross-cloud scalability with the click of a button. More on that later on this page.

MEAN applications can be used in many ways with a cross-platform write-once approach. While MEAN is particularly suited to real-time applications, particularly those running natively in the cloud and single-page (dynamic) web applications built in Angular.js, it can be used for other use cases such as:

There are many more uses for the MEAN stack, as well.

Since all the components are based on JavaScript and JSON, the integration between the components of the stack is intuitive and straightforward.

Additionally, the E and A of MEAN (Express and Angular) are two of the most popular and well-supported JavaScript frameworks for back-end and front-end development, respectively. Express makes routing and managing HTTP requests and responses super easy, and includes great support for middleware to handle JSON endpoints and form posts. Angular is a powerful tool for building dynamic HTML pages that communicate with a back-end server.

Whether you’re building a high-throughput API, a simple web application, or a microservice, MEAN is the ideal stack for building Node.js applications.

All of the MEAN stack components are open source in nature and therefore allow a generous, free-of-charge opportunity for developers.

JavaScript is a great modern language, but it wasn’t initially designed to build back-end servers. Since the foundation of the MEAN stack is JavaScript, including the back-end server, it might come with concurrency and performance problems at scale due to JavaScript nature.

Additionally, since the development opportunity is so rapid, business and server logic might suffer from poor isolation, making potential spaghetti code and bad practices a reality along the way.

Finally, although there are many guides and tutorials out there, they generally will not include concrete JS coding guidelines appropriate for this stack. Therefore, something that worked really well for one application might surface issues for another.

MEAN follows the traditional three-tier stack pattern, including the display tier (Angular.js), application tier (Express.js and Node.js), and database tier (MongoDB).

If you’re building a JavaScript application, particularly in Node.js, then you should give MEAN a serious look.

MongoDB stores data in a JSON-like format (BSON, a binary JSON extension), the MongoDB Query Language (MQL) is defined in JSON, and its command line interface (CLI) is a JavaScript interpreter. Not only is MongoDB essentially a JavaScript/JSON data store, but it’s full of advanced features like indexing and querying deep into JSON documents, has powerful native Node.js drivers, and is designed for horizontal scale-out. It’s even easier to develop apps in the cloud using MongoDB Atlas, the cloud-native database as a service from the creators of MongoDB.

Whether you’re building a high-throughput API, a simple web application, or a microservice, MEAN is the ideal stack for building Node.js applications.

The MongoDB Node.js driver makes working with MongoDB from inside a Node.js script simple and intuitive for developers — saving developers time and increasing their productivity.

Next, you'll need a MongoDB database. The easiest way to get started with MongoDB is to create a free cluster in MongoDB Atlas, MongoDB's fully managed, multi-cloud document database as a service.

Atlas databases are easily deployed and scaled, providing you with a consistent URI to connect. See the official MongoDB documentation on connecting to a cluster.

Along the way, Atlas connections come with built-in username/password and TLS end-to-end encryption by default. Additionally, these connections allow you to utilize advanced MongoDB security features such as certificate/IAM authentication, LDAP, Encryption-at-rest, and Auditing with the click of a button.

Moreover, an Atlas project can utilize the Atlas App Services applications platform to easily integrate many authentication providers such as Google, Facebook, JWT, and custom authentication.

Scaling and managing Atlas is very easy; its biggest benefit is that it supports and secures the MEAN stack's most valuable layer: the data layer.

We recommend using the MEAN stack with MongoDB Atlas, since Atlas has built-in credentials, a firewall, and end-to-end encryption, which is the best foundation for securing your MongoDB.

Additionally, the MEAN stack has a concrete three-tier separation which, if used with best practices and correct network isolation, should prevent your end users from having access to the business logic and, moreover, to your database layer. Therefore, your application is by default designed to avoid malicious user interaction from putting your application at risk (query injection, code manipulation, port spoofing, etc.).

MEAN Stack is a variation of a full stack in that it has:

Although a MEAN stack developer should focus their expertise on the building blocks specific to MongoDB, Express, Angular, and Node, a general full stack developer might need other or more skill sets.

Welcome to the MEAN stack tutorial! This tutorial will teach you how to build a full stack web application using the MEAN stack. The final project will be an employee management system. You can find the source code for this tutorial on Github.

But first things first, let's start with the basics.

MEAN is a technology stack used for building full stack applications. It's a combination of the following technologies:

Applications built with the MEAN stack follow the client-server architecture. The client, built with Angular, can be a web application, a native mobile application, or a desktop application. The client communicates with the server through an API, which is built with Express. The server then manages the requests with the MongoDB database.

Client-Server Architecture

In this tutorial, we'll build a RESTful API that implements the CRUD (Create, Read, Update, Delete) operations for an employee. For data persistence, we'll be using a MongoDB Atlas cluster.

We'll be building an employee management web application. The interface will have the following pages:

Here's what our finished application looks like:

You'll need Node.js and a MongoDB Atlas cluster to follow this tutorial.


node --version


Let's start by creating a directory that will host our project and its files. We'll name it

‘mean-stack-example’

.


mkdir mean-stack-example cd mean-stack-example


We'll be using shell commands to create directories and files throughout the tutorial. However, you're more than welcome to use any other method.

Now, let's create the directories and files that will host our server-side application—

‘server’

and

‘server/src’

—and also initialize a

‘package.json’

file for it.


mkdir server && mkdir server/src cd server npm init -y touch tsconfig.json .env (cd src && touch database.ts employee.routes.ts employee.ts server.ts)


We'll need a few external packages to build the RESTful API and to connect to our MongoDB Atlas cluster. Let's install them using the

npm install

command.


npm install cors dotenv express mongodb


We'll also be using TypeScript for our server application. We'll install the TypeScript compiler and the supporting

@types

packages as development dependencies using the

--save-dev

flag. These packages are only used during development and shouldn't be included in the final production application.


npm install --save-dev typescript @types/cors @types/express @types/node ts-node


Finally, we'll paste the following into the

tsconfig.json

configuration file that TypeScript will use to compile our code.

mean-stack-example/server/tsconfig.json


{ "compilerOptions": { "module": "commonjs", "esModuleInterop": true, "target": "es6", "noImplicitAny": true, "moduleResolution": "node", "sourceMap": true, "outDir": "dist", "baseUrl": ".", "allowJs": true, "paths": { "*": ["node_modules/*"] } }, "include": ["src/**/*"] }


Since we’re building an employee management app, the main data unit is the employee. Let's create an

Employee

interface that will be used to define the structure of the employee object.

mean-stack-example/server/src/employee.ts


import * as mongodb from "mongodb"; export interface Employee { name: string; position: string; level: "junior" | "mid" | "senior"; _id?: mongodb.ObjectId; }


Our employees should have a name, position, and level. The

_id

field is optional because it's generated by MongoDB. So, when we're creating a new employee, we don't need to specify it. However, when we get an employee object from the database, it will have the

_id

field populated.

Let's implement the following function to connect to our database:

mean-stack-example/server/src/database.ts


import * as mongodb from "mongodb"; import { Employee } from "./employee"; export const collections: { employees?: mongodb.Collection

; } = {}; export async function connectToDatabase(uri: string) { const client = new mongodb.MongoClient(uri); await client.connect(); const db = client.db("meanStackExample"); await applySchemaValidation(db); const employeesCollection = db.collection

("employees"); collections.employees = employeesCollection; } // Update our existing collection with JSON schema validation so we know our documents will always match the shape of our Employee model, even if added elsewhere. // For more information about schema validation, see this blog series: https://www.mongodb.com/blog/post/json-schema-validation--locking-down-your-model-the-smart-way async function applySchemaValidation(db: mongodb.Db) { const jsonSchema = { $jsonSchema: { bsonType: "object", required: ["name", "position", "level"], additionalProperties: false, properties: { _id: {}, name: { bsonType: "string", description: "'name' is required and is a string", }, position: { bsonType: "string", description: "'position' is required and is a string", minLength: 5 }, level: { bsonType: "string", description: "'level' is required and is one of 'junior', 'mid', or 'senior'", enum: ["junior", "mid", "senior"], }, }, }, }; // Try applying the modification to the collection, if the collection doesn't exist, create it await db.command({ collMod: "employees", validator: jsonSchema }).catch(async (error: mongodb.MongoServerError) => { if (error.codeName === 'NamespaceNotFound') { await db.createCollection("employees", {validator: jsonSchema}); } }); }




We're using the MongoDB Node.js Driver distributed as the

mongodb

NPM package. First, we create a new

MongoClient

object with the provided connection string. Then, we connect to the database. We need to use

await

since

connect

is an asynchronous function. After that, we get the

db

object from the

client

object. We use this object to get the employees collection. Note that the variable

employees

is cast to the

Employee

interface. This will provide type checking to any query we send to the database. Finally, we assign the employees collection to the

collections

object which is exported from this file. That way, we can access the employees collection from other files such as the

employee.routes.ts

file which will implement our RESTful API.

We're also using JSON schema validation to ensure that all of our documents follow the shape of our

Employee

interface. This is a good practice to ensure that we don't accidentally store data that doesn't match the shape of our model.

We'll be persisting our data to a MongoDB Atlas cluster. To connect to our cluster, we'll need to set an

ATLAS_URI

environment variable that contains the connection string. Add it to the

server/.env

file. Make sure you replace the username and password placeholder with your credentials.

mean-stack-example/server/.env


ATLAS_URI=mongodb+srv://

: @sandbox.jadwj.mongodb.net/meanStackExample?retryWrites=true&w=majority


Now, we can load the environment variables using the

dotenv

package. We can do that in any file but it's a good practice to do it as early as possible. Since the

server.ts

file will be our entry point, let's load the environment variables from it, connect to the database, and start the server:

mean-stack-example/server/src/server.ts


import * as dotenv from "dotenv"; import cors from "cors"; import express from "express"; import { connectToDatabase } from "./database"; // Load environment variables from the .env file, where the ATLAS_URI is configured dotenv.config(); const { ATLAS_URI } = process.env; if (!ATLAS_URI) { console.error("No ATLAS_URI environment variable has been defined in config.env"); process.exit(1); } connectToDatabase(ATLAS_URI) .then(() => { const app = express(); app.use(cors()); // start the Express server app.listen(5200, () => { console.log(`Server running at http://localhost:5200...`); }); }) .catch(error => console.error(error));


Let's run the app and see if everything works:


npx ts-node src/server.ts


You should see the following output:


Server running at http://localhost:5200...


Good job! Now, we’re ready to build the RESTful API for our employees.

In this section, we'll implement a ‘GET’, ‘POST’, ‘PUT’, and ‘DELETE’ endpoint for our employees. As you can notice, these HTTP methods correspond to the CRUD operations— Create, Read, Update, and Delete—we'll be performing on our employees in the database. The only caveat is that we'll have two ‘GET’ endpoints: one for getting all employees and one for getting a single employee by ID.

To implement the endpoints, we'll use the router provided by Express. The file we'll be working in is

src/employee.routes.ts

.

Let's start by implementing the ‘GET /employees’ endpoint which will allow us to get all the employees in the database.

mean-stack-example/server/src/employee.routes.ts


import * as express from "express"; import * as mongodb from "mongodb"; import { collections } from "./database"; export const employeeRouter = express.Router(); employeeRouter.use(express.json()); employeeRouter.get("/", async (_req, res) => { try { const employees = await collections.employees.find({}).toArray(); res.status(200).send(employees); } catch (error) { res.status(500).send(error.message); } });


We're using the

find()

method. Because we're passing in an empty object—

{}

—we'll get all the employees in the database. We'll then use the

toArray()

method to convert the cursor to an array. Finally, we'll send the array of employees to the client.

You may notice that the route is ‘/’. This is because we'll register all endpoints from this file under the ‘/employees’ route.

Next, we'll implement the ‘GET /employees/:id’ endpoint which will allow us to get a single employee by ID. Append the following to the bottom of

employee.routes.ts

:

mean-stack-example/server/src/employee.routes.ts


employeeRouter.get("/:id", async (req, res) => { try { const id = req?.params?.id; const query = { _id: new mongodb.ObjectId(id) }; const employee = await collections.employees.findOne(query); if (employee) { res.status(200).send(employee); } else { res.status(404).send(`Failed to find an employee: ID ${id}`); } } catch (error) { res.status(404).send(`Failed to find an employee: ID ${req?.params?.id}`); } });


The ID of the employee is provided as a parameter. We use the

ObjectId

method to convert the string ID to a MongoDB

ObjectId

object. We then use the

findOne()

method to find the employee with the given ID. If the employee is found, we'll send it to the client. Otherwise, we'll send a ‘404 Not Found’ error.

If you're wondering what the ‘?’ symbol represents in some of the expressions above, it's optional chaining operator. It enables you to read the value of a nested property without throwing an error if the property doesn't exist. Instead of throwing an error, the expression evaluates to

undefined

.

The ‘POST /employees’ endpoint will allow us to create a new employee. Append the following to the bottom of

employee.routes.ts

:

mean-stack-example/server/src/employee.routes.ts


employeeRouter.post("/", async (req, res) => { try { const employee = req.body; const result = await collections.employees.insertOne(employee); if (result.acknowledged) { res.status(201).send(`Created a new employee: ID ${result.insertedId}.`); } else { res.status(500).send("Failed to create a new employee."); } } catch (error) { console.error(error); res.status(400).send(error.message); } });


We receive the employee object from the client in the request body. We'll use the

insertOne()

method to insert the employee into the database. If the insertion is successful, we'll send a ‘201 Created’ response with the ID of the employee. Otherwise, we'll send a ‘500 Internal Server Error’ response.

The ‘PUT /employees/:id’ endpoint will allow us to update an existing employee. Append the following to the bottom of 'employee.routes.ts':

mean-stack-example/server/src/employee.routes.ts


employeeRouter.put("/:id", async (req, res) => { try { const id = req?.params?.id; const employee = req.body; const query = { _id: new mongodb.ObjectId(id) }; const result = await collections.employees.updateOne(query, { $set: employee }); if (result && result.matchedCount) { res.status(200).send(`Updated an employee: ID ${id}.`); } else if (!result.matchedCount) { res.status(404).send(`Failed to find an employee: ID ${id}`); } else { res.status(304).send(`Failed to update an employee: ID ${id}`); } } catch (error) { console.error(error.message); res.status(400).send(error.message); } });


Here, the ID of the employee is provided as a parameter whereas the employee object is provided in the request body. We use the

ObjectId

method to convert the string ID to a MongoDB

ObjectId

object. We then use the

updateOne()

method to update the employee with the given ID. If the update is successful, we'll send a ‘200 OK’ response. Otherwise, we'll send a ‘304 Not Modified’ response.

Finally, the ‘DELETE /employees/:id’ endpoint will allow us to delete an existing employee. Append the following to the bottom of ‘employee.routes.ts’:

mean-stack-example/server/src/employee.routes.ts


employeeRouter.delete("/:id", async (req, res) => { try { const id = req?.params?.id; const query = { _id: new mongodb.ObjectId(id) }; const result = await collections.employees.deleteOne(query); if (result && result.deletedCount) { res.status(202).send(`Removed an employee: ID ${id}`); } else if (!result) { res.status(400).send(`Failed to remove an employee: ID ${id}`); } else if (!result.deletedCount) { res.status(404).send(`Failed to find an employee: ID ${id}`); } } catch (error) { console.error(error.message); res.status(400).send(error.message); } });


Similar to the previous endpoints, we send a query to the database based on the ID passed as a parameter. We use the

deleteOne()

method to delete the employee. If the deletion is successful, we'll send a ‘202 Accepted’ response. Otherwise, we'll send a ‘400 Bad Request’ response. If the employee is not found (

result.deletedCount

is 0), we'll send a ‘404 Not Found’ response.

Now, we need to instruct the Express server to use the routes we've defined. First, import the

employeesRouter

at the beginning of ‘src/server.ts’:

mean-stack-example/server/src/server.ts


import { employeeRouter } from "./employee.routes";


Then, add the following right before the

app.listen()

call:

mean-stack-example/server/src/server.ts


app.use("/employees", employeeRouter);


Finally, restart the server by stopping the shell process with Ctrl-C, and running it again.


npx ts-node src/server.ts


You should see the same message as before in the console.


Server running at http://localhost:5200...


Well done! We've built a simple RESTful API for our employees. Now, let's build an Angular web application to interact with it!

The next step is to build a client-side Angular web application that will interact with our RESTful API. We'll use the Angular CLI to scaffold the application. To install it, open a new terminal tab and run the following command in the terminal from the root of your

mean-stack-example

folder:


npm install -g @angular/cli


It's important to keep the server running while you're working on the client-side application. To do this, you'll need to open a new tab in your terminal where you will execute commands for the client-side application. Also, make sure you navigate to the

mean-stack-example

directory.

After the installation is finished, navigate to the root directory of the project and run the following command to scaffold a new Angular application:


ng new client --routing --style=css --minimal


This will create a new Angular application in the ‘client’ directory. The

--routing

flag will generate a routing module. The

--style=css

flag will enable the CSS preprocessor. The

--minimal

flag will skip any testing configuration as we won't be covering that in the tutorial. Installing the dependencies may take a while. After the installation is finished, navigate to the new application and start it by running the following commands:


cd client ng serve -o


After the application is built, you should see a new tab in your browser window with the application running.

Finally, for styling we'll use Bootstrap. Add the following to section in the ‘src/index.html’ file:

mean-stack-example/client/src/index.html

Similar to our server-side application, we'll create an Angular interface for our employees. We'll use the

Employee

interface to define the properties of our employee objects. Open a new terminal window and run the following command to scaffold the interface:


ng generate interface employee


Then, open the newly create ‘src/app/employee.ts’ file in your editor and add the following properties:

mean-stack-example/client/src/app/employee.ts


export interface Employee { name?: string; position?: string; level?: 'junior' | 'mid' | 'senior'; _id?: string; }


Angular recommends separating your business logic from your presentation logic. That's why we'll create a service that handles all communication with the ‘/employee’ endpoint of the API. The service will be used by the components in the application. To generate the service, run the following command:


ng generate service employee


The ‘ng generate service’ command creates a new service in the ‘src/app/employee.service.ts’ file. Replace the content of this file with the following:

mean-stack-example/client/src/app/employee.service.ts


import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable, Subject, tap } from 'rxjs'; import { Employee } from './employee'; @Injectable({ providedIn: 'root' }) export class EmployeeService { private url = 'http://localhost:5200'; private employees$: Subject

= new Subject(); constructor(private httpClient: HttpClient) { } private refreshEmployees() { this.httpClient.get

(`${this.url}/employees`) .subscribe(employees => { this.employees$.next(employees); }); } getEmployees(): Subject

{ this.refreshEmployees(); return this.employees$; } getEmployee(id: string): Observable

{ return this.httpClient.get

(`${this.url}/employees/${id}`); } createEmployee(employee: Employee): Observable

{ return this.httpClient.post(`${this.url}/employees`, employee, { responseType: 'text' }); } updateEmployee(id: string, employee: Employee): Observable

{ return this.httpClient.put(`${this.url}/employees/${id}`, employee, { responseType: 'text' }); } deleteEmployee(id: string): Observable

{ return this.httpClient.delete(`${this.url}/employees/${id}`, { responseType: 'text' }); } }










We're using the

HttpClient

service to make HTTP requests to our API. The

refreshEmployees()

method is used to fetch the full list of employees.

The

HttpClient

service is provided by Angular through the

HttpClientModule

. It's not part of the application by default—we need to import it in the ‘app.module.ts’ file. First, add the following import to the top of the ‘app.module.ts’ file:

mean-stack-example/client/src/app/app.module.ts


import { HttpClientModule } from '@angular/common/http';


Then, add the module to the list of imports of the

AppModule

class:


@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }


Next, we'll create a new page that displays a table with our employees.

Let's create a new page for our table with employees. In Angular, a component is a reusable piece of code that can be used to display a view. We'll create a new component called

EmployeesList

and then also register it as the ‘/employees’ route in the application.

To generate the component, run the following command:


ng generate component employees-list


The Angular CLI generated a new component named

EmployeesList

in the ‘src/app/employees-list.component.ts’ file. It also declared the component in the ‘AppModule’ so we don’t have to do it manually. Replace the content of ‘src/app/employees-list.component.ts’ with the following:

mean-stack-example/client/src/app/employees-list/employees-list.component.ts


import { Component, OnInit } from '@angular/core'; import { Observable } from 'rxjs'; import { Employee } from '../employee'; import { EmployeeService } from '../employee.service'; @Component({ selector: 'app-employees-list', template: `

MEAN Stack hoạt động như thế nào?

Kiến trúc của MEAN được thiết kế để giúp lập trình viên có thể xây dựng các ứng dụng web bằng ngôn ngữ JavaScript và xử lý JSON một cách dễ dàng.

Người dùng sẽ tương với các component Angular.js UI ở giao diện người dùng của ứng dụng trong trình duyệt. Một máy chủ Express.js viết bằng Node.js sẽ phục vụ cho phần front end. Bất kỳ tương tác nào tạo ra một yêu cầu thay đổi dữ liệu sẽ được gửi đến cho máy chủ Express.js.

Sau đó, máy chủ thu dữ liệu từ cơ sở dữ liệu MongoDB (trong trường hợp được yêu cầu) và đưa lên giao diện người dùng của ứng dụng.

Nguồn tham khảo: https://www.educative.io/edpresso/what-is-mean-stack

Edit an Employee

` }) export class EditEmployeeComponent implements OnInit { employee: BehaviorSubject

= new BehaviorSubject({}); constructor( private router: Router, private route: ActivatedRoute, private employeeService: EmployeeService, ) { } ngOnInit() { const id = this.route.snapshot.paramMap.get('id'); if (!id) { alert('No id provided'); } this.employeeService.getEmployee(id !).subscribe((employee) => { this.employee.next(employee); }); } editEmployee(employee: Employee) { this.employeeService.updateEmployee(this.employee.value._id || '', employee) .subscribe({ next: () => { this.router.navigate(['/employees']); }, error: (error) => { alert('Failed to update employee'); console.error(error); } }) } }



The only notable difference from the

AddEmployeeComponent

is that we're getting the employee ID from the URL, fetching the employee from the API, and then passing it to the form in the

ngOnInit()

method.

Finally, let's add navigation to our new pages:

mean-stack-example/client/src/app/app-routing.module.ts


import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { EmployeesListComponent } from './employees-list/employees-list.component'; import { AddEmployeeComponent } from './add-employee/add-employee.component'; // <-- add this line import { EditEmployeeComponent } from './edit-employee/edit-employee.component'; // <-- add this line const routes: Routes = [ { path: '', redirectTo: 'employees', pathMatch: 'full' }, { path: 'employees', component: EmployeesListComponent }, { path: 'employees/new', component: AddEmployeeComponent }, // <-- add this line { path: 'employees/edit/:id', component: EditEmployeeComponent }]; // <-- add this line @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }


Alright! Let's test it out! Go ahead and try to create a new employee. After filling in the details, click the Submit button. You should see the new employee on the list. Then, you can try editing it by clicking the Edit button. You should see the form filled with the employee's details. When you submit the form, the employee will be updated in the table. Finally, you can delete it by clicking the Delete button.

If something doesn't add up, you can check out the finished project in the mean-stack-example repository.

Thank you for joining me on this journey and following along! I hope you enjoyed it and learned a lot. The MEAN stack makes it easy to get started and to build scalable applications. You're using the same language throughout the stack: JavaScript. Additionally, MongoDB's document model makes it natural to map data to objects and MongoDB Atlas's forever-free cluster makes it easy to host your data without worrying about costs.

The MEAN stack is a JavaScript-based framework for developing web applications. MEAN is named after MongoDB, Express, Angular, and Node, the four key technologies that make up the layers of the stack.

There are variations to the MEAN stack such as MERN (replacing Angular.js with React.js) and MEVN (using Vue.js). The MEAN stack is one of the most popular technology concepts for building web applications.

The MEAN architecture is designed to make building web applications in JavaScript and handling JSON incredibly easy.

At the very top of the MEAN stack is Angular.js, the self-styled “JavaScript MVW Framework” (MVW stands for “Model View and Whatever”).

Angular.js allows you to extend your HTML tags with metadata in order to create dynamic, interactive web experiences much more powerfully than, say, building them yourself with static HTML and JavaScript (or jQuery).

Angular has all of the bells and whistles you’d expect from a front-end JavaScript framework, including form validation, localization, and communication with your back-end service.

The next level down is Express.js, running on a Node.js server. Express.js calls itself a “fast, unopinionated, minimalist web framework for Node.js,” and that is indeed exactly what it is.

Express.js has powerful models for URL routing (matching an incoming URL with a server function), and handling HTTP requests and responses. By making XML HTTP requests (XHRs), GETs, or POSTs from your Angular.js front end, you can connect to Express.js functions that power your application.

Those functions, in turn, use MongoDB’s Node.js drivers, either via callbacks or using promises, to access and update data in your MongoDB database.

If your application stores any data (user profiles, content, comments, uploads, events, etc.), then you’re going to want a database that’s just as easy to work with as Angular, Express, and Node.

That’s where MongoDB comes in: JSON documents created in your Angular.js front end can be sent to the Express.js server, where they can be processed and (assuming they’re valid) stored directly in MongoDB for later retrieval.

Again, if you want to easily get the best of MongoDB, you’ll want to look at MongoDB Atlas. This will allow you built-in full database security and cross-cloud scalability with the click of a button. More on that later on this page.

MEAN applications can be used in many ways with a cross-platform write-once approach. While MEAN is particularly suited to real-time applications, particularly those running natively in the cloud and single-page (dynamic) web applications built in Angular.js, it can be used for other use cases such as:

There are many more uses for the MEAN stack, as well.

Since all the components are based on JavaScript and JSON, the integration between the components of the stack is intuitive and straightforward.

Additionally, the E and A of MEAN (Express and Angular) are two of the most popular and well-supported JavaScript frameworks for back-end and front-end development, respectively. Express makes routing and managing HTTP requests and responses super easy, and includes great support for middleware to handle JSON endpoints and form posts. Angular is a powerful tool for building dynamic HTML pages that communicate with a back-end server.

Whether you’re building a high-throughput API, a simple web application, or a microservice, MEAN is the ideal stack for building Node.js applications.

All of the MEAN stack components are open source in nature and therefore allow a generous, free-of-charge opportunity for developers.

JavaScript is a great modern language, but it wasn’t initially designed to build back-end servers. Since the foundation of the MEAN stack is JavaScript, including the back-end server, it might come with concurrency and performance problems at scale due to JavaScript nature.

Additionally, since the development opportunity is so rapid, business and server logic might suffer from poor isolation, making potential spaghetti code and bad practices a reality along the way.

Finally, although there are many guides and tutorials out there, they generally will not include concrete JS coding guidelines appropriate for this stack. Therefore, something that worked really well for one application might surface issues for another.

MEAN follows the traditional three-tier stack pattern, including the display tier (Angular.js), application tier (Express.js and Node.js), and database tier (MongoDB).

If you’re building a JavaScript application, particularly in Node.js, then you should give MEAN a serious look.

MongoDB stores data in a JSON-like format (BSON, a binary JSON extension), the MongoDB Query Language (MQL) is defined in JSON, and its command line interface (CLI) is a JavaScript interpreter. Not only is MongoDB essentially a JavaScript/JSON data store, but it’s full of advanced features like indexing and querying deep into JSON documents, has powerful native Node.js drivers, and is designed for horizontal scale-out. It’s even easier to develop apps in the cloud using MongoDB Atlas, the cloud-native database as a service from the creators of MongoDB.

Whether you’re building a high-throughput API, a simple web application, or a microservice, MEAN is the ideal stack for building Node.js applications.

The MongoDB Node.js driver makes working with MongoDB from inside a Node.js script simple and intuitive for developers — saving developers time and increasing their productivity.

Next, you'll need a MongoDB database. The easiest way to get started with MongoDB is to create a free cluster in MongoDB Atlas, MongoDB's fully managed, multi-cloud document database as a service.

Atlas databases are easily deployed and scaled, providing you with a consistent URI to connect. See the official MongoDB documentation on connecting to a cluster.

Along the way, Atlas connections come with built-in username/password and TLS end-to-end encryption by default. Additionally, these connections allow you to utilize advanced MongoDB security features such as certificate/IAM authentication, LDAP, Encryption-at-rest, and Auditing with the click of a button.

Moreover, an Atlas project can utilize the Atlas App Services applications platform to easily integrate many authentication providers such as Google, Facebook, JWT, and custom authentication.

Scaling and managing Atlas is very easy; its biggest benefit is that it supports and secures the MEAN stack's most valuable layer: the data layer.

We recommend using the MEAN stack with MongoDB Atlas, since Atlas has built-in credentials, a firewall, and end-to-end encryption, which is the best foundation for securing your MongoDB.

Additionally, the MEAN stack has a concrete three-tier separation which, if used with best practices and correct network isolation, should prevent your end users from having access to the business logic and, moreover, to your database layer. Therefore, your application is by default designed to avoid malicious user interaction from putting your application at risk (query injection, code manipulation, port spoofing, etc.).

MEAN Stack is a variation of a full stack in that it has:

Although a MEAN stack developer should focus their expertise on the building blocks specific to MongoDB, Express, Angular, and Node, a general full stack developer might need other or more skill sets.

MEAN (solution stack)

MEAN (MongoDB, Express.js, AngularJS (or Angular), and Node.js)[1] is a source-available JavaScript software stack for building dynamic web sites and web applications.[2] A variation known as MERN replaces Angular with React.js front-end,[3][4] and another named MEVN use Vue.js as front-end.

Because all components of the MEAN stack support programs that are written in JavaScript, MEAN applications can be written in one language for both server-side and client-side execution environments.

Though often compared directly to other popular web development stacks such as the LAMP stack, the components of the MEAN stack are higher-level including a web application presentation layer and not including an operating system layer.[5]

The acronym MEAN was coined by Valeri Karpov.[6] He introduced the term in a 2013 blog post and the logo concept, initially created by Austin Anderson for the original MEAN stack LinkedIn group, is an assembly of the first letter of each component of the MEAN acronym.[7]

MongoDB

MongoDB sử dụng một quá trình xử lý để xử lý các yêu cầu về dữ liệu. Quản lý định dạng dữ liệu, thực hiện các hoạt động quản lý bên dưới là mongod. Trong việc mở rộng theo chiều ngang sử dụng mô hình mảnh lưu trữ, MongoDB cung cấp dịch vụ xử lý các truy vấn từ tầng ứng dụng, xác định vị trí dữ liệu trong cụm các node phân mảnh được gọi là mongos.

Xem ngay các việc làm MongoDB

Further reading[edit]

• Haviv, Amos Q. (2014). MEAN Web Development: Master real-time web application development using a mean combination of MongoDB, Express, Angular JS, and Node.js. Birmingham, UK: Packt Publishing. ISBN 978-1783983285.
• Holmes, Simon (2019). Getting MEAN with Mongo, Express, Angular, and Node, Second Edition. Shelter Island, NY: Manning Publishing. ISBN 9781617294754.
• Holmes, Simon (2015). Getting MEAN with Mongo, Express, AngularJs, and Node. Shelter Island, NY: Manning Publishing. ISBN 9781617292033.
• Dickey, Jeff (2014). Write Modern Web Apps with the MEAN Stack: Mongo, Express, AngularJS, and Node.js (Develop and Design). San Francisco, CA: Peachpit Press. ISBN 978-0133930153.

Ưu điểm của việc phát triển ứng dụng web với MEAN Stack

3.Đơn giản hóa việc chuyển đổi giữa máy khách và máy chủ

Với việc phát triển ứng dụng bằng MEAN Stack, lập trình viên sẽ tiết kiệm được rất nhiều thời gian và công sức. Bạn chỉ cần viết code bằng ngôn ngữ duy nhất là JavaScript cho cả máy khách và máy chủ.

3.Có thể code Isomorphic

Chuyển code sang một framework khác được viết bởi một framework cụ thể sẽ dễ dàng hơn với sự hỗ trợ của MEAN Stack.

3.Tính linh hoạt cao

Với MEAN, bạn có thể thực hiện việc kiểm tra ứng dụng trên nền tảng đám mây một cách thuận lợi sau khi đã hoàn thành quy trình phát triển. Đồng thời, MEAN cũng cho phép bạn dễ dàng thêm thông tin bổ sung bằng cách thêm các trường vào biểu mẫu.

3.Tối ưu chi phí

Sử dụng MEAN Stack để phát triển ứng dụng chỉ đòi hỏi các lập trình viên phải thông thạo JavaScript. Trong khi đó, việc dùng LAMP Stack lại cần nhiều hơn thế. Điều này giúp tiết kiệm chi phí thuê và đào tạo nhân công cho các hãng sản xuất công nghệ.

3.Có tốc độ cao và tái sử dụng được

Node.js là có tốc độ xử lý cực nhanh và là một framework có cấu trúc non-blocking. Trong khi đó, Angular.js là một JavaScript framework mã nguồn mở cung cấp khả năng bảo trì, kiểm tra và tái sử dụng.

3.Mã nguồn mở và có khả năng tương thích với đám mây

Toàn bộ công nghệ MEAN Stack đều là mã nguồn mở có sẵn hoàn toàn miễn phí. Vì thế, việc sử dụng MEAN Stack cho phép lập trình viên có nhiều sự lựa chọn với thư viện và các kho lưu trữ công cộng. Nó cũng cho phép giảm chi phí phát triển phần mềm hiệu quả. MongoDB hỗ trợ việc triển khai các chức năng đám mây trong ứng dụng bằng cách giảm chi phí của không gian đĩa.

Sử dụng MEAN Stack sẽ đem lại rất nhiều lợi ích cho bạn trong quá trình phát triển các ứng dụng web. Nếu bạn là một front end developer và muốn tối ưu năng suất làm việc của mình thì hãy dành thêm thời gian tìm hiểu về khái niệm MEAN Stack là gì cũng như cách thức ứng dụng công nghệ này nhé.

https://www.zeolearn.com/magazine/7-advantages-of-developing-apps-with-mean-stack

MEAN Stack Tutorial The mean stack tutorial is designed for the developers who want to design the dynamic website and web application using Mean.js. Our tutorial covers all the components of Mean.js, such as MongoDB, Express.js, Node.js, and Angular.js. The Mean.js can be considered a collection of various technologies for developing a dynamic website and web application. Mean.js is used for developing a web application where MongoDB is used as a database system, Express.js is used as a back-end web framework, node.js is used as a web server, and Angular.js is used as a front-end framework. What is MEAN? Each letter in the word MEAN has some specific meaning. Here, 'M' stands for MongoDB, 'E' stands for Express, 'A' stands for Angular, and 'N' stands for Node.js. It is one of the most popular stacks used for developing the full stack application. Let's understand the basic idea behind the mean stack. As we can observe in the above figure that there is a front-end app, back-end app and database. The front-end app can be developed using either Angular.js or React.js, and back-end can be developed using Node.js, which is further connected to the MongoDB database. The front-end app and back-end app communicate with each other through the RestAPI. The back-end app exposes the RestAPI endpoints, whereas the front-end app consumes the RestAPI endpoints. Let's look at each component of Mean.js one by one. Node.js Node.js is an open-source platform and provides a runtime environment for executing the javascript code. It is mainly used for building the back-end application. Since there are two types of apps, such as web apps and mobile apps, where web apps run on the browser and mobile apps run on mobile devices. Both web app and mobile app are the client apps to which the user interacts. These apps require to communicate with the backend services to store the data, send emails, push notifications. Node.js is an ideal platform to build highly scalable, data-intensive, and real-time applications. It can be used for agile development and highly-scalable services. For example, PayPal is a java and spring-based application using Node.js. Advantages of Node.js Angular.js Angular.js is a JavaScript framework that is used to develop web applications. This framework is developed by the Google. Now, the question arises that there are many javascript frameworks available in the market. Why do we prefer angular.js over the other frameworks for developing the web application?. Advantages of Angular.js MongoDB MongoDB is the database used in web development. It is a NoSQL database, and a NoSQL database can be defined as a non-relational and document-oriented database management system. As it is a document-oriented database management system, so it stores the data in the form of documents. The SQL databases use SQL query language to query the database, whereas the MongoDB is a NoSQL database that uses BSON language to query the database. JSON is a text-based format, but it is inefficient in terms of speed and space. In order to make MongoDB efficient in terms of space and speed, BSON was invented. BSON basically stores the JSON format in the binary form that optimizes the space, speed, and complexity. Since the MongoDB is an unstructured schema and the data is not related to each other then the question arises 'why do we need to use the MongoDB?'. MongoDB is mainly useful for projects which are huge. Express.js Express.js is a free and open-source software used as a back-end web application framework. It is commonly used in the popular development stacks like MEAN with a MongoDB database. The Express.js was developed by TJ Holowaychuk. Advantages of Express.js Advantages of MeanStack Prerequisite MEAN.js is a framework for designing web applications. The user should have knowledge of web development using HTML, CSS, and JavaScript and should have basic knowledge of all the four technologies which are MongoDB, Express.js, Angular.js, and Node.js. Audience This tutorial is helpful for both beginners and professionals who want to build a career in web-development or seamlessly learn the precepts of MEAN.js. There are a lot of topics and concepts available that will help you to learn MEAN.js easily. Problem We assure you that you will not find any problem with this MEAN Stack tutorial. But if there is any mistake, please post the problem in the contact form. Next TopicArchitecture of MEAN Stack

Table of content

As a web developer, diving into the world of full-stack development can be both exciting and challenging. One of the popular choices for building robust web applications is the MEAN stack. MEAN stands for MongoDB, Express.js, Angular, and Node.js – a powerful combination of technologies that allows you to create modern, scalable, and efficient web applications.

In this step-by-step tutorial, we will guide you through the process of building a production-ready MEAN stack application. By the end of this tutorial, you will have a solid understanding of how these technologies work together and be ready to start your own MEAN stack project.

Before we begin, ensure that you have the following tools and knowledge:

Now that you have the necessary tools in place, let’s get started with building your MEAN stack application!

1. Create a new directory for your project:

bash mkdir mean-stack-app cd mean-stack-app

2. Initialize your Node.js project:

bash npm init -y

1. Install Express.js, a popular Node.js web application framework:

bash npm install express --save

2. Create a basic Express.js server in a file named `server.js`. This will be your application’s backend:

javascript const express = require('express'); const app = express(); const port = 3000; app.get('/', (req, res) => { res.send('Hello MEAN Stack!'); }); app.listen(port, () => { console.log(`Server is running on port ${port}`); });

3. Start your Node.js server:

bash node server.js

Your server should now be running at `http://localhost:3000`, and you should see “Hello MEAN Stack!” when you visit this URL in your browser.

1. Generate a new Angular project:

bash ng new mean-stack-frontend

Follow the prompts to configure your Angular project.

2. Navigate to your Angular project directory:

bash cd mean-stack-frontend

3. Start the Angular development server:

bash ng serve

Your Angular application will be available at `http://localhost:4200`. Visit this URL in your browser, and you should see the default Angular app.

1. Open the `src/environments/environment.ts` file in your Angular project and update the `apiUrl` property to point to your Express.js server:

typescript export const environment = { production: false, apiUrl: 'http://localhost:3000', };

2. Create an Angular service to interact with your Express.js backend. You can generate a service using the Angular CLI:

bash ng generate service api

Implement your API service to make HTTP requests to your Express.js server.

3. Update your Angular components to use the API service to fetch data from the server and display it in your application.

1. Start your MongoDB server:

bash mongodb

2. Connect your Express.js backend to MongoDB using a MongoDB driver such as Mongoose.

3. Create MongoDB models and routes to handle data storage and retrieval in your Express.js application.

1. Choose a hosting provider for your MEAN stack application. Popular options include Heroku, AWS, and Microsoft Azure.

2. Deploy your Express.js backend and MongoDB to your chosen hosting environment.

3. Deploy your Angular frontend to a hosting service like Netlify, Vercel, or GitHub Pages.

4. Update your Angular `environment.ts` file to point to your production API URL.

Congratulations! You’ve now built and deployed a production-ready MEAN stack application. This tutorial provides a solid foundation for creating web applications using the MEAN stack, but there is still much more to explore and learn. As you gain experience, you can enhance your application with features like user authentication, data validation, and more.

Happy coding, and best of luck with your MEAN stack journey!

Table of content