AngularJS是否仅用于单页应用程序（SPA）？

201

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

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

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

这可能是一个相当明显的问题，但是我们似乎无法破译AngularJS是纯粹用于单页应用程序还是可以用于多页应用程序（例如Express）。

2013年7月17日更新 为了让大家保持联系，我将在整个过程中更新这个问题。现在，我们将一起构建所有内容，然后我们将看到效果如何。我们已经联系了几位比我们更胜任AngularJS的人员，并提出了有关拆分共享上下文但在单个页面上可能太大的大型应用程序的问题。

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

2016年6月18日更新项目跌入悬崖，所以我们从来没有回避太多的事情。我们最近再次选择了它，但是不再使用angular而是使用React。我们仍在使用上一个更新中概述的架构，其中我们使用Express和自包含应用程序，因此，例如，我们有/chat一条Express路线为我们的React聊天应用程序/projects提供服务，另一条路线为Projects应用程序提供了服务，并且以此类推。从某种程度上来说，我们看待它的方式是每个应用程序都是其功能集的总根，它必须能够独立运行，才能将其本身视为一个应用程序。从技术上讲，所有信息都在那里，它只是基本表达，以及您想要使用的客户端应用程序构建优势的任何形式。

javascript node.js angularjs

— 莫迪卡
source

5

那怎么样了？我正在尝试弄清楚如何将一个50页以上的ASP.NET应用程序移动到纯HTML + Javascript + REST应用程序中，但我真的不知道如何将其用作SPA。

— 格雷格，

1

我们不得不转向其他东西。从我们已经讨论过的以及将要再次讨论的讨论中可以看到，SPA可以成为一台更大机器中非常集中的齿轮。因此，如果您想保留在熟悉的堆栈（.Net）中，可以将我们的实例转换为您的实例（我们在Express中使用纯节点），则可以使用MVC作为支架，并在视图中使用angular添加动态内容（每个功能）。除非您可以压缩应用程序，否则在单个页面中实现50页的逻辑可能会令人窒息。

— 莫迪卡

1

这样做是使每个部分（即用户，新闻，产品等）本身都成为SPA，但是它们共同构成了您的应用。

— 莫迪卡

1

太好了谢谢。是否需要执行特定的编码才能将不同的SPA绑定在一起？还是只是常规链接？

— 格雷格，

1

@Greg，从目前为止的有限知识来看，因为它们本质上是按照自己正确的标准链接进行的应用程序，显然，这可能不会很简单，因为它将需要某种形式的持久性（cookie，本地存储）如果应用程序以某种形式的登录背后，则可能共享信息，例如可能和身份或个人资料。我们的应用程序将紧密链接到我们的API，并且当我们构建受信任的应用程序时，我们正在使用oauth来保护每个请求，我认为Trello做了类似的事情，但是我可能是错的。

— Modika

216

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

您将拥有大量的功能，这些功能将使您受益于客户端路由之外的其他功能：

双向绑定
模板化
货币格式
多元化
可重用控件
RESTful API处理
AJAX处理
模块化
依赖注入

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

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

— 本·莱什
source

42

值得一提的是，Angular甚至不需要用于整页-它可以集成到现有系统中以构建组件，例如，遗留应用程序中的复杂小部件或插件。

— Alex Osborn

2

@Blesh，谢谢您的回答，这很有意义，但是我们正在努力寻找的是我们“如何”使用它来构建多页应用程序，这就是为什么要发布该问题，这的确是一个不同的问题，所以您的答案一直是可以接受，但是例如我们可以将angular.js与express.js一起使用还是类似的事情，既浪费时间又过于复杂。

— 莫迪卡

与Express角近乎理想！使用Express创建RESTful API非常简单，您可以从Angular应用程序中使用它。Google NodeJS Express RESTful API和Angular的$ resource和$ http服务。之后，只需开始制作原型并开始使用它。我想您可能会发现，一旦看到它们如何很好地协同工作，您就会对“ HOW”有太多的想法/担心。

— Ben Lesh 2013年

@Blesh，很抱歉迟到。我们已经有一个使用Restify构建的REST / Hypermedia API，我想我们需要找到一种巧妙的方法来以某种方式将创建的单独“应用程序”链接在一起，将对此进行研究并可能在某个时候更新问题。

— 莫迪卡

@Modika是否可以找到任何有用的资源，或者对多页面应用程序有任何深刻的见解？

— dre

16

一开始，我也对Angular的“方式”感到困惑。然后有一天我突然意识到：“这仍然是javascript”。关于Angular的来龙去脉有很多示例（我最喜欢的示例之一，还有书https://github.com/angular-app/angular-app）。要记住的最大事情是像在任何其他项目中一样加载js文件。您要做的就是确保不同的页面引用正确的Angular对象（控制器，视图等），并且您已启动并正在运行。我希望这是有道理的，但是答案是如此简单，以至于我忽略了它。

— 罗恩
source

6

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

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

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

确实，您可以非常轻松地混合使用SPA应用程序，例如，供稿将使用angularjs应用程序作为url，将用户应用程序与reactjs结合使用，并映射到ribs.js应用程序。

针对您的问题：

Angular不仅适用于SPA，而且Angular对于SPA应用程序起着良好而快速的作用，但没有人愿意为各种SPA应用程序构建MPA应用程序。但是考虑您的url架构时，请不要忘记应用程序的SEO可用性。

我也支持这个想法：

项目和应用之间有什么区别？应用程序是执行某项操作的Web应用程序，例如Weblog系统，公共记录数据库或简单的民意调查应用程序。项目是特定网站的配置和应用程序的集合。一个项目可以包含多个应用程序。一个应用程序可以在多个项目中。

— 西奥多
source

3

如果您只需要几个带有客户端数据绑定的页面，那么我将使用Knockout和Javascript Namespacing。

淘汰赛很棒，特别是如果您需要简单的向后兼容性并具有相当简单的页面。如果您使用的是第三方组件，则Knockout的自定义绑定非常简单易用。

Javascript命名空间可让您保持代码分离和可管理。

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

并在加载其他脚本后在脚本标签中

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

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

客户端代码可以根据需要简单或复杂。我试图用现有的专有框架将Angular集成到一个非常复杂的站点中，这是一场噩梦。如果您刚开始学习，Angular很棒，但是它具有学习曲线，使您陷入非常紧张的工作流程。如果您不遵循它，那么您的代码可能会很快陷入混乱。

— 弗雷德
source

1

如果您只是想开发SPA，我会说Angular实在是太过分了。当然，如果您已经习惯了使用它进行开发，请继续。但是，如果您是该框架的新手，并且只需要开发SPA，那么我会考虑一些更简单的方法，并附带一些好处。我建议研究Vue.js或Aurelia.io。

Vue.js使用双向数据绑定，MVVM，可重用组件，简单快捷的提取，更少的代码编写等。它结合了Angular和React的一些最佳功能。

老实说，我对Aurelia.io并不了解。但是我偷看了一下，似乎有一个值得研究的替代方法，类似于上面的方法。

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

— 菲利普
source