Understanding MEAN Stack, With Examples

by

Trismegist san / Shutterstock.com

Want to create your own applications? There is no better method than using the MEAN stack. From efficient storage to an integrated runtime environment, this group of tools makes it easy to develop any function you want.

But what is the MEAN stack, and how does it work? In this article, we break down the acronym, introduce its parts, and put them in motion. We even provide the basic syntax so you can get started. Keep reading for all you need to know.

What is MEAN Stack?

When you first hear the term MEAN stack, you might wonder about a data structure. Get that idea out of your mind. In this case, the term refers to a combination of technologies used to create dynamic applications.

The MEAN stack relies on fourJavaScriptprograms: MongoDB for the database, Express.js for server-side application logic, AngularJS for the client-side interface, and Node.js for server runtime environment. Together, they create the acronym in question.

The MEAN stack has a strong frontend framework, making it perfect for building single-page applications. And its event-driven, non-blocking nature allows developers to create real-time programs with ease. Finally, the stack s ability to store large blocks of data makes it ideal for setting up social network platforms and content management systems.

How Do You Use It?

To create dynamic applications with the MEAN stack, it s important to know how each technology ties in together. To get started, you ll first establish the project structure. You want to create a file for the backend server and another for the front end. With these made, you ll need to write a module and controller to run the function. Finally, you ll connect it all to the database and serve theAPI routes.

There are quite a few steps to developing an interactive application with the MEAN stack, but once you understand the process, you can use it in several ways. To get you started, check out the syntax for this sample to-do list program:

1. Set up the project structure:

mkdir mean-todo-list
cd mean-todo-list

npm init -y

npm install express body-parser mongoose angular

2. Set up the backend server (Express.js and Node.js):

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');

const app = express();

// Middleware
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// Routes
app.get('/', (req, res) => {
  res.send('Hello MEAN Stack!');
});

// Start the server
const port = 3000;
app.listen(port, () => {
  console.log(`Server started on port ${port}`);
});

3. Set up the frontend server (Angular):

<!DOCTYPE html>
<html>
  <head>
    <title>MEAN To-Do List</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body ng-app="TodoApp">
    <div ng-controller="TodoController">
      <h1>My To-Do List</h1>
      <form ng-submit="addTask()">
        <input type="text" ng-model="newTask" placeholder="Add a task" required>
        <button type="submit">Add</button>
      </form>
      <ul>
        <li ng-repeat="task in tasks">{{ task }}</li>
      </ul>
    </div>
  </body>
</html>

4. Create frontend module and controller:

angular.module('TodoApp', [])
  .controller('TodoController', function($scope) {
    $scope.tasks = [];

    $scope.addTask = function() {
      $scope.tasks.push($scope.newTask);
      $scope.newTask = '';
    };
  });

5. Connect to MongoDB:

mongoose.connect('mongodb://localhost/mean-todo-list', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

const db = mongoose.connection;
db.on('error', console.error.bind(console, 'MongoDB connection error:'));
db.once('open', () => {
  console.log('Connected to MongoDB');
});

6. Serve the frontend and API routes:

// Serve the frontend
app.use(express.static('public'));

// API routes
app.get('/api/tasks', (req, res) => {
  // Logic to fetch tasks from MongoDB and send as JSON response
});

app.post('/api/tasks', (req, res) => {
  // Logic to add a task to MongoDB
});

Leave a Comment