平均堆栈：我使用哪些文件？

Question

TLDR； tutorial 建议将文件夹 bin、views、routes 全部删除，我想知道这是否是使用 MEAN 堆栈时的惯例。

我是 MEAN 堆栈的新手，我对服务器和客户端之间的冲突感到困惑。更具体地说，我不确定应该用 Angular 个文件替换 Express 中的哪些文件。

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

这是我的具体问题：

我是完全使用 views/index.jade 还是必须创建 public/views/index.html？如果我认为第一个是服务器端 html 渲染而后者是客户端 html 渲染，我是对的吗？
路由有什么用？ routes/index.js 是 Express 提供的路由文件，但 Angular 也没有提供 $routeProvider?

routes/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 一起工作。先感谢您。这 question 也解释了为什么我对堆栈感到困惑，但我试图在这个问题中更好地说明我的困惑。

Answer 1

Angular 是一个主要用于构建单页 Web 应用程序 (SPA) 的框架。这意味着您编写的应用程序只会执行一次完整页面加载 - 此后的所有内容都是增量的。

老实说，我还没有读过那个教程，尽管我自己的服务器端应用程序使用了 express，但还没有看到你之前谈论的目录结构。 Express 不要求特定的目录结构，所以我想这是教程或其他 'best practice' 类型文章的建议 - 你应该能够合并我的下一对该结构的要点，但我不会直接解决它。

所以这是我的方法：

路由

正如您提到的，angular 可以很好地处理视图路由，无论是使用开箱即用的东西（即将更新），还是使用优秀的 ui.router 模块。还要记住，因为网页只加载一次 (SPA)，如果你 link 使用相对 URL 或 angular 的 $location 服务访问其他视图。

因此，如果 return 一个完整的网页，它应该总是（当然是概括）index.html。如果您在 angular 的 $locationProvider 上启用 HTML5 模式，那么它将神奇地完成剩下的工作。

但很有可能，您仍然需要快速路由：您的应用很可能会 AJAX 请求数据 - 创建和删除数据以及只是拿它。这些路由将需要运行数据库操作和所有服务器端应用程序逻辑，使它能够完成它所做的事情。

我区分应该 return index.html 的请求和应该通过 express 捕获和处理的请求的方法是将所有 REST API 样式数据放入/api/[route] 下的交易。

换句话说：myserver.com/about将returnindex.html。 Angular 然后加载并查看 URL，意识到它在 about 路由中，并显示适当的视图。相反，如果我请求 myserver.com/api/users，我的 express 服务器知道它不应该向我发送索引页面，并将查询数据库以获取用户列表和 return 他们的 JSON 格式（当然安全第一。

但是，您还需要考虑静态文件：

部分

Partials/templates（构成您对 angular 路线的视图的 html 文件）就像任何其他静态文件一样 - angular 会在需要时请求它们是的，你只需要为他们服务。

Express 有一个很棒的中间件，叫做 static - 查一下。

为了进一步混淆事情，您可以 "compile" 将您的部分放入填充 angular 的 $templateCache 的 javascript 文件中，以便更快地加载第一个视图时间。如果你对此感兴趣 google 它..

index.jade 对比 index.html

首先，忘掉翡翠，只用 index.html。在某些情况下，jade 可用于服务器在不使用额外请求的情况下将应用程序状态传达给客户端，但它们不在本问题的范围内。

如果您还是不明白，我建议您从头开始创建一个非常简单的应用程序（也许是经典的 angular "todo" 应用程序）并通过示例来解决！

希望对您有所帮助。

平均堆栈：我使用哪些文件？

MEAN stack: which files do I use?

javascript

angularjs

node.js

express

路由

部分

index.jade 对比 index.html