Introduction
Now that ASP.NET Core, Angular 2, and TypeScript 2 have all shipped final versions, it’s a great time to combine them all into one powerful rich web application platform.As well as just the basics of hosting a TypeScript-coded Angular 2 site on ASP.NET Core, the template includes:
- Server-side prerendering, so your UI can show up very quickly, even before the browser downloads your JavaScript code
- Webpack middleware integration, so that during development, you don’t need to keep rebuilding your client-side application, or even have to run a watcher tool in the background
- Hot module replacement, so that during development, whenever you edit a TypeScript file, a CSS file, or other client-side resource, your changes are pushed into the browser immediately without reloading the page (so you don’t lose your active debugging session, etc.)
- Fast and lean builds. In development, you don’t have to wait for webpack to re-analyse third-party code each time you change your own code, because we factor third-party code out into a separate bundle. Also, in development, your ultra-fast builds include full source maps to aid debugging, whereas in production you get minimal minified output. During publishing to production, it automatically uses production builds.
Installation
First make sure you have installed these prerequisites. Things will not work without them!
- Visual Studio 2015 Update 3: Note that Update 2 is not enough. You need Update 3, because it fixes some issues with NPM, plus it’s a prerequisite for TypeScript 2.0.
- TypeScript 2.0 for Visual Studio 2015: If Visual Studio keeps complaining Cannot find name 'require', it’s because you forgot to install this.
- Node.js version 4 or later: We temporarily don’t support Node 0.x because of this issue, but might re-add support for Node 0.x in the future. To check your Node version, run node -v in a command prompt.
ClientApp
This is where the fun starts. All your Angular 2 code will go here.If you take a quick look in there now you’ll find a components folder inside the app folder.
Angular 2 is built on the concept of components.
Every bit of functionality you build into your app can be built as a component that can take inputs, provide outputs and be rendered at multiple places in your app.
Components, components everywhere.
Everything is a component, including the App itself so you’ll notice an app component alongside counter, fetchdata, home and the navmenu.If you take a look at the app component you’ll see it consists of three files containing html, css and typescript.
The app.component.html template uses bootstrap and acts as the main structure for the entire web app. Every other component will be rendered somewhere within this html.
1
2
3
4
5
6
7
8
9
10
| <div class='container-fluid'> <div class='row'> <div class='col-sm-3'> <nav-menu></nav-menu> </div> <div class='col-sm-9 body-content'> <router-outlet></router-outlet> </div> </div></div> |
Every Angular 2 component can be included in your app using a custom selector which you specify when you create the component. In this case the nav menu has a selector of “nav-menu”.
The template also uses the special router-outlet selector which taps into the angular routing engine. Whenever an angular 2 route is accessed, the relevant html for that route will be rendered in place of this router-outlet selector. More on routing later.
Now take a look at the app.component.ts.
1
2
3
4
5
6
7
8
9
| import { Component } from '@angular/core';@Component({ selector: 'app', template: require('./app.component.html'), styles: [require('./app.component.css')]})export class AppComponent {} |
You can see that the component uses the app.component.html file for its template and the app.component.css file for styles.
By exporting the AppComponent class you ensure you will be able to access it elsewhere in your Angular 2 application.
Let's create your first component
That’s more than enough background info for now. On to your first component.We’ll keep it simple; add a Hello World component, hook it up to the Angular app and display it on the home page.
Start by creating a new HelloWorld folder inside the app/components folder.
Now add a new helloworld.component.ts file to it.
Here’s what you should end up with.
1
2
3
4
5
6
7
8
| import { Component } from '@angular/core';@Component({ selector: 'helloworld', template: require('./helloworld.component.html')})export class HelloWorldComponent {} |
Update the helloworld.component.html so it looks like this…
1
2
3
4
5
6
7
8
| <div class="panel panel-info"> <div class="panel-heading"> Hello World </div> <div class="panel-body"> Here's some text to get us started.... </div></div> |
To actually see the results of your hard work you’ll need to take a few more steps.
First up, your Angular 2 application won’t recognise your component until you register it in app.module.ts.
You need to import the component into the app.module.ts typescript file. Then you need to add it to the list of declared components (so Angular knows it exists and can make it available in your app).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| import { NgModule } from '@angular/core';import { RouterModule } from '@angular/router';import { UniversalModule } from 'angular2-universal';import { AppComponent } from './components/app/app.component'import { NavMenuComponent } from './components/navmenu/navmenu.component';import { HomeComponent } from './components/home/home.component';import { FetchDataComponent } from './components/fetchdata/fetchdata.component';import { CounterComponent } from './components/counter/counter.component';import { HelloWorldComponent } from './components/helloworld/helloworld.component';@NgModule({ bootstrap: [ AppComponent ], declarations: [ AppComponent, NavMenuComponent, CounterComponent, FetchDataComponent, HomeComponent, HelloWorldComponent ], imports: [ UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too. RouterModule.forRoot([ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'counter', component: CounterComponent }, { path: 'fetch-data', component: FetchDataComponent }, { path: '**', redirectTo: 'home' } ]) ]})export class AppModule {} |
To actually see the results of your hard work you’ll need to take a few more steps.
First up, your Angular 2 application won’t recognise your component until you register it in app.module.ts.
You need to import the component into the app.module.ts typescript file. Then you need to add it to the list of declared components (so Angular knows it exists and can make it available in your app).
For now (and to keep things simple), open up the home.component.html file and bring in your hello world component like so.
1
2
3
4
5
6
7
8
9
10
11
12
13
| <h1>Hello, world!</h1><helloworld></helloworld><p>Welcome to your new single-page application, built with:</p><ul> <li><a href='https://get.asp.net/'>ASP.NET Core</a> and <a href='https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx'>C#</a> for cross-platform server-side code</li> <li><a href='https://angular.io/'>Angular 2</a> and <a href='http://www.typescriptlang.org/'>TypeScript</a> for client-side code</li> <li><a href='https://webpack.github.io/'>Webpack</a> for building and bundling client-side resources</li> <li><a href='http://getbootstrap.com/'>Bootstrap</a> for layout and styling</li></ul><p>To help you get started, we've also set up:</p>// -- rest of page |
Next time we’ll take a look at routing in Angular 2, and then pulling data back from .NET Core via Web API.
Comments
Post a Comment