ASP.NET CoreでAngularをするHello world

以下の記事の続きです。

blog.okazuki.jp

ひな形に自分のプログラムを追加してHello worldしてみます。

ClientAppフォルダにAngularのプログラムの本体がいます。そこを弄っていきます。

ClientApp/app/componentsフォルダにhelloworldフォルダを作りましょう。そして、その中にhelloworld.component.tsファイルとhelloworld.component.htmlを作ります。

Angularのお作法に従いコンポーネントを作っていきます。helloworld.component.tsは以下のような感じで。

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'helloworld',
    templateUrl: './helloworld.component.html'
})
export class HelloWorldComponent implements OnInit {
    constructor() { }
    
    title:string = "Hello world";

    ngOnInit() { }
}

helloworld.component.htmlは以下のような感じにします。

<h1>{{title}}</h1>

コンポーネントのプロパティを単純に表示してるだけですね。

ClientApp/app/app.module.tsに作成したモジュールを追加します。ルーティングもhelloworldという文字列で遷移するように設定しておきます。

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: 'helloworld', component: HelloWorldComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModule {
}

そして、ナビゲーションメニューのClientApp/app/components/navmenu/navmenu.component.htmlにメニューを追加します。

<div class='main-nav'>
    <div class='navbar navbar-inverse'>
        <div class='navbar-header'>
            <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
                <span class='sr-only'>Toggle navigation</span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
            </button>
            <a class='navbar-brand' [routerLink]="['/home']">dotnet_angular_helloworld</a>
        </div>
        <div class='clearfix'></div>
        <div class='navbar-collapse collapse'>
            <ul class='nav navbar-nav'>
                <li [routerLinkActive]="['link-active']">
                    <a [routerLink]="['/home']">
                        <span class='glyphicon glyphicon-home'></span> Home
                    </a>
                </li>
                <li [routerLinkActive]="['link-active']">
                    <a [routerLink]="['/counter']">
                        <span class='glyphicon glyphicon-education'></span> Counter
                    </a>
                </li>
                <li [routerLinkActive]="['link-active']">
                    <a [routerLink]="['/fetch-data']">
                        <span class='glyphicon glyphicon-th-list'></span> Fetch data
                    </a>
                </li>
                <li [routerLinkActive]="['link-active']">
                    <a [routerLink]="['/helloworld']">
                        Hello world
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

他のを真似て書いてるだけで何がおきてるのか私にもわかりません。

そして、アプリケーションのルートフォルダでwebpackコマンドを実行します。（webpack入れてないひとはnpm install -g webpackしてね）

PS C:\Users\kaota\Documents\Visual Studio Code\Projects\dotnet-angular-helloworld> webpack
Hash: 58aabf820ca74ec21bf0a8dac7da2d1b48f06b83
Version: webpack 2.2.1
Child
    Hash: 58aabf820ca74ec21bf0
    Time: 10190ms
                 Asset     Size  Chunks             Chunk Names
        main-client.js  24.1 kB       0  [emitted]  main-client
    main-client.js.map  27.2 kB       0  [emitted]  main-client
Child
    Hash: a8dac7da2d1b48f06b83
    Time: 10155ms
             Asset    Size  Chunks             Chunk Names
    main-server.js  154 kB       0  [emitted]  main-server

そして、dotnet runをしましょう。

http://localhost:5000/ にアクセスするとHello worldメニューが増えています。そして、それをクリックすると以下のようにハローワールドが表示されます。

やったね！