Question

我以此为例：JSFiddle - angular2 example 我的目标是在单个html文件中使用angular4，并创建一个没有webpack和管道的单页面应用程序。

这是我的代码，目前无效。

<!DOCTYPE html>
<html>
   <head>
      <script type="text/javascript" src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
      <script type="text/javascript" src="https://unpkg.com/zone.js@0.8.5/dist/zone.min.js"></script>
      <script type="text/javascript" src="https://unpkg.com/rxjs@5.2.0/bundles/Rx.min.js"></script>
      <script type="text/javascript" src="https://unpkg.com/@angular/core@4.0.1/bundles/core.umd.js"></script>
      <script type="text/javascript" src="https://unpkg.com/@angular/common@4.0.1/bundles/common.umd.js"></script>
      <script type="text/javascript" src="https://unpkg.com/@angular/compiler@4.0.1/bundles/compiler.umd.js"></script>
      <script type="text/javascript" src="https://unpkg.com/@angular/platform-browser@4.0.1/bundles/platform-browser.umd.js"></script>
      <script type="text/javascript" src="https://unpkg.com/@angular/platform-browser-dynamic@4.0.1/bundles/platform-browser-dynamic.umd.js"></script>
      <script type="text/typescript">
         let { Component, NgModule } = ng.core;
         @Component({
            selector: 'my-app',
            template: `
            <h1>Hello, {{ name }}</h1>
            <button (click)="increment()">Click {{ counter }}</button>
            `,
         })
         class HomeComponent {
         counter = 0;
         name = 'Angular 2'

         increment() {
         this.counter++;
         }
         }

         const { BrowserModule } = ng.platformBrowser;

         @NgModule({
         imports:      [ BrowserModule ],
         declarations: [ HomeComponent ],
         bootstrap:    [ HomeComponent ]
         })
         class AppModule { }

         const { platformBrowserDynamic } = ng.platformBrowserDynamic;
         platformBrowserDynamic().bootstrapModule(AppModule);
      </script>
   </head>
   <body>
      <my-app></my-app>
   </body>
</html>

Answer 1

就像@nikksan所说，他只需要添加转译器，可以通过将以下脚本添加到文件末尾来完成。

<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/3.3.4000/typescript.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/basarat/typescript-script@master/transpiler.js"></script>

已更新为Angular 7，它看起来像这样：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://unpkg.com/core-js@2.6.5/client/shim.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/zone.js@0.8.29/dist/zone.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/rxjs@6.4.0/bundles/rxjs.umd.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/@angular/core@7.2.10/bundles/core.umd.js"></script>
    <script type="text/javascript" src="https://unpkg.com/@angular/common@7.2.10/bundles/common.umd.js"></script>
    <script type="text/javascript" src="https://unpkg.com/@angular/compiler@7.2.10/bundles/compiler.umd.js"></script>
    <script type="text/javascript" src="https://unpkg.com/@angular/platform-browser@7.2.10/bundles/platform-browser.umd.js"></script>
    <script type="text/javascript" src="https://unpkg.com/@angular/platform-browser-dynamic@7.2.10/bundles/platform-browser-dynamic.umd.js"></script>
</head>
<body>
<my-app></my-app>
<script type="text/typescript">
let { Component, NgModule } = ng.core;
@Component({
selector: 'my-app',
template: `
    <h1>Hello, {{ name }}</h1>
    <button (click)="increment()">Click {{ counter }}</button>
`,
})
class HomeComponent {
    counter = 0;
    name = 'Angular 2'

    increment() {
        this.counter++;
    }
}

const { BrowserModule } = ng.platformBrowser;

@NgModule({
    imports:      [ BrowserModule ],
    declarations: [ HomeComponent ],
    bootstrap:    [ HomeComponent ]
})
class AppModule { }

const { platformBrowserDynamic } = ng.platformBrowserDynamic;
platformBrowserDynamic().bootstrapModule(AppModule);
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/3.3.4000/typescript.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/basarat/typescript-script@master/transpiler.js"></script>
</body>
</html>

单个html文件中的Angular4

1 个答案: