読者です 読者をやめる 読者になる 読者になる

かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

ASP.NET CoreでAngularをするHello world

ASP.NET TYpeScript

以下の記事の続きです。

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メニューが増えています。そして、それをクリックすると以下のようにハローワールドが表示されます。

f:id:okazuki:20170305095150p:plain

やったね!