node.js AngularJS 仅适用于单页应用程序 (SPA) 吗？

Is AngularJS just for single-page applications (SPAs)?

提问by Modika

We are looking at options to build the front end of an application we are creating and are trying to evaluate a tool that will work for us and give us the best platform to move forward.

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

This is a Node.jsproject. Our initial plan was to use Express and go down that route, but we decided that before we kick off this stage it might be best to review what is out there. Our application has several areas which we don't believe fit the single-page model in that they are related from an application perspective, but not from a view one.

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

We have seen a few of the frameworks we could use to build out the client like Backbone.js, Meteor, etc. and also AngularJS.

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

This may be a fairly obvious question, but we cannot seem to decipher if AngularJS is purely for single-page application or it can be used for multi-page applications like Express for instance.

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

---

---

UPDATE 17 July 2013Just to keep people in the loop, I will be updating this question as we go through the process. We are going to build everything together for now, and we will see how well that performs. We have reached out to a few people who are more qualified with AngularJS than us and posed the question regarding splitting up larger applications that share context, but may be too large working on a single page.

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

The consensus was that we could serve multiple static pages and create AngularJS applications that work with only those pages, effectively creating a collection of SPA and linking those applications together using standard linking. Now our use case is very specific as our solution has several applications, and as I said we are going to try the single code base first and optimise from there.

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

UPDATE 18 June 2016The project fell of a cliff, so we never got round to getting too much done. We have picked it up again recently, but are no longer using angular and are using React instead. We are still using the architecture outlined in the previous update, where we use express and self contain apps, so for example, we have a /chatroute in express that serves up our React chat app, we have another route /projectsthat serves up the projects app and so on. The way we are kinda looking at it is each app is an aggregate root in terms of its feature set, it needs to be able to standalone for it to be considered an app in itself. Technically, all the information is out there, its just basic express and whatever flavour of client side app building goodness you want to use.

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

回答by Ben Lesh

Not at all. You can use Angular to build a variety of apps. Client-side routing is just a small piece of that.

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

You have a large list of features that will benefit you outside of client-side routing:

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

• two-way binding
• templating
• currency formatting
• pluralization
• reusable controls
• RESTful api handling
• AJAX handling
• modularization
• dependency injection

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

It's crazy to think that all of that "could only be used in a single page app". Of course not.. that's like saying "Jquery is only for projects with animations".

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

If it fits your project, use it.

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

回答by Ron

I struggled with the "how" at first with Angular as well. Then one day it dawned on me: "It is STILL javascript". There are a bunch of examples on the ins-and-outs of Angular (one of my favorites along with the book https://github.com/angular-app/angular-app). The biggest thing to remember is to load in the js files just like you would in any other project. All you have to do is make sure the different pages reference the correct Angular object (controller, view, etc.) and you are off and running. I hope this makes sense, but the answer was so simple I overlooked it.

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

回答by theodor

Maybe my experience will be useful to someone. We split our project logically. One SPA we use for feed, another one to work with the map, another one for editing a user profile and etc. For example we have three apps: feed, user and map. I use it in the separated urls, like this:

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

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

Each of these applications has it's own local routing mappings between states in the application. I think it is a good practice because each application work only with its own context and load dependencies that it really need. Also, it's practice very good for debug and integration processes.

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

Indeed, you can very easily make a mix of SPA apps, for example the feed will be url with the angularjs application, the user app with the reactjs and map to the backbone.js application.

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

In response to your question:

针对你的问题：

Angular not just for SPAs, Angular play good and fast for SPA applications, but no one bothers to build MPA application of a variety of SPA applications. But thinking about your url architecture don`t forget about SEO availability of your applications.

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

I also support the idea:

我也支持这个想法：

What's the difference between a project and an app? An app is a Web application that does something – e.g., a Weblog system, a database of public records or a simple poll app. A project is a collection of configuration and apps for a particular website. A project can contain multiple apps. An app can be in multiple projects.

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

回答by Fred

If all you need is a few pages with client databinding, I'd go with Knockout and Javascript Namespacing.

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

Knockout is great, especially if you need uncomplicated backward compatibility and have fairly straight forward pages. If you're using 3rd party components, Knockout's custom bindings are straightforward and easy to work with.

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

Javascript namespacing allows you to keep your code separate and manageable.

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

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

And in a script tag after your other scripts are loaded

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

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

The key is, you use whatever tool you want for when you need it. Need databinding? Knockout (or whatever you like). Need routing? sammy.js (or whatever you like).

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

Client code can be as simple or complicated as you want it. I tried integrating Angular into a very complicated site with an existing proprietary framework, and it was a nightmare. Angular is great if you're starting fresh, but it has a learning curve and locks you into a very tight workflow. If you don't follow it, your code can get really tangled really fast.

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

回答by Filipb

I'd say Angular is overkill if you're just looking to develop a SPA. Sure, if you're already comfortable developing with it, go ahead. But if you're new to the framework and only need to develop a SPA, I'd go with something more simple with a number of its own perks. I recommend looking into Vue.jsor Aurelia.io.

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

Vue.jsuses two-way data binding, MVVM, reusable components, simple and quick to pickup, less code to write, etc. It combines some of the best features of Angular and React.

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

Aurelia.io, in all honesty, I don't know much about. But I've peeked around and it seems an alternative worth looking into, similar to the above.

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

Links:
https://vuejs.org/
http://aurelia.io/

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