In most of the applications we need to talk to some kind of database. While AngularJS is a client side library which is capable only at the client side or at browser, now to connect to our database which usually resides at our server we need NodeJS.
NodeJS is an awesome light weight, non-blocking platform to have at your server which is perfect for data-intensive real-time applications.
We will create a simple inventory manager app which will communicate to database
SKU, Product Name, Price
Our learning path will be like following
- Install NodeJS and MongoDB
- Create and configure web server to communicate to database (NodeJS + Express)
- Craft the client side app (AngularJS)
Install NodeJS, NPM and MongoDB
Create ReST API
To create a NodeJS application we first need to create 2 files named:
1. package.json (Defines the architecture and dependency of the nodejs app)
2. server.js (This will create a basic webserver similar to Apache)
Now we created our server, lets open command line and navigate to the project folder (C:\creating-rest-api-using-nodejs-and-consuming-in-angularjs)
Enter the following commands
npm install – Install all required modules defined in package.json file
- body-parser – Required to parse the JSON data from the client
- express – Webserver similar to Apache
- mongoose – Handy module to talk to MongoDB database
- node-restful – This module automatically create REST API from specified model
node server – Run our NodeJS app
At this point we should see the message Server is running on port 3000
Create the following 2 files
- models/product.js – Define the database schema
- routes/api.js – Defines the API routes (data providers)- e.g. http://localhost:3000/api/products (get,post,put,delete)
- e.g. http://localhost:3000/api/categories (get,post,put,delete)
Now that our API is ready. You can test it using Chrome Postman extension
The next step is to create our client using AngularJS
To call our ReST API we need the help of angular-resource which will make our task easy and fun.
In this application I’ve added some animations too.
For this application we will create a factory named Product to interact with our ReST API which in turn interacts with our database.
We will call this factory from products.js file with different methods like get, post, put, delete.
The file public/index.html is the starting point of our application. From here everything starts. This page renders the view.
We have 2 controller where we define the business logic and the angular app resides here
This is the ProductsCtrl where we handle all user interactivity
Subscribe to AngularCode Programming Blog - Tutoarials about VueJS, Angular, NodeJS
Get the latest posts delivered right to your inbox