建立我們的專案

我們很高興這樣做，我們再次從控制檯執行：

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 管理應用程式前端。