Angular2 Systemjs應用程序控制流程

我開始學習Angular2，發現很難找到應用程序的流程。Angular2 Systemjs應用程序控制流程

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

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

當我運行應用程序時，我看到的「你好角」，這是正確的，它工作正常輸出。

我的問題是System.import('app')是如何工作的？我沒有任何目錄中的文件夾或文件名稱應用程序。

此外，還有在systemjs.config.js爲"app: { main: './main.js'," 究竟是systemjs.config.js和System.import('app')聲明之間的關係進入。如何控制應用程序流？

如果我改變System.import('app')到System.import('abc')然後我得到了錯誤。

來源

2016-12-05 Rahul

好問題;）

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

在這裏的代碼system.import此行加載的應用程序的主文件，實際上systemJs是一個模塊加載，它加載了您的應用程序模塊。

systemjs.config.js是正常的JavaScript文件，我們在一個文件中寫了一堆簡單的代碼。我們首先告訴角度加載主文件。喜歡這裏

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

如果我改變System.import（ '應用'），以System.import（ 'ABC'），然後我得到了錯誤。

是的，因爲這裏的應用程序是結合我們bootstraped整個應用程序加載main.js文件的文件變量，否則ABC是什麼所以它拋出錯誤。

希望它清楚一些觀點。

來源

2016-12-05 18:46:34

感謝您的快速響應。所以你的意思是說「應用程序」是綁定到「main.js」（由systemjs.config.js加載）的內置變量？你可以請幫助我的文檔鏈接或任何文章，我可以閱讀更多關於這個「應用程序」變量 – Rahul

不，你可以假設abc而不是應用程序，但事情是你必須在sysem中使用相同的變量.config.js和index.html文件 –

實際上根據Update，它很難找到system.config的配置。js文件，你可以查看Upation官方網站。 –

從SystemJS文檔提取的https://github.com/systemjs/systemjs/blob/master/docs/config-api.md#packages：

「軟件包提供用於設置間位和映射配置特定於一個共同的路徑的便利」假設您的當前配置爲System.import（'app'），則指示SystemJS加載'./main.js'，這是'app'包中'main'屬性下指定的入口點。

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

來源

2016-12-05 19:01:08

如果我正確理解了你，當加載index.html文件時，它會遇到「」，通過它加載systemjs.config.js並且它不執行任何操作（或者它加載一個main.js文件並使其可用）。現在當它遇到System.import（'app'）時，它會檢查systemjs.config.js的「app {main：'./main.js'」並加載main.js文件的映射？請驗證我的理解。 – Rahul

是的，這是正確的。 systemjs.config.js文件在加載時配置SystemJ。然後，SystemJs知道如何在調用System.import（'app'）時解析'app'。 –

謝謝@Michael – Rahul

Angular2 Systemjs應用程序控制流程

回答

相關問題