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”应用程序），并通过示例进行操作！

希望这可以帮助。