Installing MongoDB and Angular and integrating them together

One of the biggest challenges when building database backed website applications is establishing a connection between the backend and the front-end. In most cases, the backend database is developed using a completely different technology than the one used to develop the front-end user interface. In one of my projects, I was developing a navigation app to help people with ambulatory difficulties navigate a campus environment. I used a Mongo Database for my backend to create, read, update, and delete data. For the front-end I used Angular which is a platform for building mobile and desktop web applications.

Connecting these two technologies proved to be a daunting task in the beginning and it took me a while to fully integrate them together. After my success I decided to share my experience installing MongoDB and Angular and creating a project that integrates both technologies together. I need to emphasis however that this is only for macOS machines. Hope you find this useful.

Install Homebrew

Before installing homebrew, install Xcode command-line tools by running command below in your macOS terminal.

xcode-select --install

Next, use the command on this link to install homebrew through your macOS terminal if you haven’t already.

Install MongoDB Community Edition

With brew installed, run the command below in your macOS terminal to download the official Homebrew formula for MongoDB and the Database Tools.

brew tap mongodb/brew

To install MongoDB, run the command below in macOS terminal

brew install mongodb-community@5.0

To run MongoDB as a macOS service, run:

brew services start mongodb-community@5.0

To stop MongoDB as a macOS service, run:

brew services stop mongodb-community@5.0

For verification that MongoDB is running, run:

brew services list

Install Angular CLI

To work with Angular, I found Angular CLI to be useful since it’s a command-line interface tool that is used to initialize, develop, scaffold, and maintain Angular applications directly from the command shell.

First make sure you have npm installed in your machine. You can download latest version of npm on the command line by running the following command

npm install -g npm

Now, install angular cli.

npm install -g @angular/cli

To create, build, and serve a new, basic Angular project on a development server, go to project directory and run the following commands in you terminal:

ng new my-first-project

cd my-first-project

ng serve

In your browser, copy and paste the local host link: http://localhost:4200/ to see the web application running. The command ng serve builds an application and serves it locally such that the server automatically rebuilds the application and reloads the page when one changes any of the source files.

Angular + MongoDB Integration

Once you have angular and mongodb installed, now it’s time to integrate the angular web application to the mongodb backed-database.

Run the following commands to set up Express, Mongoose, and the body-parser which are tools that help to integrate angular and mongodb.

npm install express — save
npm install mongoose — save
npm install body-parser --save

Next, make a new file called server.js in your project directory. The file manages the connection between the mongodb backend and the angular front-end application. Below is an example of a server.js file I used in one of my projects:

Lines 1–4 allows usage of the 3 packages we just installed: express, mongoose and body-parser.

In lines 11–14, we instantiate a MongoDB database locally. I established the connection through MongoDB Compass which is a Graphical User Interface for MongoDB for querying, optimizing and analyzing data in the Mongo Database. It makes access to the Mongo database easy especially for manipulating data. You can check this link to learn how to install MongoDB Compass.

Lines 15–23 are used to define the headers.

Lines 24–64 allow us to store, update, find, and delete user data from the database.

Next, create a new Angular Service to call common AJAX APIs by running the command below.

ng g s common -spec=false

Then open src/app/common.service.ts in your project folder and paste the following code there:

You can then update your app’s HTML to display the data in the Angular Website Application.

Run your application and connect to MongoDB backend.

To launch a local instance of the mongoDB database, in terminal, run:

node server.js

To run the Angular Web Application, Run the command below:

ng serve

Here’s an example of launching an Angular App that’s backed by a Mongo database.

Run node server.js in your project folder to connect to the Mongo backend database.

Open another terminal window with the same project folder and run ng serve to launch the Angular Web Application.

Copy the url: http://localhost:4200/ from the terminal window above and paste to a browser to see the web application running.

Here’s an example of the web application I created for navigating a campus environment.