Angular2 和 node.js答案

【问题标题】：Angular2 and node.jsAngular2 和 node.js
【发布时间】：2016-05-26 14:01:47
【问题描述】：

我刚开始阅读 angular2 快速入门，发现它使用的是 npm、node 和 typescript。我想知道 angular2 中 node.js 的用途是什么？ Angular 不只是一个客户端框架吗？那么 node.js 有什么用，node.js 到底在做什么呢？在快速入门中，它没有向您展示如何在没有 node.js 的情况下使用 angular2。所以我有点困惑，因为在我看来 angular 只是一个客户端框架。

感谢您的澄清。

【问题讨论】：

标签： javascript node.js angular

【解决方案1】：

Angular2 是一个客户端框架，它不需要 nodejs 就可以工作。混淆来自 typescript，因为 typescript 编译器在 nodejs 上运行。请注意，typescript 支持 ES6，它引入了对具有 import 和 export 功能的模块的支持。

NodeJS 成为前端开发周期不可分割的一部分，因为它提供了许多用于构建应用程序、任务运行器、编译器、测试框架等的工具。

PS：有一个专门用于 javascript 的 Angular 文档：link

您可以从主标题下的下拉菜单中切换语言。遗憾的是，目前大多数文档都是为 Typescript 编写的。您可以下载已经编译好的 angular2 源代码，然后在没有节点的情况下开始使用它。

【讨论】：

【解决方案2】：

事实：当然，angularJS 是一个客户端框架。但是 NODEJS 不是一个服务器端框架，它是一个提供 JavaScript 运行时环境的平台。

为什么在客户端开发中使用 NodeJS：

在 npm（节点包管理器）的帮助下，它提供了对网页中使用的所有 JS 库（例如 Angular）的即时访问。因此，使用npm install package_name --save 安装任何所需的库。所以，没必要学bower。
可以写build scripts 并创建观察者。因此，不需要 Gulp 或 Grunt。
可以安装任何实时重新加载节点模块，以实时重新加载在您的客户端应用中所做的更改。

Angular2 (JavaScript) 文档中使用的 NODEJS：

创建了一个package.json 文件，其中包含客户端应用程序所需的所有库。
接下来只需点击npm install，所有需要的库都会下载到您本地计算机的node_modules 文件夹下。
因此：<script src="node_modules/@angular/core/core.umd.js"></script>
安装一个名为：lite-server 的节点模块，它为您的 Web 应用程序提供服务，并在更改时实时重新加载它。它由npm start执行，检查package.json中的脚本部分。
因此，为了进一步开发，您只需要专注于您的应用程序并下载任何可以使用的客户端库，例如：npm install jQuery --save

归根结底，NODEJS 只需一个 package.json 文件即可让您的生活更轻松。

【讨论】：

感谢您的澄清，我是这一切的初学者。我做了一些 node.js 和 express.js 并记住大多数时候你会做一些类似 node app.js 的事情来启动它。但是在 angular2 快速入门中，您将运行 npm start which run lite-server ... 所以在生产中，我将如何启动它？我尝试了 node app/app.component.js 或 node index.html，但显然这不起作用....在生产中我不会使用 lite-server，而是像 nginx 这样的东西......
当然，在生产中你只需要提供你的 index.html 和它需要的 JS 文件。因此，您可以使用 nginx 来提供静态文件 (html/JS/CSS)，因为它非常快。或者您可以创建自己的 nodeJS 服务器来提供静态文件。
此设置用于开发环境。在生产中，您可以将所需的文件（HTML/JS/CSS）放在 dist 文件夹下并提供它。使用您选择的网络服务器。

【解决方案3】：

我认为 Angular2 作为 NPM 模块提供的原因是因为 TypeScript 编译。

编译器需要d.ts 文件用于模块合约。此外，当您在tsconfig.json 文件中将moduleResolution 属性指定为node 时，它将通过Node 加载它们：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node", // <-----
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

话虽如此，在浏览器中执行时，Angular2 应用程序本身并不使用 Node。

【讨论】：