We will create a small REST Api with express

• Part 1: A simple crud
  • Installation
  • The generated app
  • The list of addresses
  • The detail
  • Editing the detail
  • Validation
• Part 2: A node.js express-based API
  • Setup Express
  • Simple handler
  • Handling pagination
• Part 3: Advanced material
  • Header and footer
  • Toolbar
  • Submenus
  • Using a Real API
  • The DataSource object

Code on github https://github.com/kendarorg/Angular101

Handling pagination

Fill with data

Under the demo002srv there is a batch file, fill.bat that loads a bunch of data to test the feature

curl -d "{\"name\":\"a\",\"address\":\"a road\",\"email\":\"a@test.com\"}" -H "Content-Type:application/json" -X POST http://localhost:4201/api/address
curl -d "{\"name\":\"b\",\"address\":\"b road\",\"email\":\"b@test.com\"}" -H "Content-Type:application/json" -X POST http://localhost:4201/api/address
curl -d "{\"name\":\"c\",\"address\":\"c road\",\"email\":\"c@test.com\"}" -H "Content-Type:application/json" -X POST http://localhost:4201/api/address
curl -d "{\"name\":\"d\",\"address\":\"d road\",\"email\":\"d@test.com\"}" -H "Content-Type:application/json" -X POST http://localhost:4201/api/address
curl -d "{\"name\":\"e\",\"address\":\"e road\",\"email\":\"e@test.com\"}" -H "Content-Type:application/json" -X POST http://localhost:4201/api/address
curl -d "{\"name\":\"f\",\"address\":\"f road\",\"email\":\"f@test.com\"}" -H "Content-Type:application/json" -X POST http://localhost:4201/api/address
curl -d "{\"name\":\"g\",\"address\":\"g road\",\"email\":\"g@test.com\"}" -H "Content-Type:application/json" -X POST http://localhost:4201/api/address
curl -d "{\"name\":\"h\",\"address\":\"h road\",\"email\":\"h@test.com\"}" -H "Content-Type:application/json" -X POST http://localhost:4201/api/address
curl -d "{\"name\":\"i\",\"address\":\"i road\",\"email\":\"i@test.com\"}" -H "Content-Type:application/json" -X POST http://localhost:4201/api/address
curl -d "{\"name\":\"j\",\"address\":\"j road\",\"email\":\"j@test.com\"}" -H "Content-Type:application/json" -X POST http://localhost:4201/api/address
curl -d "{\"name\":\"k\",\"address\":\"k road\",\"email\":\"k@test.com\"}" -H "Content-Type:application/json" -X POST http://localhost:4201/api/address
curl -d "{\"name\":\"l\",\"address\":\"l road\",\"email\":\"l@test.com\"}" -H "Content-Type:application/json" -X POST http://localhost:4201/api/address
curl -d "{\"name\":\"m\",\"address\":\"m road\",\"email\":\"m@test.com\"}" -H "Content-Type:application/json" -X POST http://localhost:4201/api/address
curl -d "{\"name\":\"n\",\"address\":\"n road\",\"email\":\"n@test.com\"}" -H "Content-Type:application/json" -X POST http://localhost:4201/api/address

Add some header

The idea is to use the request headers to paginate. In the request

• X-Page: the page number
• X-PageSize: the items per page

And in the response

• X-Count: the total count of objects

• X-PageCount: the number of items returned

• X-PageIndex: the current page

• access-control-expose-headers: all headers are readable by the browser

  app.get("/api/address",cors(), (req, res, next) => {
  var page=0;
  var pageSize=9999;
  if(req.header('X-Page')!=undefined){
  page=parseInt(req.header('X-Page'));
  }
  if(req.header('X-PageSize')!=undefined){
  pageSize=parseInt(req.header('X-PageSize'));
  }
  var start = page*pageSize;
  var end =(page+1)pageSize;
  var result =[];
  for(;start< addresses.length && start<end;start++){
  result.push(addresses[start]);
  }
  res.set('X-Count',addresses.length);
  res.set('X-PageCount',result.length);
  res.set('X-PageIndex',result.length);
  res.set('access-control-expose-headers','')
  res.json(result);
  });

Running everything

Restart and fill with data. Then you can play with curl

curl -H "X-Page:1" -H "X-PageSize:3" http://localhost:4201/api/address -i

This will return the following, note the X-Count and X-PageCount data!

HTTP/1.1 200 OK
X-Powered-By: Express
X-Count: 14
X-PageCount: 3
Content-Type: application/json; charset=utf-8
Content-Length: 181
ETag: W/"b5-0cJvnL+wdxDw84xhX1z6yPoVDJ0"
Date: Wed, 12 Feb 2020 08:34:04 GMT
Connection: keep-alive

[{"name":"d","address":"d road","email":"d@test.com","id":4},
	{"name":"e","address":"e road","email":"e@test.com","id":5},
	{"name":"f","address":"f road","email":"f@test.com","id":6}]

You can get everything working calling fillandrun.bat

start cmd /c node index.js
echo Waiting 5 seconds
ping localhost -n 5 >NUL
call fill.bat