从CDN获取Angular2的方法

2 年 ago

逸, 科

2 minutes

使用CDN提供商https://unpkg.com，可以获取到Angular2的各个版本。
以@angular/core包为例，URL的指定方法如下所示。

#URLSummary1https://unpkg.com/@angular/core最新バージョンを取得2https://unpkg.com/@angular/core@2.2.4バージョンを指定して取得3https://unpkg.com/@angular/core@2.2.4/ブラウザでファイル一覧を見れる
(画面右上からバージョンの切り替えも可能)

确认动作环境

我在Plunker上准备了一个示例，使用了Angular@2.3.0的版本。

Plunker: Angular2のバージョン指定サンプル

示例代码

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>angular2 playground</title>

    <!-- [ Load: Environment Library ] -->
    <script src="https://unpkg.com/zone.js@0.7.2/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js@0.7.2/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>

    <!-- [ Load: Angular2 Library ] -->
    <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: {
          emitDecoratorMetadata: true,
        },
        paths: {
          // 'cdn'の定義
          'cdn:': 'https://unpkg.com/',
        },
        map: {
          'typescript': 'cdn:typescript@2.1.4',
          'rxjs'      : 'cdn:rxjs@5.0.1',
          '@angular/core'                    : 'cdn:@angular/core@2.3.0',
          '@angular/common'                  : 'cdn:@angular/common@2.3.0',
          '@angular/compiler'                : 'cdn:@angular/compiler@2.3.0',
          '@angular/platform-browser'        : 'cdn:@angular/platform-browser@2.3.0',
          '@angular/platform-browser-dynamic': 'cdn:@angular/platform-browser-dynamic@2.3.0',
          '@angular/http'                    : 'cdn:@angular/http@2.3.0',
          '@angular/router'                  : 'cdn:@angular/router@3.3.0',
          '@angular/forms'                   : 'cdn:@angular/forms@2.3.0',
        },
        packages: {
          app: { defaultExtension: 'ts' },
          rxjs: { defaultExtension: 'js' },
        },
      });

      System.import('app/main.ts').catch(console.error.bind(console));
    </script>
  </head>

  <body>
    <my-app>loading...</my-app>
  </body>

</html>

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { Component, NgModule } from '@angular/core';

/**
 * Main Application Component
 */
@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello</h2>
    </div>
  `,
})
export class App
{
}

/**
 * Application Module
 */
@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ],
})
export class AppModule
{
}

platformBrowserDynamic().bootstrapModule(AppModule);