具备AngularJS基础，不想安装Node.js，如何获取Angular 5的CDN？

嗨，很高兴能帮到你！既然你有 AngularJS 的基础，想用 CDN 快速上手 Angular 5 而不用折腾 Node.js 环境，完全没问题～ 下面是 Angular 5 核心依赖和库的 CDN 资源，直接复制到 HTML 里就能用：

必备的依赖库 #

• Zone.js（Angular 依赖的异步任务管理库）：
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.26/zone.min.js"></script>
• RxJS（Angular 常用的响应式编程库）：
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.12/Rx.min.js"></script>

Angular 5 核心库 #

• @angular/core：
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular/5.2.11/core.umd.min.js"></script>
• @angular/common：
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular/5.2.11/common.umd.min.js"></script>
• @angular/compiler：
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular/5.2.11/compiler.umd.min.js"></script>
• @angular/platform-browser：
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular/5.2.11/platform-browser.umd.min.js"></script>
• @angular/platform-browser-dynamic：
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular/5.2.11/platform-browser-dynamic.umd.min.js"></script>

快速上手示例 #

给你整个简单的示例代码，直接存成 HTML 文件就能运行：

<!DOCTYPE html>
<html>
<head>
  <title>Angular 5 CDN Demo</title>
  <!-- 引入依赖库 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.26/zone.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.12/Rx.min.js"></script>
  <!-- 引入 Angular 5 核心库 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular/5.2.11/core.umd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular/5.2.11/common.umd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular/5.2.11/compiler.umd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular/5.2.11/platform-browser.umd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular/5.2.11/platform-browser-dynamic.umd.min.js"></script>
</head>
<body>
  <my-app></my-app>

  <script>
    // 定义组件
    const { Component } = ng.core;
    const { NgModule } = ng.core;
    const { BrowserModule } = ng.platformBrowser;
    const { platformBrowserDynamic } = ng.platformBrowserDynamic;

    @Component({
      selector: 'my-app',
      template: `<h1>Hello Angular 5!</h1>`
    })
    class AppComponent {}

    // 定义模块
    @NgModule({
      imports: [BrowserModule],
      declarations: [AppComponent],
      bootstrap: [AppComponent]
    })
    class AppModule {}

    // 启动应用
    platformBrowserDynamic().bootstrapModule(AppModule);
  </script>
</body>
</html>

小提示 #

• 上面用的是 5.2.11 版本（Angular 5 的最终稳定版），你可以根据需要替换成其他 5.x 的版本号；
• 开发阶段可以把 .min.js 换成 .js 版本，方便调试；
• 如果需要用到其他模块（比如表单、路由），可以去 CDN 平台搜索对应的 Angular 5 模块资源，比如 @angular/forms、@angular/router 等。

内容的提问来源于stack exchange，提问作者Javed Iqbal