使用 Angular 和 Express 分离关注点的最佳实践是什么？答案

【问题标题】：What are the best practices for separating concerns with Angular and Express?使用 Angular 和 Express 分离关注点的最佳实践是什么？
【发布时间】：2014-07-05 09:58:38
【问题描述】：

我觉得 Express' 和任何 MEAN 堆栈教程都掩盖了这一点，所以我决定在这里提问。

另请参阅这些类似的 SO 帖子：
Why would one want to use Express instead of AngularJS?
Angular and Express routing

在 Express 中使用带有 Angular 指令/属性的纯 HTML 作为视图引擎，关于路由在单个布局模板中呈现页面部分的最佳实践是什么？

您如何使用 HTML/Angular 作为您的视图引擎来做到这一点？在 Jade 中，您可以执行 block content 之类的操作。

您是否使用 Angular 路由器 ng-view 并使用指令？如果是这样，Express 的意义何在？只是一个服务器？为什么不直接使用 Connect？

附注如果您想了解 Jade 或 EJS，我只是在学习 Express 和 Angular，所以我试图将语言抽象化到最低限度。

我想我的困惑源于 Express 和 Angular 在模板和路由方面的重叠，但 Express 专注于服务器端，而 Angular 则是客户端。对于刚刚学习这些的人来说，当一切都如此开放时，很难知道如何实施。

我正在寻找详细的、具体的实现代码示例，这些示例在关注点分离方面使用了最佳做法。看到它并在上下文中解释它是我向他人学习的最佳方式。

【问题讨论】：

标签： angularjs express mean-stack

【解决方案1】：

如果您想要玉石块，请查看 angular-blocks：

https://github.com/wmluke/angular-blocks

【讨论】：

没那么多找块。我更多的是寻找单页布局标记，根据路线动态加载部分。你可以只使用带有路由和 ng-view 的 Angular 来做到这一点，但 Express 似乎毫无意义。

【解决方案2】：

了解 Angular 和 YOUR_SERVER 通常是不相关的，这一点很重要。这是“我的文件去哪里”的问题。正如单页应用程序所暗示的那样，它是一条静态路由。我确信 Connect 可以很好地处理这个问题，但是你的应用程序的服务器部分可能比简单地提供静态页面有更多的问题。身份验证、业务逻辑、API 路由和其他问题有时会涉及到，因此 Express（及其生态系统）很有意义。

您的单页应用程序肯定会有自己的路由。这些与您的服务器路由无关，其中将包括到 Angular 应用程序页面的静态路由，以及 Angular 应用程序将进行的 API 调用的任何路由。

了解您正在编写两个不同且独立的应用程序并通过 API 连接，这一点很重要。您的 Node 服务器提供静态 HTML 和 JS 的事实在很大程度上是巧合。 Angular 应用程序应该以一种孤立的、解耦的方式来考虑和开发，以获得最佳结果。

【讨论】：

各方面都很好，但您能否更具体地提供实施指南？

【解决方案3】：

Express 和 Angular 的用途完全不同。

在大多数类似 MEAN 的 stac 情况下（例如只是 express-angular），express 充当服务器 PLUS API 提供者。

您将 app.get('/') 与任何 服务器端 模板一起使用，例如玉（只是为了拥有更干净的 html 文件...），然后您使用 app.get('/partial/ :name') 以使用相同的模板语言处理所有部分。

然后，您使用 app.get('/api/anyapi1'), app.get('/api/anyapi2') 将整个 api 提供给 angular - 不管它是什么 - 一些 mongo 或 postgres 处理，或者只是你的静态 json 文件。

在新的 express4 中你也可以创建专用的 api 路由：

var api = express.Router();

api.get('/somget', function(req, res) {
    res.send('some json');
});

// init api route. all api routes will begin with /api 
//(like above api.get will be at /api/somget)
app.use('/api', api);

您还可以在 express 端处理会话和授权，以及大量不应该或不能在客户端完成的事情。

希望对您有所帮助。

编辑：简短地说：express 是带有 http 服务器、其他服务和 api 的后端，而 angular 是整个前端，它消耗后端提供的东西。

有了这样的分离，你甚至可以将那个后端 api 提供给其他人，或者在它之上构建不同的服务。

【讨论】：

【解决方案4】：

正确，MEAN 堆栈强调将大部分逻辑放在前端。您的快速服务器将充当骡子，根据您从前端发出的获取和发布请求来保存、读取、验证和删除数据。

我们的想法是将所有前端代码放在 express 应用的公共文件夹中。

     `app.use(express.static(__dirname + '/public'));`

然后简单地创建一个渲染索引文件的路由

     `app.get('/',function(req,res){
            res.render('index')
       })`

考虑到这一点，您可能想知道是否有一种解决方案可以为您生成 api，以便您只需为模型命名，其余部分通过 angularjs 服务完成。有..http://loopback.io/ 只需命名您的模型、关系和限制。它将生成一个企业级 api 供您使用。

有关如何完成路由以及如何为您的应用建模的完整工作示例，请查看本教程：http://www.ibm.com/developerworks/library/wa-nodejs-polling-app/

【讨论】：

如果我只是提供静态文件，包括 Angular 模板，那么 Express 的价值是什么？
路由、会话控制和数据访问方面的灵活性，可通过 REST 在所有平台上使用。