这就是刚刚我们使用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.jsontsconfig.jsontsconfig.app.jsontsconfig.spec.json由于我们使用的是Asp.Net Core集成Angular所以我们需要告诉Angular将程序输出到wwwroot文件夹。当使用AngularCLI编译Angular时Angular将会把编译后的文件输出到Asp.Net Core的静态文件目录wwwroot下。配置如下同样的配置tsconfig.jsontsconfig.app.jsontsconfig.spec.jsontsconfig.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 styletext-align:center h1 这是一个Asp.Net Core 1.1 With Angular4应用程序 /h1 h2下面的信息是由Asp.Net Core WebAPI返回的/h2 ul *ngForlet value of apiValues li{{value}}/li /ul img width300 srcdata:image/svgxml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIDQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmcDQo /div其中 *ngFor循环遍历apiValues并一个一个的输出到value中。这是Angular的一种语法。更多语法你需要参阅Angular官方文档。8. 安装Angular所有依赖项这一步我们就要用到node了。就是安装AngularCLI一样。使用NPM包管理器。首先开启Powershell或CMD命令提示行工具将路径设置到项目根目录。执行如下命令npm install
