The Practical Client
Your First TypeScript Angular 2 App
Here's how to use Angular2 and TypeScript to retrieve JSON objects from an ASP.NET MVC controller and populate your page with the results.
In a previous column, I walked through configuring an ASP.NET MVC project to use Angular2 with TypeScript. In the end, though, all my application did was display the hardcoded test "Hello, World." In this column, I'm going to do something more useful: retrieve a collection of Customer objects from the server and display them in a dropdown list.
On the Server
I'll get the server-side code (and the client-side code that hasn't changed from my previous column) out of the way first.
My Customer Controller, as shown in Listing 1, currently has two action methods. One method returns the initial Customer View while the other returns my list of Customer objects. While I could have used ASP.NET Web API for the second method, I'd prefer to keep all the code for my Customers in a single Controller.
Listing 1: Server-Side Customers Controller
namespace CustomerOrders.Controllers
{
public class CustomerController: Controller
{
public ActionResult Customers()
{
return View("Customers");
}
public ActionResult GetCustomers()
{
CustomerOrdersContext db;
db = new CustomerOrdersContext();
return Json(db.Customers.ToList(),JsonRequestBehavior.AllowGet);
}
Listing 2 shows my View, which hasn't changed much from my previous column. All the View has to do is configure my environment for Angular2 and load the initial file that contains the entry point for my application (./scripts/app/main). The only thing that has changed since my last column is that I've replaced my customer "Hello, World" tag with a new custom tag (Customer-app). I'll use the Customer-app element to define the part of the page that's controlled by Angular2.
Listing 2. A View to Initialize and Load an Angular2 Application
<html>
<head>
<title>Customer Information</title>
<base href="/">
<script src="~/Scripts/systemjs.config.js"></script>
<script>
System.config({
defaultJSExtensions: true
});
System.import('./scripts/app/main')
.catch(function (err) { console.error(err); });
</script>
</head>
<body>
<Customer-app/>
</body>
</html>
While it's not strictly part of my server-side code, here's that entry point code, which I have in a file called main.ts in my project's Scripts/App folder (this is unchanged from my previous column):
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
That last line expects to load a component called AppModule from a file called app.module.ts in the same folder as my main.ts file. That AppModule file, the 'root file' for my application has changed quite a bit from my previous, "Hello, World" application.
Defining the Application's Resources
Essentially, an AppModule component specifies all the resources that your application will require. Since I'm coding in TypeScript, I need the declarations that define those resources which I reference using import statements.
I begin by referencing the Angular2 modules that my application will need. The new addition here, compared to my previous column, is HttpModule which lets me issue Ajax calls to my server-side GetCustomers method:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
Next, I reference the modules that I create as part of the application. The first module is AppComponent (in a file called app.component.ts) that starts my application running. The next module referenced, called CustomerList (in a file called CustomerList.component.ts), manages the first page displayed:
import { AppComponent } from './app.component';
import { CustomerListComponent } from './CustomerList.component';
Still in my app.module.ts file, I define the AppModule startup class itself. I don't actually have any code to put in the class itself -- the class's primary reason for existing is so that I can decorate it with NgModule, which is where I specify the resources my application needs.
In the NgModule decorator I specify the Angular2 modules I'll be using in the imports property (BrowserModule is required for any Angular2 app and I've also included HttpModule to support making Ajax calls).
In the declarations property, I specify the classes I'll use, which currently correspond to my custom elements (Appcomponent is the traditional start point for an Angular2 application and CustomerListComponent will handle displaying my dropdown list of Customers). I also register any providers that I'll be using in the providers property (in this case, that's I'm creating a class called CustomerServerProvider that handles my server-side communication).
Finally, I define any components that should be loaded when AppModule is loaded, in the bootstrap property (in this case, that's AppComponent, the start point for my application).
I also export the class so that it's visible to the code in main.ts:
@NgModule({
imports: [ BrowserModule, HttpModule ],
declarations: [ AppComponent, CustomerListComponent ],
providers: [CustomerServiceProvider],
bootstrap: [AppComponent]
})
export class AppModule { }
Starting the Application
The last step in defining my application is writing my AppComponent class (I put it in a file called app.component.ts). This class, bootstrapped from AppModule, specifies the initial actions to be performed.
Again, I don't do anything in the class itself -- it's just there so I can apply the Component decorator to it (and using Component requires that I import its definition from angular/core). In the Component decorator, I specify in the selector property that Angular2 should search for my Customer-app element and replace it with the HTML in I've defined in the template property:
import { Component } from '@angular/core';
@Component({
selector: 'Customer-app',
template: `<CustomerList></CustomerList>`,
})
export class AppComponent { }
I export this class so that it's visible to the code in App.module.ts.
As my application becomes more complex, I'll might well end up adding more elements to my template and defining more components to process those elements. Right now, however, all I want to do is replace CustomerList with a dropdown list displaying my Customers. I'll do that in a component whose name matches the element: CustomerList.
Displaying a Select List
In my CustomerList class, I begin by importing definitions of the modules that I'll be using. First, I import Angular2's Component and OnInit modules (I'll need OnInit to trigger initial processing when CustomerList is loaded by AppComponent):
import { Component, OnInit } from '@angular/core';
Next I import my Customer module (in a file called Customer.data.ts) that holds the client-side definition of my Customer object. I also import the definition of my CustomerServiceProvide (in a file called Customer.service.ts) so that I can use it in this class:
import { Customer } from './Customer.data'
import { CustomerServiceProvider } from './Customer.services'
Here's the definition of the Customer class that I'll be using to work with the JSON objects returned from my Action method:
export class Customer {
public Id: number;
public LastName: string;
public FirstName: string;
public CustCreditStatus: string;
public CreditLimit: string;
}
Like my AppComponent class, I apply the Component decorator to specify how I want this CustomerList class to be used. In the selector property, I specify that this class is to be used with CustomerList element (which you saw added in AppComponent).