在plnkr中加载angularjs文件

Question

This sample code creates a angular component. 此示例代码创建一个角度分量。 I am confused as to how it is loading main.js and story.component.js files into index.html ? 我对如何将main.js和story.component.js文件加载到index.html中感到困惑？

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

There is no direct inclusion of these files in index.html 这些文件没有直接包含在index.html中

Below is the entire code : 以下是完整的代码：

<!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

Loading is handled by SystemJS: 加载由SystemJS处理：

System.import('app/main')

imports the main.js as described in config.js : 如config.js所述导入main.js ：

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

which basically tells loader that module main is part of the app package and can be found in file main.ts in the same directory. 它基本上告诉加载程序模块main模块是app包的一部分，可以在同一目录的文件main.ts中找到。

The rest of the files are loaded with import statements. 其余文件将使用import语句加载。

在plnkr中加载angularjs文件

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-03-09 01:11:54

在plnkr中加载angularjs文件

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-03-09 01:11:54

解决方案1
0 已采纳 2016-03-09 01:11:54