Question

此示例代码创建一个角度组件。我对如何将main.js和story.component.js文件加载到index.html感到困惑？

http://plnkr.co/edit/?p=preview

index.html中没有直接包含这些文件

以下是整个代码：

<!DOCTYPE html>
<html>

<head>
  <script>document.write('<base href="' + document.location + '" />');</script>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- IE required polyfills, in this exact order -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.1/es6-shim.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
  <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

  <!-- Angular polyfill required everywhere -->
  <script src="https://code.angularjs.org/2.0.0-beta.8/angular2-polyfills.js"></script>

  <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.8/Rx.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.8/angular2.dev.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.8/router.dev.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.8/http.dev.js"></script>

  <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {
          'api': {defaultExtension: 'ts'}, 
          'app': {defaultExtension: 'ts'} 
        } 
      });
    System.import('app/main')
          .then(null, console.error.bind(console));
  </script>

</head>

<body>
  <my-story>Loading Demo ...</my-story>
</body>

</html>

Answer 1

加载由SystemJS处理：

System.import('app/main')

按照main.js：

中的说明导入config.js

System.config.packages.app.main = './main.ts'

基本上告诉加载器模块main是app包的一部分，可以在同一目录中的文件main.ts中找到。

其余文件都加载了import语句。

在plnkr中加载angularjs文件

1 个答案: