这就是刚刚我们使用AngularCLI安装后的文件。

让我们调整一下目录结构，已使Angular能更好的集成到Core中：

将Angular文件夹下的所有文件拖拽到系统根目录下。并且删除Angular文件夹。调整后的结果：

啰嗦几句，其中package.json是Angular的所有包文件，你可以打开看一下，其中包含许多除了Angular包以外的依赖包。

如果你想了解这些文件都是干嘛的，作用是什么，请参考Angular官网

之后我们需要把src文件夹重命名一下，当然也可以不重命名，为了看着方便，我把他重命名为ClientApp。

5. 启用Angular的HTTP模式和表单绑定模式

打开ClientApp/app/app.module.ts文件，加入FormsModule和HttpModule并且在NgMudule导入

这里插一句，由于我们在安装Angular时使用了--skip-install，所以这里会提示我们@angular组件找不到，不过没关系，我们会在之后还原Angular的相关包

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

@NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
       BrowserModule,
       FormsModule,
       HttpModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

6. 配置.angular-cli.json，tsconfig.json，tsconfig.app.json，tsconfig.spec.json

由于我们使用的是Asp.Net Core集成Angular，所以我们需要告诉Angular将程序输出到wwwroot文件夹。当使用AngularCLI编译Angular时，Angular将会把编译后的文件输出到Asp.Net Core的静态文件目录wwwroot下。

配置如下

同样的配置tsconfig.json，tsconfig.app.json，tsconfig.spec.json，tsconfig.json文件是编译TypeScript文件的配置文件。同样需要修改输出位置：

7. 从Angular中调用Asp.Net Core WebApi

这里我们需要修改app.component.ts文件。

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http'
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    constructor(private _httpService: Http) { }
    apiValues: string[] = [];
    ngOnInit() {
        this._httpService.get('/api/values').subscribe(values => {
            this.apiValues = values.json() as string[];
        });
    }
}

当Angular在Core上运行之后，他会向ValuesController发出GET请求，并且返回一个字符串数组。

之后我们需要修改ClientApp/app/app.component.html文件，然他来显示WebApi返回的数据：

<div style="text-align:center">
  <h1>
    这是一个Asp.Net Core 1.1 With Angular4应用程序
  </h1>
  <h2>下面的信息是由Asp.Net Core WebAPI返回的</h2>
  <ul *ngFor="let value of apiValues">
    <li>{{value}}</li>
  </ul>
  <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
</div>

其中 *ngFor循环遍历apiValues并一个一个的输出到value中。这是Angular的一种语法。更多语法你需要参阅Angular官方文档。

8. 安装Angular所有依赖项

这一步我们就要用到node了。就是安装AngularCLI一样。使用NPM包管理器。

首先开启Powershell或CMD命令提示行工具，将路径设置到项目根目录。执行如下命令：

npm install