Angular2 System.js应用程序控制流程

Question

I started learning Angular2 and finding it difficult to find the flow of application. 我开始学习Angular2，发现很难找到应用程序流程。

systemjs.config.js systemjs.config.js

(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'dist',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

index.html index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
     System.import('app').catch(function(err){ alert(err); });
    </script>
  </head>

  <body>
    <my-app>APP WORKS</my-app>
  </body>
</html>

When I run application, I see output as "Hello Angular" which is correct and it is working properly. 运行应用程序时，我看到的输出为“ Hello Angular”，它正确无误，并且工作正常。

My question is how the System.import('app') worked? 我的问题是System.import('app')工作？ I don't have any folder or file name app in any directory. 我在任何目录中都没有文件夹或文件名应用。

Also, there is entry in systemjs.config.js as "app: { main: './main.js'," what exactly is relation between declaration in systemjs.config.js and System.import('app') . 另外， systemjs.config.js中的条目为"app: { main: './main.js',"这是systemjs.config.js声明与System.import('app')之间的确切关系。 how control of application flows? 如何控制应用程序流？

If I change System.import('app') to System.import('abc') then I got error. 如果我将System.import('app')更改为System.import('abc')则出现错误。

Answer 1

Good Question ;) 好问题 ;）

<script>
     System.import('app').catch(function(err){ alert(err); });
</script>

here in this lines of code system.import loads a main file for the app, actually systemJs is a module loader, which loads the module for your app. 在这行代码中， system.import会为应用程序加载一个主文件，实际上systemJs是一个模块加载器，它为您的应用程序加载模块。

systemjs.config.js is normal javascript file where we write a bunch of code for simplicity instead in a single file. systemjs.config.js是普通的javascript文件，为了简化起见，我们在其中编写了许多代码，而不是在一个文件中。 where we tell angular to load main file first. 我们告诉angular首先加载主文件。 like here 像这儿

"app: { main: './main.js',....

If I change System.import('app') to System.import('abc') then I got error. 如果我将System.import（'app'）更改为System.import（'abc'），则出现错误。

Yes, because here app is a file variable which binds to the main.js file where we bootstraped the whole app to load, otherwise abc is nothing so it throw error. 是的，因为这里的app是一个文件变量，该文件变量绑定到了我们引导整个应用程序加载的main.js文件，否则abc没什么，所以它引发错误。

Hope it clear some points. 希望它能阐明一些观点。

Answer 2

Extracted from the SystemJS documentation at https://github.com/systemjs/systemjs/blob/master/docs/config-api.md#packages : 从SystemJS文档中提取https://github.com/systemjs/systemjs/blob/master/docs/config-api.md#packages ：

"Packages provide a convenience for setting meta and map configuration that is specific to a common path." “软件包为设置特定于公共路径的元和地图配置提供了便利。”

Given your current configuration, System.import('app') instructs SystemJS to load './main.js', the entry point specified in the 'app' package under the attribute 'main'. 给定您当前的配置，System.import（'app'）指示SystemJS加载'./main.js'，这是在'app'包中在属性'main'下指定的入口点。

packages: {
  app: {
    main: './main.js',
    defaultExtension: 'js'
  },
  rxjs: {
    defaultExtension: 'js'
  }
}

Angular2 System.js应用程序控制流程

问题描述

2 个解决方案

解决方案1
0 2016-12-05 18:46:34

解决方案2
0 2016-12-05 19:01:08

Angular2 System.js应用程序控制流程

问题描述

2 个解决方案

解决方案1 0 2016-12-05 18:46:34

解决方案2 0 2016-12-05 19:01:08

解决方案1
0 2016-12-05 18:46:34

解决方案2
0 2016-12-05 19:01:08