NodeJS/Express Rest APIs + Bootstrap Table + AngularJS example

In the tutorial, we show how to use Bootstrap Table & AngularJS to display data from NodeJS/Express RestAPIs.

Related posts:
NodeJs/Express RestAPIs – POST/GET/PUT/DELETE requests
NodeJS/Express – POST/GET to MySQL using Sequelize – AngularJS + Bootstrap form

Goal

We create a NodeJS/Express project as below structure:

Run above project then makes a request http://localhost:8081

-> Bootstrap view:

NodeJS-Express-AngularJS-Bootstrap-Table-view

Practice

Setting up NodeJS/Express project

Create a folder ‘NodeJS-Express-AngularJS-Bootstrap-Table’:

Then init NodeJS project, see prompts:

-> Install Express, Body-Parser:

-> see package.json file:

Frontend
Create Bootstrap views

./views/index.html file:

./views/404.html file:

AngularJS load data into Bootstrap Table

– For loading data into Bootstrap Table with AngularJS, we implement a file ./resources/static/js/angularJsApp.js:

Backend
Create Express Routes

./app/routes/customer.route.js file:

Implement Controllers

./app/controllers/customer.controller.js file:

Implement Server.js

./server.js file:

Run & Check results

Start NodeJS server, then makes a request: http://localhost:8081
-> Logs:

-> Browser Network’s Logs:

NodeJS-Express-AngularJS-Bootstrap-Table-requests

-> Bootstrap views:

NodeJS-Express-AngularJS-Bootstrap-Table-view

Sourcecode

To run below sourcecode, follow the guides:


step 0: download & extract zip file -> we have a folder ‘NodeJS-Express-AngularJS-Bootstrap-Table’
step 1: cd NodeJS-Express-AngularJS-Bootstrap-Table
step 2: npm install express body-parser –save
step 3: node server.js

-> Sourcecode:
NodeJS-Express-AngularJS-Bootstrap-Table

By grokonez | May 8, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*