Sharing Top Content from the Angular-sphere.

MongoDB, Express, AngularJS (1.6) and NodeJS (MEAN)

Building scalable web applications using MEAN stack



#nodeJS #angularJS #MongoDB

  • How They All Work TogetherIn very simple terms, we are going to develop our application using AngularJS as the front-end framework to fine-tune our DOM, NodeJS as the backend engine, ExpressJS as the server-side communication platform and MongoDB as the data store.
  • Easy stuff huh!Step 2: Dependency SetupTo start developing our application, we need to have the following installed:NodeJS with NPMMongoDB which can be used online or downloaded, installed and used locally.Run the following command on the terminal to verify your installation:NodeJS: node -v (displays node version: i.e. v6.10.0)NPM: npm -v (displays npm version: i.e. v5.0)MongoDB (installed locally): mongod (starts mongodb server locally)Once we have these setup, we can install the other dependencies using NPM on the command line.Now, we create a project directory and navigate to the project directory in our terminal and initialise the node project using NPM by running:npm initThis will prompt you with questions about the project, like the name and version to generate the package.json file, we’ll use the defaults for now, and make needed changes to the generated file later.After that, we proceed to install node dependencies to be used in our project.
  • To do this, we run:npm install –save angular@1.6.4 express body-parser angular-route@1.6.4 mongooseThis command will install our dependencies, observe we used the – -save flag to ensure that the package.json file is also updated with the changes.
  • We also installed mongoose to enable us use a structured model-schema framework for our application.Now our project folder structure should look like this: node_modules –package.jsonwhile our package.json file looks like this:{ “name”: “angular-project”, “version”: “1.0.0”, “description”: “”, “main”: “index.js”, “scripts”: { “test”: “echo \”Error: no test specified\” exit 1″ }, “author”: “Ethan”, “license”: “ISC”, “dependencies”: { “angular”: “^1.6.4”, “angular-route”: “^1.6.4”, “body-parser”: “^1.17.2”, “express”: “^4.15.4”, “mongoose”: “^4.11.6” }}We are now ready to create our scripts to serve our application from the backend server using express.I know this is a lot of boring theoretical stuff, but I promise we’ll write a bunch of code in the next tutorial.In the next tutorial, we will setup express server, create static files and run a sample application in the browser.Feel free to drop your comments, I’ll be happy to get back to you.

This is the first tutorial of this series and it pretty much explains the basics of setting up a MEAN project, if you’re already comfortable setting up a MEAN project then you may find this long and…

@cloudboostio: Building scalable web applications using MEAN stack

#nodeJS #angularJS #MongoDB

This is the first tutorial of this series and it pretty much explains the basics of setting up a MEAN project, if you’re already comfortable setting up a MEAN project then you may find this long and boring. Feel free to move on to the next tutorial. But if you’re a beginner in the MEAN stack, I’m hoping you pick up a thing or two from this 🙂

MEAN stands for MongoDB, ExpressJS, AngularJS and NodeJS. Let’s quickly walk through each of them:

MongoDB is a non-relational, NoSQL database written in C++. In plain language, a database that stores data as objects, where each object has a unique _id, as opposed to storing data in tables which is used by relational databases. Generally, non-relational databases are easy to use, requires little technical expertise, and scales out really well across machines.

ExpressJS is a NodeJS web application framework. It enables us add some backend functionalities to our plain JavaScript application. It basically creates a REST server on NodeJS.

AngularJS is a front-end framework that allows us extend HTML attributes and functionalities to accommodate the use of logic-based expressions directly in the DOM. AngularJS enables us to use functionalities such as ng-if, ng-show, ng-repeat and a bunch of other useful features that can make our HTML views dynamic.

In very simple terms, we are going to develop our application using AngularJS as the front-end framework to fine-tune our DOM, NodeJS as the backend engine, ExpressJS as the server-side communication platform and MongoDB as the data store. Easy stuff huh!

To start developing our application, we need to have the following installed:

Run the following command on the terminal to verify your installation:

NodeJS: node -v (displays node version: i.e. v6.10.0)

NPM: npm -v (displays npm version: i.e. v5.0)

MongoDB (installed locally): mongod (starts mongodb server locally)

Once we have these setup, we can install the other dependencies using NPM on the command line.

Now, we create a project directory and navigate to the project directory in our terminal and initialise the node project using NPM by running:

This will prompt you with questions about the project, like the name and version to generate the package.json file, we’ll use the defaults for now, and make needed changes to the generated file later.

After that, we proceed to install node dependencies to be used in our project. To do this, we run:

This command will install our dependencies, observe we used the – -save flag to ensure that the package.json file is also updated with the changes. We also installed mongoose to enable us use a structured model-schema framework for our application.

Now our project folder structure should look like this:

while our package.json file looks like this:

“name”: “angular-project”,

“version”: “1.0.0”,

“description”: “”,

“main”: “index.js”,

“scripts”: {

“test”: “echo \”Error: no test specified\” && exit 1″

“author”: “Ethan”,

“license”: “ISC”,

“dependencies”: {

“angular”: “^1.6.4”,

“angular-route”: “^1.6.4”,

“body-parser”: “^1.17.2”,

“express”: “^4.15.4”,

“mongoose”: “^4.11.6”

We are now ready to create our scripts to serve our application from the backend server using express.

I know this is a lot of boring theoretical stuff, but I promise we’ll write a bunch of code in the next tutorial.

In the next tutorial, we will setup express server, create static files and run a sample application in the browser.

Feel free to drop your comments, I’ll be happy to get back to you.

MongoDB, Express, AngularJS (1.6) and NodeJS (MEAN)

Comments are closed, but trackbacks and pingbacks are open.