javascript 如何在没有 node.js/npm 的情况下在本地使用 Angular2、systemjs?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/32223555/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 15:00:35  来源:igfitidea点击:

how to use Angular2, systemjs locally WITHOUT node.js/npm?

javascriptangularsystemjs

提问by kakaja

This is the index.html with angular-alpha35:

这是带有 angular-alpha35 的 index.html:

    <html>
    <head>
        <meta charset="UTF-8">
        <base href="/">
        <title>APP Ang2</title>
        <script src="scripts/traceur-runtime.js"></script>
        <script src="https://jspm.io/[email protected]"></script>
        <script src="scripts/bundle35/angular2.dev.js"></script> 
        <script src="scripts/bundle35/router.dev.js"></script>
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    <body>

        <app>Loading...</app>

        <script>System.import('app').catch(console.log.bind(console));</script>

    </body>
    </html>

And it works fine if there is internet connection and system.js can be loaded. If I try to get a local copy of system.js like this:

如果有互联网连接并且可以加载 system.js,它就可以正常工作。如果我尝试像这样获取 system.js 的本地副本:

<script src="scripts/[email protected]"></script>

then nothing works until I put rx.jsin the root folder and put this line at the end of the file:

然后什么都不起作用,直到我放入rx.js根文件夹并将此行放在文件末尾:

    <script src="scripts/[email protected]"></script>
</body>
</html>

then System.js works fine, but in this case, there is a strange problem with angular2 bindings. they are not working until I do some interaction with the page (submit a form, open a select, make some div change its dimensions even with simple hidden, etc..). As soon as something changes on the page, all bindings get to work and the page gets resurrected.

然后 System.js 工作正常,但在这种情况下,angular2 绑定有一个奇怪的问题。直到我与页面进行一些交互(提交表单,打开选择,使一些 div 更改其尺寸,即使是简单的隐藏等,它们才能工作)。一旦页面上的某些内容发生变化,所有绑定都会开始工作并且页面会复活。

How to make all this work locally without node.js and without internet connection?

如何在没有 node.js 和互联网连接的情况下在本地完成所有这些工作?

采纳答案by kakaja

Thanks to Arnaud Boeglin'sidea of difference in packages' version, I checked with es6-module-loder and by chance this installation works perfectly (so far I didn't find any problem):

感谢Arnaud Boeglin 的关于包版本差异想法,我检查了 es6-module-loder 并且碰巧这个安装工作​​完美(到目前为止我没有发现任何问题):

    <script src="scripts/traceur-runtime.js"></script>
    <script src="scripts/es6-module-loader.js"></script>
    <script src="scripts/[email protected]"></script>
    <script src="scripts/bundle35/angular2.dev.js"></script> 
    <script src="scripts/bundle35/router.dev.js"></script>

The es6-module-loader has to be before the systemjs in <head>tag.

es6-module-loader 必须在<head>标签中的 systemjs 之前。

回答by Alfonso Presa

You should include the sfx version of angular 2 like this:

您应该像这样包含 angular 2 的 sfx 版本:

<script src="https://code.angularjs.org/2.0.0-alpha.32/angular2.sfx.dev.js"></script>

Note that it's a self contained js file you can download locally.

请注意,它是一个自包含的 js 文件,您可以在本地下载。

Check this sample project I made in github:

检查我在 github 中制作的这个示例项目:

https://github.com/alfonso-presa/angular2-es5-sample

https://github.com/alfonso-presa/angular2-es5-sample

Edit: Check this SO question for more clarification on what sfx means: Difference between angular.dev.js and angular.sfx.dev.js

编辑:检查这个 SO 问题以进一步说明 sfx 的含义:Difference between angular.dev.js and angular.sfx.dev.js