angular 6 from rookie to master
1. Project bootstrap
From this chapter we are going to create a new project called BookLibrary
ng new book-library
2. Installing the Additional NPM Packages
cd book-library
npm install bootstrap@4.1.1
npm install font-awesome@4.7.0
npm install --save-dev json-server@0.12.1
npm install --save-dev jsonwebtoken@8.1.1
3. Add css support
angular.json
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/font-awesome/css/font-awesome.min.css"
],
4. Preparing the RESTful Web Service
package.json
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"json": "json-server data.js -p 3500 -m authMiddleware.js"
}
5. Fake data
add data.js in the project root
data.js
module.exports = function () {
return {
books: [
{ id: 1, name: "Java 8实战", category: "JAVA", owner: "ADC", type: "PAPER BOOK", location: "8F", team: "EDG" },
{ id: 2, name: "Spring微服务实战", category: "MicroService", owner: "ADC", type: "PAPER BOOK", location: "8F", team: "EDG" },
{ id: 3, name: "Akka实战：快速构建高可用分布式应用", category: "BigData", owner: "ADC", type: "PAPER BOOK", location: "8F", team: "EDG" },
{ id: 4, name: "Docker实战", category: "DevOps", owner: "ADC", type: "PAPER BOOK", location: "8F", team: "EDG" },
{ id: 5, name: "Java虚拟机规范", category: "JAVA", owner: "ADC", type: "PAPER BOOK", location: "8F", team: "EDG" },
{ id: 6, name: "MySQL技术内幕：InnoDB存储引擎（第2版）", category: "Database", owner: "ADC", type: "PAPER BOOK", location: "8F", team: "Digital" },
{ id: 7, name: "PHP7内核剖析", category: "PHP", owner: "ADC", type: "PAPER BOOK", location: "8F", team: "Digital" },
{ id: 8, name: "响应式架构：消息模式Actor实现与Scala、Akka应用集成", category: "BigData", owner: "ADC", type: "PAPER BOOK", location: "8F", team: "EDG" },
{ id: 9, name: "码出高效：Java开发手册", category: "JAVA", owner: "KG", type: "PAPER BOOK", location: "", team: "" },
{ id: 10, name: "Spring Cloud与Docker微服务架构实战", category: "MicroService", owner: "KG", type: "PAPER BOOK", location: "", team: "" }
],
orders: []
}
};
6. Autentication by json-server
authMiddleware.js
const jwt = require("jsonwebtoken");
const APP_SECRET = "myappsecret";
const USERNAME = "admin";
const PASSWORD = "secret";
module.exports = function (req, res, next) {
if ((req.url == "/api/login" || req.url == "/login")
&& req.method == "POST") {
if (req.body != null && req.body.name == USERNAME
&& req.body.password == PASSWORD) {
let token = jwt.sign({ data: USERNAME, expiresIn: "1h" }, APP_SECRET);
res.json({ success: true, token: token });
} else {
res.json({ success: false });
}
res.end();
return;
} else if ((((req.url.startsWith("/api/products")
|| req.url.startsWith("/products"))
|| (req.url.startsWith("/api/categories")
|| req.url.startsWith("/categories"))) && req.method != "GET")
|| ((req.url.startsWith("/api/orders")
|| req.url.startsWith("/orders")) && req.method != "POST")) {
let token = req.headers["authorization"];
if (token != null && token.startsWith("Bearer<")) {
token = token.substring(7, token.length - 1);
try {
jwt.verify(token, APP_SECRET);
next();
return;
} catch (err) { }
}
res.statusCode = 401;
res.end();
return;
}
next();
}
7. Modify index.html
modify the body as below
<body class="m-2">
<app>BookLibrary Will Go Here</app>
</body>
8. Folder Structure
book-library/src/app/model This folder will contain the code for the data model
book-library/src/app/library This folder will contain the functionality for basic library
book-library/src/app/admin This folder will contain the functionality for administration
9. Run Application
ng serve --port 3000 --open
image.png
10. Starting the RESTful Web Service
npm run json
image.png
image.png
