需要安裝node.js，如何安裝請自行百度 

1、使用vs2017 建立專案，選擇ASP.NET Core Web應用程式，名稱為：ASPNetAngularDemo

選擇angular專案，可以看到是 .NET Core  版本：ASP.NET Core 2.0 

建立完專案後，最終專案結構如下

2、執行，點選CTRL+F5執行，專案預設存在三個選單

3、我們新新增一個選單到專案中 

3.1 在ClientApp\app\components下新增新資料夾：test。並在test資料夾下新增兩個檔案：test.component.html和test.component.ts

可以根據fetchdata資料夾中的檔案內容新增，在test.component.html檔案中新增如下內容

<h1>Test Angular</h1>
<table class="table" *ngIf="models">
    <thead>
    <tr>
        <th>
            First
        </th>
        <th>Second</th>
        <th>Third</th>
    </tr>
    </thead>
    <tbody >
    <tr *ngFor="let a of models">
        <td>{{a.first}}</td>
        <td>{{a.second}}</td>
        <td>{{a.third}}</td>
    </tr>
    </tbody>
</table>
 

在test.component.ts檔案中新增如下內容

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

@Component({
    selector: 'test',
    templateUrl: './test.component.html'
})
export class TestComponent {
    public models: MyModel[];

    constructor() {
        this.models =
        [
            { 'first': 'first1', 'second': 'second1', 'third': 'third1' },
            { 'first': 'first2', 'second': 'second2', 'third': 'third2' },
            { 'first': 'first3', 'second': 'second3', 'third': 'third3' },
            { 'first': 'first4', 'second': 'second4', 'third': 'third4' }
        ];
    }
}

interface MyModel {
    first: string;
    second: string;
    third: string;
}

 

3.2 在選單中添加個Test內容，即在navmenu資料夾下的navemenu.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']">AspNetAngularDemo</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]="['/test']">
                        Test
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>