Javascript 我是否需要 node.js 才能使用 Angularjs？

Do I need node.js to use Angularjs?

提问by Manikandan Arunachalam

I would like to use angular.jsfor my Image Editing Tool in my website. Do I need node.jsalso?

我想angular.js在我的网站中使用我的图像编辑工具。我node.js也需要吗？

I don't understand the scenario. If I don't need it, then when do we use both nodejs and angularjs together?

看不懂剧情。如果我不需要它，那么我们什么时候同时使用 nodejs 和 angularjs？

采纳答案by Catalin MUNTEANU

You don't need NodeJS for creating a client side image editing tool.

您不需要 NodeJS 来创建客户端图像编辑工具。

AngularJS is a web application framework, maintained by Google and the community, that assists with creating single-page applications, which consist of one HTML page with CSS and JavaScript on the client side.

AngularJS 是一种 Web 应用程序框架，由 Google 和社区维护，可帮助创建单页应用程序，该应用程序由一个 HTML 页面以及客户端的 CSS 和 JavaScript 组成。

But if someday you will want to upload and store those images on a server and make them accessible by multiple clients - then yes you will also need a server. This server could be made with NodeJS.

但是，如果有一天您想将这些图像上传并存储在服务器上并使多个客户端可以访问它们 - 那么是的，您还需要一个服务器。这个服务器可以用 NodeJS 制作。

回答by windsinger

I feel your pain.

我感觉到你的痛苦。

For someone new to Angular 2 development, I can feel the pain of having to learn server side technologiesfor something that is essentially a client side technology. From what I understand:

对于刚接触 Angular 2 开发的人来说，我能感受到必须为本质上是客户端技术的东西学习服务器端技术的痛苦。据我了解：

1. node.jsis only used to manage the dependencies of an angular 2 application. If you can somehow manage to get those dependencies without using node.js, npmor jspmthen you can run and develop your application offline. However, doing it manually will take an inexorable amount of time since you have to download files manually which may have other dependencies which will require other files to be downloaded again (yes I've been there). node.jsor npmor jspmfor that matter automates this process as well as taking all the necessary steps of configuring the files (jspm) so that whenever you use a particular dependency in your application, that particular dependency's other dependency will also be present in your system.
2. Some browsers, particularly Google Chrome restricts files loaded locally for security purposes so that certain HTML 5 technologies used by Angular 2 will produce an error when loaded using the file: protocol. So you need a server from which you can serve your application so that all the available HTML 5 technologies is available for Angular 2 to run.
3. node.jsis also needed for the hot-module-reloadcapability for rapid application development since it provides a file watcher apito detect changes to source code.

1. node.js仅用于管理 angular 2 应用程序的依赖项。如果你能以某种方式设法让那些依赖不使用node.js，npm或jspm则你可以运行你的应用程序脱机发展。但是，手动执行此操作将花费大量时间，因为您必须手动下载文件，这些文件可能具有其他依赖项，需要再次下载其他文件（是的，我去过那里）。node.js或npm或jspm为此事自动执行此过程以及采取配置文件的所有必要的步骤（jspm），这样无论你使用一个特定的依赖在你的应用程序，该特定依赖的其它依赖也将出现在您的系统。
2. 某些浏览器，尤其是 Google Chrome 出于安全目的限制本地加载的文件，以便 Angular 2 使用的某些 HTML 5 技术在使用 file: 协议加载时会产生错误。因此，您需要一个服务器来为您的应用程序提供服务，以便 Angular 2 可以运行所有可用的 HTML 5 技术。
3. node.js还需要hot-module-reload快速应用程序开发的能力，因为它提供了file watcher api检测源代码更改的能力。

But there is a way to develop Angular 2 application offline without node.js.

但是有一种方法可以在没有 node.js 的情况下离线开发 Angular 2 应用程序。

1. Remember when I said that if you can manage to get all the required dependencies, you can run and develop your application offline? If you can somehow find or create a package that has all the required dependencies your application will need, then you do not need npm or jspm to manage the dependencies for you.
2. For the file-access-restrictionproblem, you can load your project as an extension. Extensions have the ability to use all the available HTML 5 technologies as well as some powerful api's (not available even to applications served on a server), while at the same time being local to your development environment. So you do not need to fire a web server to access HTML 5 technologies if you serve your application as an extension.
3. For the hot-module-reloadcapability, you can approach it from the other way. Instead of having a file watcher in the web server to monitor changes to files in the local system, you can do it from the application itself. Since the application can fetchor xmlhttprequestresources that are needed by the application, you can periodically fetchor xmlhttprequestthe resources your application needs and compare it to some cache. But how do you know which files to check? You can look for linkswithin the page, script, of img.If you use SystemJS as the module loader, then you can use its registry to look for the files needed by your application but not loaded in the page, since it has been transpiled or something. While doing all this can be a performance drain to your system along with the added overhead of transpiling or preprocessing non-native code, this job can be outsourced to a web workerwhich will free up the main execution thread in the system for your application code.

1. 还记得我说过如果您能够获得所有必需的依赖项，您就可以离线运行和开发您的应用程序吗？如果您能以某种方式找到或创建一个包含您的应用程序所需的所有必需依赖项的包，那么您就不需要 npm 或 jspm 来为您管理依赖项。
2. 对于这个file-access-restriction问题，您可以将您的项目作为扩展加载。扩展能够使用所有可用的 HTML 5 技术以及一些强大的 api（甚至无法用于服务器上的应用程序），同时在您的开发环境中是本地的。因此，如果您将应用程序作为扩展程序提供服务，则无需启动 Web 服务器来访问 HTML 5 技术。
3. 对于hot-module-reload能力，你可以从另一个方面来接近它。您可以从应用程序本身执行此操作，而不是在 Web 服务器中使用文件观察器来监视本地系统中的文件更改。由于应用程序可以fetch或应用程序需要的资源xmlhttprequest，您可以定期fetch或xmlhttprequest应用程序需要的资源并将其与某些缓存进行比较。但是你怎么知道要检查哪些文件呢？你可以看看links的页面内，script中，img.如果你使用 SystemJS 作为模块加载器，那么你可以使用它的注册表来查找你的应用程序需要但没有加载到页面中的文件，因为它已经被转换或其他东西。虽然执行所有这些操作可能会降低系统的性能，并且会增加转译或预处理非本机代码的开销，但这项工作可以外包给 一个web worker，这将为您的应用程序代码释放系统中的主执行线程。

Don't believe me? Here's proof.

不相信我？这是证据。

1. The Angular in Chrome project on github contains a zipped packagewhich contains the required dependencies needed to develop a minimal Angular 2 application (by minimal, I am referring to the Tour of Heroes tutorial referred on the quickstart page). So that if you are on a system not supported by node.js (yes there are, ChromeOS for instance) or just on a restricted system in which node.js just isn't available, all the required dependencies are available and you do not need npm or jspm to manage the required dependencies for you.
2. There is a proof of concept extensionwhich serves the tour of heroes tutorial (the development files, typescript and all) locally as a chrome extension.
3. The extension also implements a hot-module-reloadfunctionality by hooking into the hmr-primitives developed by alexis vincent for SystemJS. The hot-module-reloadfunctionality is enabled by a single javascript file so that if this functionality is not needed or is taking up too much resources, then you can just remove the offending line of code.

1. github 上的 Angular in Chrome 项目包含一个压缩包，其中包含开发最小 Angular 2 应用程序所需的依赖项（我指的是快速入门页面上提到的英雄之旅教程）。因此，如果您在 node.js 不支持的系统上（是的，例如 ChromeOS）或仅在 node.js 不可用的受限系统上，则所有必需的依赖项都可用，而您没有需要 npm 或 jspm 为您管理所需的依赖项。
2. 有一个概念验证扩展，它作为 chrome 扩展在本地为英雄教程（开发文件、打字稿和所有）提供服务。
3. 该扩展还hot-module-reload通过挂钩由 alexis vincent 为 SystemJS 开发的 hmr-primitives 来实现功能。该hot-module-reload功能由单个 javascript 文件启用，因此如果不需要此功能或占用太多资源，则只需删除有问题的代码行即可。

But be warned though.

但请注意。

1. If you are using this system, then you need a way to update your development package as technology moves forward and it moves at a rapid pace (what with talk of Angular 3 when Angular 2 has just been released) or the technologies that you are using to develop your application may become obsolete or that somewhere along the line an api change may prevent your application from being functional in the future. You are also not guaranteed to have up-to-date repositories for the dependencies since these types of packages are maintained manually.
2. Bundling your application as a Chrome extension like in Angular in Chrome will introduce performance bottlenecks. Since code is transpiled and modules are lazy loaded, you lose the advances of JIT compilation and other performance enhancements that modern javascript engines use to optimize code run on the browser. However, what you lose in performance, you gain the flexibility to use the technology that you prefer to develop in. There is always a tradeoff. Moreover, the performance hit is only at the beginning as code is loaded. Once it has been loaded by the application, then the system will know how to implement the performance enhancements. When you distribute your application, you really need to compile the needed resources to take advantage of the performance enhancements of modern javascript engines.
3. The hot-module-reloadcapability is currently a hackish way of implementing a file watcher which uses common conventions for a project (temp1.ts, temp1.css, temp1.htm) since there is no way (I might be wrong on this) to get a definitive list of all the resources needed by the application but not loaded on the main page (the transpiled or pre-processed resources).

1. 如果你正在使用这个系统，那么你需要一种方法来更新你的开发包随着技术的进步和快速发展（当 Angular 2 刚刚发布时谈论 Angular 3）或你正在使用的技术开发您的应用程序可能会过时，或者某个地方的 api 更改可能会阻止您的应用程序在未来运行。您也不能保证拥有最新的依赖项存储库，因为这些类型的包是手动维护的。
2. 像在 Chrome 中的 Angular 一样将您的应用程序捆绑为 Chrome 扩展程序将引入性能瓶颈。由于代码被转译并且模块是延迟加载的，你失去了 JIT 编译的进步和现代 javascript 引擎用来优化在浏览器上运行的代码的其他性能增强。然而，您在性能上的损失，您获得了使用您更喜欢开发的技术的灵活性。总有一个权衡。此外，性能影响只是在加载代码时才开始。一旦应用程序加载了它，系统就会知道如何实现性能增强。当您分发应用程序时，您确实需要编译所需的资源以利用现代 javascript 引擎的性能增强。
3. 该hot-module-reload功能目前是实现文件观察器的一种黑客方式，它使用项目的通用约定（temp1.ts、temp1.css、temp1.htm），因为没有办法（我可能在这方面错了）获得最终列表应用程序需要但未加载到主页上的所有资源（转译或预处理的资源）。

回答by hasanain

node.js is used to write Javascript on the server side. angular.js is a client side framework.

node.js 用于在服务器端编写 Javascript。angular.js 是一个客户端框架。

You don't need node.js to use angular.js but, you can install npm (node package manager) to use some awesome tools that will make your life as an angular developer much easier. For example: yoemanwhich is a great scaffolding tool. There are many other tools available on npm here is a link to their siteLearn more about angular at the official angular website or at the angular youtube channel

你不需要 node.js 来使用 angular.js 但是，你可以安装 npm（节点包管理器）来使用一些很棒的工具，这将使你作为 angular 开发人员的生活变得更加轻松。例如：yoeman，这是一个很棒的脚手架工具。npm 上还有许多其他工具可用，这里是他们网站的链接在官方 angular 网站或 angular youtube 频道了解有关 angular 的更多信息

回答by kike

No. Angularis used at the client side and Nodefor the server side.

No.Angular用于客户端和Node服务器端。

They use to go together as the MEAN Stackbut it's not necessary.

它们过去常常作为MEAN 堆栈一起使用，但这不是必需的。

回答by Billy

You don't need Node.JS for AngularJS to work. NodeJS is server side, AngularJS is client side.

AngularJS 不需要 Node.JS 即可工作。NodeJS 是服务器端，AngularJS 是客户端。

If you are new to AngularJS, I'd suggest this tutorial AngularJS tutorial. In the tutorial you will use NodeJS, you will understand why the two work together, but are not necessary.

如果您是AngularJS 的新手，我建议您阅读本教程AngularJS 教程。在本教程中，您将使用 NodeJS，您将了解为什么两者一起工作，但不是必需的。

回答by JayMc

It's hard to answer without knowing how your Imaging editing tool works. But to answer your question, no you do not need Node.js to use AngularJS.

如果不知道您的图像编辑工具是如何工作的，就很难回答。但是要回答你的问题，不，你不需要 Node.js 来使用 AngularJS。

Angular is a front-end javascript framework which operates in the clients web browser.

Angular 是一个在客户端 Web 浏览器中运行的前端 javascript 框架。

Node is a service which can execute javascript and is often used on a server maybe in replacement of PHP (like in MEAN stack). Also, because Node is a service which can execute javascript it can be used in your local computer when developing Angular applications to do background tasks such as minifying css and javascript and performing tests.

Node 是一种可以执行 javascript 的服务，通常在服务器上使用，可能会替代 PHP（例如在 MEAN 堆栈中）。此外，由于 Node 是一种可以执行 javascript 的服务，因此在开发 Angular 应用程序时可以在本地计算机中使用它来执行后台任务，例如缩小 css 和 javascript 以及执行测试。

So if your Imaging editing tool is developed in javascript and your application used Angular and Node (as a web server), the code could be executed on either client side or server side.

因此，如果您的图像编辑工具是用 javascript 开发的，并且您的应用程序使用 Angular 和 Node（作为 Web 服务器），则代码可以在客户端或服务器端执行。

Have a read on MEAN stack to see where Node and Angular fit in. You don't even need Node at all but it's nice to develop all in the same language.

阅读 MEAN 堆栈以了解 Node 和 Angular 适合的位置。您甚至根本不需要 Node，但使用相同的语言进行开发是很好的。