Write a simple Angular app in TypeScript

First, change the code in app.ts to:

import {Component} from "angular2/core"
import {MyModel} from "./model"

@Component({
  selector: `my-app`,
  template: `<div>Hello from </div>`
})
class MyApp {
  model = new MyModel();
  getCompiler() {
    return this.model.compiler;
  }
}

Then add another TypeScript file in src named model.ts:

export class MyModel {
  compiler = "TypeScript";
}

And then another TypeScript file in src named main.ts:

import {bootstrap} from "angular2/platform/browser";
import {MyApp} from "./app";
bootstrap(MyApp);

Finally, change the code in index.html to the following:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script src="scripts/lib/angular2-polyfills.js"></script>
  <script src="scripts/lib/system.src.js"></script>
  <script src="scripts/lib/rx.js"></script>
  <script src="scripts/lib/angular2.js"></script>
  <script>
  System.config({
    packages: {
      'scripts': {
        format: 'cjs',
        defaultExtension: 'js'
      }
    }
  });
  System.import('scripts/main').then(null, console.error.bind(console));
  </script>
  <title></title>
</head>
<body>
  <my-app>Loading...</my-app>
</body>
</html>

This loads the app. When you run the ASP.NET application you should see a div that says “Loading…” and then updates to say “Hello from TypeScript”.

Links:

https://www.typescriptlang.org/docs/handbook/asp-net-core.html#write-a-simple-angular-app-in-typescript

doc_TypeScript

2025-01-10 15:47:30

Comments