AngularJS 是否仅适用于单页应用程序 (SPA)？答案

【问题标题】：Is AngularJS just for single-page applications (SPAs)?AngularJS 是否仅适用于单页应用程序 (SPA)？
【发布时间】：2013-02-20 07:03:08
【问题描述】：

我们正在寻找构建我们正在创建的应用程序前端的选项，并正在尝试评估一种对我们有用并为我们提供前进的最佳平台的工具。

这是一个Node.js 项目。我们最初的计划是使用 Express 并沿着这条路线走下去，但我们决定在我们开始这个阶段之前，最好先回顾一下那里有什么。我们的应用程序有几个我们认为不适合单页模型的区域，因为它们从应用程序的角度来看是相关的，但从视图的角度来看却不是。

我们已经看到了一些可以用来构建客户端的框架，例如 Backbone.js、Meteor 等，还有 AngularJS。

这可能是一个相当明显的问题，但我们似乎无法解读 AngularJS 是纯粹用于单页应用程序还是可以用于像 Express 这样的多页应用程序。

2013 年 7 月 17 日更新 只是为了让人们了解这一点，我将在我们完成整个过程时更新这个问题。我们现在将一起构建所有东西，我们将看到它的表现如何。我们已经联系了一些比我们更有资格使用 AngularJS 的人，并提出了有关拆分共享上下文的大型应用程序的问题，但在单个页面上工作可能太大了。

共识是我们可以提供多个静态页面并创建仅与这些页面一起使用的 AngularJS 应用程序，有效地创建 SPA 集合并使用标准链接将这些应用程序链接在一起。现在我们的用例非常具体，因为我们的解决方案有多个应用程序，正如我所说，我们将首先尝试单一代码库并从那里进行优化。

2016 年 6 月 18 日更新该项目一落千丈，所以我们从来没有完成太多工作。我们最近再次选择了它，但不再使用 angular，而是使用 React。我们仍在使用上一次更新中概述的架构，我们使用 express 和 self contains 应用程序，例如，我们在 express 中有一个 /chat 路由来服务我们的 React 聊天应用程序，我们还有另一个路由 /projects提供项目应用程序等。我们有点看它的方式是，每个应用程序在其功能集方面都是一个聚合根，它需要能够独立才能被视为一个应用程序本身。从技术上讲，所有信息都在那里，它只是基本的表达方式以及您想要使用的客户端应用程序构建的任何风格。

【问题讨论】：

怎么样？我正在尝试弄清楚如何将 50 多页的 ASP.NET 应用程序移动到纯 HTML + Javascript + REST 应用程序，但我真的不明白这将如何作为 SPA 工作。
我们不得不转向其他事情。从我们已经和将再次开始的讨论来看，SPA 可以成为更大机器中的一个非常集中的齿轮。因此，如果您想保留在熟悉的堆栈（.Net）中，将我们的实例转换为您的实例（我们使用带有 express 的纯节点），您可以使用 MVC 作为您的脚手架并在视图中使用角度来添加动态内容（每个功能） .除非你可以将你的应用程序压缩，否则将 50 页逻辑实现到一个页面中可能会令人窒息。
这样做是为了让每个部分（即用户、新闻、产品等）本身成为一个 SPA，但它们共同构成了您的应用程序。
太好了，谢谢。是否需要进行任何特定的编码才能将不同的 SPA 绑定在一起？还是只是常规链接？
@Greg，就我们目前的有限知识而言，因为它们本质上是应用程序本身，标准链接可以工作，显然它可能不会是直截了当的，因为它和某种形式的持久性（cookie，如果应用程序支持某种形式的登录，则需要本地存储来保存共享信息，例如身份或个人资料。我们的应用程序将与我们的 API 紧密链接，并且在构建受信任的应用程序时，我们使用 oauth 来保护每个请求，我认为 Trello 会做类似的事情，但我可能是错的。

标签： javascript node.js angularjs

【解决方案1】：

一点也不。您可以使用 Angular 构建各种应用程序。客户端路由只是其中的一小部分。

除了客户端路由之外，您还有很多可以让您受益的功能：

双向绑定
模板化
货币格式
复数化
可重复使用的控件
RESTful api 处理
AJAX 处理
模块化
依赖注入

认为所有这些“只能在单页应用程序中使用”真是太疯狂了。当然不是……这就像说“Jquery 仅适用于带有动画的项目”。

如果它适合您的项目，请使用它。

【讨论】：

另外一点要提的是，Angular 甚至不需要用于整页——它可以集成到现有系统中以构建组件，即遗留应用程序中的复杂小部件或插件。
@Blesh，谢谢你的回答，这是有道理的，但我们正在努力寻找的是“如何”我们使用它来构建多页应用程序，这就是发布问题的原因，这确实是一个不同的问题，因此您的答案已被接受，但例如我们可以将 angular.js 与 express.js 一起使用，或者类似的东西只是浪费时间和过于复杂。
Angular with Express 几乎是理想的！使用 Express 创建一个 RESTful API 真的非常容易，你可以从你的 Angular 应用程序中使用它。 Google NodeJS Express RESTful API 和 Angular 的 $resource 和 $http 服务。之后，只需开始制作原型并使用它。我想你可能会发现，一旦你看到它们如何很好地协同工作，你就会过度思考/担心“如何”。
@Blesh，抱歉回来晚了。我们已经有一个使用 Restify 构建的 REST/超媒体 API，我想我们需要找到一种巧妙的方法来以某种方式将创建的单独“应用程序”链接在一起，将对此进行调查并可能在某个时候更新问题。
@Modika 你能找到任何好的资源，或者对多页应用有什么好的见解吗？

【解决方案2】：

一开始我也为 Angular 的“如何”而苦苦挣扎。然后有一天我突然意识到：“它仍然是 javascript”。有很多关于 Angular 的来龙去脉的例子（我最喜欢的一本和书 https://github.com/angular-app/angular-app 一起）。要记住的最重要的事情是像在任何其他项目中一样加载 js 文件。您所要做的就是确保不同的页面引用正确的 Angular 对象（控制器、视图等），然后您就可以开始运行了。我希望这是有道理的，但答案太简单了，我忽略了它。

【讨论】：

【解决方案3】：

也许我的经验对某人有用。我们在逻辑上拆分我们的项目。我们将一个 SPA 用于提要，另一个用于处理地图，另一个用于编辑用户资料等。例如，我们有三个应用程序：提要、用户和地图。我在分隔的 url 中使用它，如下所示：

https://host/feed/#/top/
https://host/user/#/edit/1/
https://host/map/favorites/#/add/

每个应用程序在应用程序的状态之间都有自己的本地路由映射。我认为这是一个很好的做法，因为每个应用程序只使用它自己的上下文并加载它真正需要的依赖项。此外，它对于调试和集成过程非常有用。

确实，您可以非常轻松地混合使用 SPA 应用程序，例如，提要将是带有 angularjs 应用程序的 url，带有 reactjs 的用户应用程序并映射到主干.js 应用程序。

回答您的问题：

Angular 不仅仅适用于 SPA，Angular 对 SPA 应用的表现又好又快，但没有人费心去构建各种 SPA 应用的 MPA 应用。但是考虑到您的 url 架构，不要忘记您的应用程序的 SEO 可用性。

我也支持这个想法：

项目和应用程序有什么区别？应用程序是 Web 做某事的应用程序——例如，一个Weblog系统，一个数据库公共记录或简单的投票应用程序。一个项目是一个集合特定网站的配置和应用程序。一个项目可以包含多个应用程序。一个应用可以在多个项目中。

【讨论】：

【解决方案4】：

如果您只需要一些带有客户端数据绑定的页面，我会选择 Knockout 和 Javascript 命名空间。

Knockout 非常棒，尤其是当您需要简单的向后兼容性并拥有相当直接的页面时。如果您使用的是 3rd 方组件，Knockout 的自定义绑定非常简单易用。

Javascript 命名空间允许您将代码分开且易于管理。

var myCo = myCo || {};
myCo.page = {
    init: function(){ ... },
    ...
}

在你的其他脚本加载后的脚本标签中

<script>
    myCo.init();
</script>

关键是，您可以在需要时使用任何您想要的工具。需要数据绑定？淘汰赛（或任何你喜欢的）。需要路由吗？ sammy.js（或任何你喜欢的）。

客户端代码可以根据您的需要简单或复杂。我尝试使用现有的专有框架将 Angular 集成到一个非常复杂的站点中，这是一场噩梦。如果您刚开始，Angular 很棒，但它有一个学习曲线，并且将您锁定在一个非常紧凑的工作流程中。如果您不遵循它，您的代码可能会很快变得非常纠结。

【讨论】：

【解决方案5】：

如果您只是想开发一个 SPA，我会说 Angular 是矫枉过正。当然，如果您已经习惯于使用它进行开发，请继续。但是，如果您是该框架的新手，并且只需要开发一个 SPA，那么我会选择更简单的东西，并且有很多自己的好处。我建议查看 Vue.js 或 Aurelia.io。

Vue.js 使用双向数据绑定、MVVM、可重用组件、简单快速上手、更少代码编写等。它结合了 Angular 和 React 的一些最佳特性。

Aurelia.io，老实说，我不太了解。但我已经四处看了看，这似乎是一个值得研究的替代方案，类似于上面的。

链接：
https://vuejs.org/
http://aurelia.io/

【讨论】：