让angular-cli工程基于ExpressJS服务,为对接后台API做准备

前端之家收集整理的这篇文章主要介绍了让angular-cli工程基于ExpressJS服务,为对接后台API做准备前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在angular-cli生成的工程文件目录下,创建server子目录,在server目录下创建app.js和api.routes.js,app.js内容

@H_301_2@//参考资料: https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli#conclusion const express = require('express'); const path = require('path'); const http = require('http'); const bodyParser = require('body-parser'); // Get our API routes const api = require('./api.routes'); const app = express(); // Parsers for POST data app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); // Point static path to dist app.use(express.static(path.join(__dirname,'../dist'))); // Set our api routes app.use('/api',api); // Catch all other routes and return the index file app.get('*',(req,res) => { res.sendFile(path.join(__dirname,'../dist/index.html')); }); /** * Get port from environment and store in Express. */ const port = process.env.PORT || '3000'; app.set('port',port); /** * Create HTTP server. */ const server = http.createServer(app); /** * Listen on provided port,on all network interfaces. */ server.listen(port,() => console.log(`API running on localhost:${port}`));

api.routes.js内容

@H_301_2@const express = require('express'); const router = express.Router(); /* GET api listing. */ router.get('/',res) => { res.send('api works'); }); module.exports = router;

修改package.json中scripts内容,其中start和build内容修改

@H_301_2@"start": "node server/app.js","build": "ng build --watch",

安装express

@H_301_2@$ npm install --save express body-parser

运行

@H_301_2@$npm start & npm run build 注:& 符号并行运行两侧命令,如果是&&,是顺序执行两侧命令

浏览器中访问 http://localhost:3000

猜你在找的Angularjs相关文章