Question

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

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

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？

路由/ 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并没有要求特定的目录结构，所以我想这是教程中的建议或其他一些最佳实践＆＃39;类型文章 - 您应该能够将我接下来的几点纳入该结构中，但我不会直接解决它。

所以这是我的方法：

路由

正如您所提到的，angular可以很好地处理视图路由，无论是开箱即用（很快就会更新），还是使用优秀的ui.router模块。另请记住，因为网页只加载一次（ S PA），如果您使用相对链接到其他视图，您的应用实际上不会从服务器请求页面网址或有角度的$location服务。

因此，如果返回完整的网页，始终（当然一般化）应为index.html。如果您在角度$locationProvider上启用HTML5模式，那么它将会神奇地完成其余工作。

但是很可能，你做仍然需要快速路由：你的应用很可能会对数据做出AJAX请求 - 创建和删除它以及只是获取数据。这些路由需要运行数据库操作和所有服务器端应用程序逻辑，使其能够执行它所做的工作。

我区分应该返回index.html的请求和应该通过express捕获和处理的请求的方式是将所有REST API样式数据事务放在/api/[route]下。

换句话说：myserver.com/about将返回index.html。 Angular然后加载并查看URL，在about路由中实现它，并显示相应的视图。相反，如果我请求myserver.com/api/users，我的快递服务器知道它不应该向我发送索引页面，并将在数据库中查询用户列表并以JSON格式返回它们（当然安全性首先适用）

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

局部模板

部分/模板（构成角度路径视图的html文件）就像任何其他静态文件一样 - 当时间正确时，angular会请求它们，你只需要提供它们。

Express有一个很棒的中间件，可以执行此操作static - 查找它。

为了进一步混淆事情，你可以＆＃34;编译＆＃34;您的部分成为填充角度$templateCache的javascript文件，因此第一次加载视图的速度更快。如果您对此谷歌感兴趣..

index.jade vs index.html

首先，忘记玉，然后使用index.html。在某些情况下，jade对服务器有用，可以在不使用额外请求的情况下将应用程序状态传递给客户端，但它们不在此问题的范围内。

如果您仍然不明白，我建议您从头开始创建一个非常简单的应用程序（可能是经典的角度＆＃34; todo＆＃34;应用程序），并以示例的方式进行处理！

希望这有帮助。

MEAN堆栈：我使用哪些文件？

1 个答案:

路由

局部模板

index.jade vs index.html