利用angular4和nodejs-express构建一个简单的网站（一）——构建先后端开发环境

学习了一段时间的angular4知识，结合之前自学的nodejs-express后端框架知识，作了一个利用angular4做为前端，node-express做为后端服务器的网站。这个网站的功能很简单，主要是为了体验一下angular4的各项功能。
如今这个网站作的差很少了，拿来和你们分享一下。有不足之处，但愿你们多提意见，也但愿能给你们的开发提供一些帮助。
话很少说，开始介绍个人网站。（特此声明：本人非专业人士，只是我的爱好，不足之处还请你们多多原谅）。
这个网站是一个相似于通信录的网站，网站逻辑比较简单，在这里简单画了一张网站运行逻辑图：

好了，开始吧！
我使用的是windows操做系统。因此，如下操做所有是在windows系统下进行的。

先从构建应用程序开始吧

• 构建前端应用程序

在前端我使用的是angular-cli构建前端开发环境，angular-cli的好处就在于集成了开发angular前端应用的一切工具和依赖，还集成了webpack打包工具，使用angular-cli构建完应用，对于咱们来讲，基本上就剩下写代码了。

一、安装angular-cli。

你的电脑上首先须要安装node.js，能够从node.js官网下载（官网下载地址：https://nodejs.org/en/），也能够从node.js中文网下载（node.js中文网地址：http://nodejs.cn/），我用的是windows系统，下载后直接双加安装就能够了。安装好node.js后，在命令提示符下输入：

npm install -g @angular/cli

回车后就会自动安装好angular-cli的最新版本，若是你的网络环境和个人同样，到处受限的话，我建议你先安装cnpm后，利用cnpm安装angular-cli。
安装cnpm，请在命令提示符下输入：

npm install -g cnpm

回车就OK了。以后将安装angular-cli语句改成

cnpm install -g @angular/cli

二、用angular-cli构建angular4应用

用angular-cli构建angular4应用很是简单，你只需在要构建应用的目录中按住shift+鼠标右键，选择“在此处打开命令窗口”，在打开的命令窗口输入：

ng new <projectname>

个人应用名称设置为front,比较简单，你们能够在<projectname>处填入本身的应用名称，回车后，会在你选择的目录下新建一个以“projectname”命名的应用（在应用构建进行到下载安装依赖包的时候，因为网络的缘由，可能会产生错误。你能够在命令行模式下进到应用目录中，运行cnpm install，应该就可以安装好全部依赖）。

• 构建后端应用程序

一、安装express应用生成器，经过应用生成器工具 express 能够快速建立一个应用的骨架在命令行输入：

npm install express-generator -g

二、利用express应用生成器快速生成应用：
在要构建应用的目录下输入：

express <appname>

(appname是你的express应用名称，个人直接就用了server)，命令执行完毕后，进入你的appname目录，执行一下npm install或cnpm install,安装好依赖后就能使用了。

好了，基本的前端和后端程序已经构建完成了，下面须要对前端和后端环境进行一下配置。