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
Contents
Goal
We create a NodeJS/Express project as below structure:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/NodeJS-Express-AngularJS-Bootstrap-Table /app /controllers customer.controller.js /routes customer.route.js /node_modules /resources /static /js angularJsApp.js /views 404.html index.html package.json package-lock.json server.js |
Run above project then makes a request http://localhost:8081
-> Bootstrap view:
Practice
Setting up NodeJS/Express project
Create a folder ‘NodeJS-Express-AngularJS-Bootstrap-Table’:
|
1 2 |
mkdir NodeJS-Express-AngularJS-Bootstrap-Table cd NodeJS-Express-AngularJS-Bootstrap-Table |
Then init NodeJS project, see prompts:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
NodeJS-Express-AngularJS-Bootstrap-Table>npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (nodejs-express-angularjs-bootstrap-table) version: (1.0.0) description: Building a NodeJS/Express web-application that shows data from RestAPIs by Bootstrap Table & AngularJS entry point: (index.js) server.js test command: git repository: keywords: NodeJS, Express, AngularJS, Bootstrap-Table author: grokonez.com license: (ISC) About to write to C:\Users\pc\Desktop\nodejs\NodeJS-Express-AngularJS-Bootstrap-Table\package.json: { "name": "nodejs-express-angularjs-bootstrap-table", "version": "1.0.0", "description": "Building a NodeJS/Express web-application that shows data from RestAPIs by Bootstrap Table & AngularJS", "main": "server.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "NodeJS", "Express", "AngularJS", "Bootstrap-Table" ], "author": "grokonez.com", "license": "ISC" } Is this ok? (yes) yes |
-> Install Express, Body-Parser:
|
1 |
npm install express body-parser --save |
-> see package.json file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
{ "name": "nodejs-express-angularjs-bootstrap-table", "version": "1.0.0", "description": "Building a NodeJS/Express web-application that shows data from RestAPIs by Bootstrap Table & AngularJS", "main": "server.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "NodeJS", "Express", "AngularJS", "Bootstrap-Table" ], "author": "grokonez.com", "license": "ISC", "dependencies": { "body-parser": "^1.18.2", "express": "^4.16.3" } } |
Frontend
Create Bootstrap views
– ./views/index.html file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE HTML> <html> <head> <title>AngularJS + Bootstrap Table + NodeJS/Express RestAPIs</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <script src="/static/js/angularJsApp.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> </head> <body> <div class="container" ng-app="app" ng-controller="jsaLoadCustomers"> <h3>Customers List:</h3> <div id="customerlist" class="row col-md-7 table-responsive"> <table class="table table-bordered table-hover"> <tr> <th>No</th> <th>Name</th> <th>Age</th> <th>Street</th> <th>PostCode</th> </tr> <tr ng-repeat="cust in customers | orderBy : 'name'" ng-class-even="'info'" ng-class-odd="'success'"> <td>{{$index + 1 }}</td> <td>{{cust.name | uppercase}}</td> <td>{{cust.age}}</td> <td>{{cust.address.street}}</td> <td>{{cust.address.postcode}}</td> </tr> </table> </div> </div> </body> </html> |
– ./views/404.html file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <title>404 Error!</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="jumbotron text-center"> <h1>404 Error!</h1> <p>PAGE NOT FOUND</p> </div> </body> </html> |
AngularJS load data into Bootstrap Table
– For loading data into Bootstrap Table with AngularJS, we implement a file ./resources/static/js/angularJsApp.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
var app = angular.module('app', []); //####################### //JSA CONTROLLER //####################### app.controller('jsaLoadCustomers', function($scope, $http, $location) { $scope.customers = []; function getAllCustomers(){ var url = "api/customers/all"; // do getting $http.get(url).then( response => { $scope.getDivAvailable = true; $scope.customers = response.data; }, response => { $scope.postResultMessage = "Error Status: " + response.statusText; }); } getAllCustomers(); }); |
Backend
Create Express Routes
– ./app/routes/customer.route.js file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
module.exports = function(app) { var express = require("express"); var router = express.Router(); const customers = require('../controllers/customer.controller.js'); var path = __basedir + '/views/'; router.use(function (req,res,next) { console.log("/" + req.method); next(); }); app.get('/', (req,res) => { res.sendFile(path + "index.html"); }); // Retrieve all Customers app.get('/api/customers/all', customers.getAll); app.use("/",router); app.use("*", (req,res) => { res.sendFile(path + "404.html"); }); } |
Implement Controllers
– ./app/controllers/customer.controller.js file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
// Fetch all Customers var customers = [ { id: 1, name: "Jack", age: 25, address:{ street: "NANTERRE CT", postcode: "77471" } }, { id: 2, name: "Mary", age: 37, address:{ street: "W NORMA ST", postcode: "77009" } }, { id: 3, name: "Peter", age: 17, address:{ street: "S NUGENT AVE", postcode: "77571" } }, { id: 4, name: "Amos", age: 23, address:{ street: "E NAVAHO TRL", postcode: "77449" } }, { id: 5, name: "Craig", age: 45, address: { street: "AVE N", postcode: "77587" } } ] exports.getAll = (req, res) => { console.log("--->Get All Customers: \n" + JSON.stringify(customers, null, 4)); res.send(customers); }; |
Implement Server.js
– ./server.js file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var express = require('express'); var app = express(); var bodyParser = require('body-parser'); app.use(bodyParser.json()) app.use(express.static('resources')); global.__basedir = __dirname; require('./app/routes/customer.route.js')(app); // Create a Server var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("App listening at http://%s:%s", host, port) }) |
Run & Check results
Start NodeJS server, then makes a request: http://localhost:8081
-> Logs:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
NodeJS-Express-AngularJS-Bootstrap-Table>node server.js App listening at http://:::8081 --->Get All Customers: [ { "id": 1, "name": "Jack", "age": 25, "address": { "street": "NANTERRE CT", "postcode": "77471" } }, { "id": 2, "name": "Mary", "age": 37, "address": { "street": "W NORMA ST", "postcode": "77009" } }, { "id": 3, "name": "Peter", "age": 17, "address": { "street": "S NUGENT AVE", "postcode": "77571" } }, { "id": 4, "name": "Amos", "age": 23, "address": { "street": "E NAVAHO TRL", "postcode": "77449" } }, { "id": 5, "name": "Craig", "age": 45, "address": { "street": "AVE N", "postcode": "77587" } } ] |
-> Browser Network’s Logs:
-> Bootstrap views:
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