AngularJS 仅用于单页应用程序 (SPA) 吗?

IT技术 javascript node.js angularjs
2021-03-04 15:55:16

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

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

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

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


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

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

2016 年 6 月 18 日更新该项目从悬崖上掉下来,所以我们从来没有做过多的事情。我们最近再次使用它,但不再使用 angular,而是使用 React。我们仍在使用上一次更新中概述的架构,其中我们使用 express 和自包含应用程序,因此例如,我们/chat在 express 中有一个路由提供我们的 React 聊天应用程序,我们有另一个路由/projects提供了项目应用程序和很快。我们看待它的方式是每个应用程序在其功能集方面都是一个聚合根,它需要能够独立才能被视为应用程序本身。从技术上讲,所有信息都在那里,它只是基本的表达以及您想要使用的客户端应用程序构建优点的任何风格。

5个回答

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

您有很多功能可以在客户端路由之外使您受益:

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

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

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

@Blesh,抱歉回来晚了。我们已经有一个使用 Restify 构建的 REST/Hypermedia API,我想我们需要找到一种巧妙的方法来以某种方式将创建的单独“应用程序”链接在一起,我们将对此进行研究并可能在某个时候更新问题。
2021-04-24 15:55:16
另一点要提到的是,Angular 甚至不需要用于完整页面——它可以集成到现有系统中以构建组件,即遗留应用程序中的复杂小部件或插件。
2021-05-01 15:55:16
Angular with Express 几乎是理想的!使用 Express 创建可以从 Angular 应用程序使用的 RESTful API 真的非常容易。Google NodeJS Express RESTful API 和 Angular 的 $resource 和 $http 服务。之后,只需开始原型设计并使用它即可。我想你可能会发现,一旦你看到他们合作得有多好,你就对“如何”想得太多/担心太多了。
2021-05-02 15:55:16
@Blesh,感谢您的回答,这是有道理的,但我们正在努力寻找的是我们使用它构建多页应用程序的“方式”,这就是发布该问题的原因,这确实是一个不同的问题,因此您的答案是接受但例如我们可以将 angular.js 与 express.js 一起使用,或者类似的东西只是浪费时间和过于复杂。
2021-05-06 15:55:16
@Modika 您是否能够找到任何好的资源,或者对多页应用程序有什么好的见解?
2021-05-12 15:55:16

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

也许我的经验会对某人有用。我们按逻辑拆分我们的项目。一个 SPA 我们用于提要,另一个用于处理地图,另一个用于编辑用户配置文件等。例如,我们有三个应用程序:提要、用户和地图。我在分离的 url 中使用它,如下所示:

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

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

事实上,你可以很容易地混合 SPA 应用程序,例如提要将是带有 angularjs 应用程序的 url,带有 reactjs 的用户应用程序和映射到backbone.js 应用程序。

针对你的问题:

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

我也支持这个想法:

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

如果您只需要几页带有客户端数据绑定的页面,我会选择 Knockout 和 Javascript Namespacing。

Knockout 很棒,特别是如果您需要简单的向后兼容性并且有相当直接的页面。如果您使用的是 3rd 方组件,则 Knockout 的自定义绑定非常简单且易于使用。

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

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

并在加载其他脚本后的脚本标记中

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

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

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

如果你只是想开发一个 SPA,我会说 Angular 是矫枉过正的。当然,如果您已经习惯于使用它进行开发,请继续。但是,如果您不熟悉该框架并且只需要开发一个 SPA,我会选择一些更简单的东西,但它有许多自己的好处。我建议查看Vue.jsAurelia.io

Vue.js采用双向数据绑定、MVVM、组件可用、上手简单快捷、编写代码少等优点,结合了Angular 和React 的一些优点。

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

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