创建我们的项目

我们很高兴这样做，我们再次从控制台运行：

mkdir our_project
cd our_project

现在我们就在我们的代码所在的地方。要创建项目的主存档，你可以运行

好的，但我们如何创建快速骨架项目？

这很简单：

npm install -g express express-generator

Linux 发行版和 Mac 应该使用 sudo 来安装它，因为它们安装在 nodejs 目录中，只能由 root 用户访问。如果一切顺利，我们最终可以创建快速应用程序框架，只需运行即可

express

此命令将在我们的文件夹中创建一个快速示例应用程序结构如下：

bin/
public/
routes/
views/
app.js
package.json

现在，如果我们运行 npm 开始转到 http：// localhost：3000， 我们将看到快速应用程序启动并运行，公平地说我们已经生成了一个快速应用程序而没有太多麻烦，但我们如何将它与 AngularJS 混合？。

简要说明如何表达？

Express 是一个建立在 Nodejs 之上的框架，你可以在 Express 站点上看到官方文档。但是出于我们的目的，我们需要知道 Express 在我们键入时是负责的，例如， http：// localhost：3000 / home渲染我们应用程序的主页。从最近创建的应用程序创建，我们可以检查：

FILE: routes/index.js
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

这段代码告诉我们的是，当用户访问 http：// localhost：3000 时， 它必须呈现索引视图并传递一个带有 title 属性和值 Express 的 JSON 。但是当我们检查 views 目录并打开 index.jade 时，我们可以看到：

extends layout
block content
    h1= title
    p Welcome to #{title}

这是另一个强大的 Express 功能，模板引擎，它们允许你通过向其传递变量或继承另一个模板来呈现页面中的内容，以便你的页面更紧凑，更易于被其他人理解。文件扩展名为 .jade ，据我所知， Jade 更改了 Pug 的名称，基本上是相同的模板引擎，但有一些更新和核心修改。

安装 Pug 并更新 Express 模板引擎

好的，要开始使用 Pug 作为我们项目的模板引擎，我们需要运行：

npm install --save pug

这将安装 Pug 作为我们项目的依赖项并将其保存到 package.json 。要使用它，我们需要修改 app.js 文件 ：

var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

并用帕格替换视线引擎，这就是全部。我们可以使用 npm start 再次运行我们的项目，我们将看到一切正常。

AngularJS 如何适应所有这些？

AngularJS 是一个 Javascript MVW （Model-View-Whatever）框架，主要用于创建 SPA （Simple Page Application）安装相当简单，你可以去 AngularJS 网站下载最新版本的 v1.6.4 。

在我们下载 AngularJS 之后应该将文件复制到我们项目中的 public / javascripts 文件夹中，稍微解释一下，这是为我们网站的静态资产提供服务的文件夹，图像，css，javacript 文件等等。当然这可以通过 app.js 文件进行配置，但我们会保持简单。现在我们创建一个名为 ng-app.js 的文件，这是我们的应用程序将存在的文件，位于我们的 javascripts 公共文件夹中，就在 AngularJS 所在的位置。要启动 AngularJS，我们需要修改 views / layout.pug 的内容，如下所示：

doctype html
html(ng-app='first-app')
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body(ng-controller='indexController')
    block content

  script(type='text-javascript', src='javascripts/angular.min.js')
  script(type='text-javascript', src='javascripts/ng-app.js')

我们在这做什么？嗯，我们包括 AngularJS 核心和我们最近创建的文件 ng-app.js 所以当渲染模板时它会带来 AngularJS，注意使用 ng-app 指令，这就是说明了 AngularJS，这是我们的应用程序名称，它应该坚持下去。
因此，我们的 ng-app.js 的内容将是：

angular.module('first-app', [])
       .controller('indexController', ['$scope', indexController]);

function indexController($scope) {
    $scope.name = 'sigfried';
}

我们在这里使用最基本的 AngularJS 功能，双向数据绑定，这允许我们立即刷新我们的视图和控制器的内容，这是一个非常简单的解释，但你可以在 Google 或 StackOverflow 中进行研究，看看它是如何工作的。

所以，我们有 AngularJS 应用程序的基本块，但我们需要做的事情，我们需要更新我们的 index.pug 页面以查看我们的角度应用程序的更改，让我们这样做：

extends layout
block content
  div(ng-controller='indexController')
    h1= title
    p Welcome {{name}}
    input(type='text' ng-model='name')

这里我们只是将输入绑定到我们控制器内 AngularJS 范围内的已定义属性名称：

$scope.name = 'sigfried';

这样做的目的是，每当我们更改输入中的文本时，上面的段落将更新{{name}}内的内容，这称为插值，再次是另一个 AngularJS 功能，用于在模板中呈现我们的内容。

所以，所有设置，我们现在可以运行 npm start 转到 http：// localhost：3000 并查看我们的快递应用程序服务页面和 AngularJS 管理应用程序前端。