MEAN堆棧：我要使用哪些文件？

Question

TLDR； 本教程建議完全刪除文件夾bin ， views和routes ，我想知道使用MEAN堆棧時是否是慣例。

我是MEAN Stack的新手，服務器和客戶端之間的沖突讓我感到困惑。 更具體地說，我不確定應將Express中的哪些文件替換為Angular文件。

shoppingMall
..bin
..data
..node_modules
..public
....images
....javascripts
....stylesheets
..routes
....index.js
....users.js
..views
....index.jade
....layout.jade
..app.js
..package.json

這是我的具體問題：

1. 我要完全使用views/index.jade還是必須創建public/views/index.html ？ 如果我認為第一個是服務器端html渲染，而第二個是客戶端html渲染，那我對嗎？
2. 我該如何處理路由？ routes/index.js是Express提供的路由文件，但是Angular還不提供$routeProvider嗎？

路線/index.js

var express = require('express');
var router = express.Router();

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

module.exports = router;

$ routeProvider示例

$routeProvider
  .when('/', {
    templateUrl: 'views/home.html',
    controller: 'MainCtrl'
  })
  .when('/shows/:id', {
    templateUrl: 'views/detail.html',
    controller: 'DetailCtrl'
  })
  .when('/login', {
    templateUrl: 'views/login.html',
    controller: 'LoginCtrl'
  })
  .when('/signup', {
    templateUrl: 'views/signup.html',
    controller: 'SignupCtrl'
  })
  .when('/add', {
    templateUrl: 'views/add.html',
    controller: 'AddCtrl'
  })
  .otherwise({
    redirectTo: '/'
  });

得到一個明確的答案將有助於我理解Angular如何真正與Express一起使用。 先感謝您。 這個問題也解釋了為什么我對堆棧感到困惑，但是我試圖在這個問題中更好地說明我的困惑。

Answer 1

Angular是主要用於構建單頁Web應用程序（SPA）的框架。 這意味着您編寫的應用程序將只執行一次全頁加載-之后的所有操作都是增量的。

老實說，我還沒有讀過該教程，盡管我在自己的服務器端應用程序中使用了express，但以前沒有看到過您所談論的目錄結構。 Express 不需要特定的目錄結構，因此我想這是本教程或其他“最佳實踐”類型的文章中的建議-您應該能夠將我的以下幾點納入該結構，但我不會解決直接。

這就是我的方法：

路由

正如您提到的，無論是開箱即用的東西（即將更新），還是使用出色的ui.router模塊，angular都可以很好地處理視圖路由。 還要記住，因為網頁僅加載一次 （ S PA），所以如果您使用相對URL或angular的$location服務鏈接到其他視圖，則您的應用實際上不會從服務器請求頁面。

這樣，如果返回完整的網頁，則它應該始終 （當然是一般化）為index.html 。 如果您在angular的$locationProvider上啟用HTML5模式，那么其余的一切都會神奇地完成。

但這種可能性很小， 你仍然需要表達路由太：你的應用程序將很可能使AJAX請求數據-創建和刪除它，以及緊接在讀取它。 這些路由將需要運行數據庫操作以及使它執行其工作的所有服務器端應用程序邏輯。

我區分應僅返回index.html的請求和應由express捕獲並處理的請求的方法是，將所有REST API樣式的數據事務放在/api/[route] 。

換句話說： myserver.com/about將返回index.html 。 然后，Angular加載並查看該URL，意識到它位於about路線中，並顯示適當的視圖。 相反，如果我請求myserver.com/api/users ，我的快遞服務器知道它不應該向我發送索引頁，並將查詢數據庫以獲取用戶列表並以JSON格式返回（當然，安全性首先適用） 。

但是，您還需要考慮靜態文件：

部分

局部/模板（構成您的角度路線視圖的html文件）與任何其他靜態文件一樣-角度合適的時候會請求它們，而您只需要提供它們即可。

Express有一個很棒的中間件，它叫做static -查找它。

為了進一步混淆，您可以將部分內容“編譯”為一個javascript文件，該文件將填充angular的$templateCache以便第一次加載視圖時更快。 如果您對此Google感興趣。

index.jade與index.html

首先，忘記玉石，只使用index.html。 在某些情況下，玉器對於服務器在不使用額外請求的情況下將應用程序狀態傳達給客戶端很有用，但它們不在此問題的范圍內。

如果您還是不懂，我建議您從頭開始創建一個非常簡單的應用程序（也許是經典的“ todo”應用程序），並通過示例進行操作！

希望這可以幫助。