[英]Angular2 Systemjs application control flow
我开始学习Angular2,发现很难找到应用程序流程。
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>
运行应用程序时,我看到的输出为“ Hello Angular”,它正确无误,并且工作正常。
我的问题是System.import('app')
工作? 我在任何目录中都没有文件夹或文件名应用。
另外, systemjs.config.js
中的条目为"app: { main: './main.js',"
这是systemjs.config.js
声明与System.import('app')
之间的确切关系。 如何控制应用程序流?
如果我将System.import('app')
更改为System.import('abc')
则出现错误。
好问题 ;)
<script>
System.import('app').catch(function(err){ alert(err); });
</script>
在这行代码中, system.import
会为应用程序加载一个主文件,实际上systemJs是一个模块加载器,它为您的应用程序加载模块。
systemjs.config.js
是普通的javascript文件,为了简化起见,我们在其中编写了许多代码,而不是在一个文件中。 我们告诉angular首先加载主文件。 像这儿
"app: { main: './main.js',....
如果我将System.import('app')更改为System.import('abc'),则出现错误。
是的,因为这里的app是一个文件变量,该文件变量绑定到了我们引导整个应用程序加载的main.js文件,否则abc没什么,所以它引发错误。
希望它能阐明一些观点。
从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'
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.