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 Views/Home/Index.cshtml to the following:

@{
  ViewBag.Title = "Home Page";
}
<script src="~/Scripts/angular2-polyfills.js"></script>
<script src="~/Scripts/system.src.js"></script>
<script src="~/Scripts/rx.js"></script>
<script src="~/Scripts/angular2.js"></script>
<script>
  System.config({
    packages: {
      '/Scripts/App': {
        format: 'cjs',
        defaultExtension: 'js'
      }
    }
  });
  System.import('/Scripts/App/main').then(null, console.error.bind(console));
</script>
<my-app>Loading...</my-app>

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-4.html#write-a-simple-angular-app-in-typescript

doc_TypeScript

2025-01-10 15:47:30

Comments