{"dependencies": {"Microsoft.NETCore.App": {"version": "1.0.1","type": "platform"},"Microsoft.AspNetCore.Diagnostics": "1.0.0","Microsoft.AspNetCore.Server.IISIntegration": "1.0.0","Microsoft.AspNetCore.Server.Kestrel": "1.0.1","Microsoft.Extensions.Logging.Console": "1.0.0","Microsoft.AspNetCore.Mvc": "1.0.1","Microsoft.AspNetCore.StaticFiles": "1.0.0","Microsoft.EntityFrameworkCore.SqlServer" : "1.1.0","Microsoft.EntityFrameworkCore.Tools": {"version": "1.1.0-preview4-final","type": "build"},"Microsoft.EntityFrameworkCore.Design": "1.1.0","Microsoft.EntityFrameworkCore.SqlServer.Design": "1.1.0","Newtonsoft.Json": "9.0.1"},"tools": {"Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview2-final","Microsoft.EntityFrameworkCore.Tools": "1.1.0-preview4-final"},"frameworks": {"netcoreapp1.0": {"imports": ["dotnet5.6","portable-net45+win8"]}},"buildOptions": {"emitEntryPoint": true,"preserveCompilationContext": true},"runtimeOptions": {"configProperties": {"System.GC.Server": true}},"publishOptions": {"include": ["wwwroot","web.config"]},"scripts": {"postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ]}
}

新增了什么？我想补充Asp.NetCore.MVC，Asp.NetCore.StaticFiles，EntityFrameworkCore和NewtonSoft.Json。

public void ConfigureServices(IServiceCollection services)
{services.AddMvc();
}// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{loggerFactory.AddConsole();if (env.IsDevelopment()){app.UseDeveloperExceptionPage();}app.UseMvc();app.UseDefaultFiles();app.UseStaticFiles();
}

从现有数据库创建模型

[Route("api/[controller]")]
public class RecipesController : Controller
{Repository _repository = Repository.Instance;// GET: api/recipes[HttpGet]public IEnumerable<recipe> Get(){return _repository.GetAllRecipes();}
}

现在，从浏览器中，我们测试一下Web API是否正常工作。

using System;
using System.Collections.Generic;
using Newtonsoft.Json;namespace MasterChef2WebApp.Models
{public partial class RecipeStep{public RecipeStep(){RecipeItems = new HashSet<recipeitem>();}public Guid RecipeStepId { get; set; }public Guid RecipeId { get; set; }public int StepNo { get; set; }public string Instructions { get; set; }public virtual ICollection<recipeitem> RecipeItems { get; set; }[JsonIgnore]public virtual Recipe Recipe { get; set; }}
}

RecipeItem 类。

using System;
using Newtonsoft.Json;namespace MasterChef2WebApp.Models
{public partial class RecipeItem{public Guid ItemId { get; set; }public Guid RecipeStepId { get; set; }public string Name { get; set; }public decimal Quantity { get; set; }public string MeasurementUnit { get; set; }[JsonIgnore]public virtual RecipeStep RecipeStep { get; set; }}
}

现在，我们再次运行它以检查Web API，这次一切正常了。

{"compileOnSave": false,"compilerOptions": {"emitDecoratorMetadata": true,"experimentalDecorators": true,"module": "system","moduleResolution": "node","noImplicitAny": false,"noEmitOnError": false,"removeComments": false,"sourceMap": true,"target": "es5"},"exclude": ["node_modules","wwwroot"]
}

该compileOnSave信号指示IDE 在保存时为给定的tsconfig.json生成所有文件。compilerOptions配置将影响智能感知以及我们的外部TypeScript编译器的工作方式。通过排除配置中的文件夹，我们告诉Visual Studio 2015提供的内置TypeScript编译器禁用该位置内的外部TypeScript文件的编译。请注意，我们将使用NPM下载包括Angular2在内的TypeScript包。所有这些软件包都将在node_modules文件夹下。我们不希望Visual Studio编译它们，这就是为什么我们排除node_modules文件夹的原因。

{"version": "1.0.0","name": "asp.net","dependencies": {"@angular/common": "2.0.0","@angular/compiler": "2.0.0","@angular/core": "2.0.0","@angular/forms": "2.0.0","@angular/http": "2.0.0","@angular/platform-browser": "2.0.0","@angular/platform-browser-dynamic": "2.0.0","@angular/router": "3.0.0","@angular/upgrade": "2.0.0","core-js": "^2.4.1","reflect-metadata": "^0.1.8","rxjs": "5.0.0-rc.4","systemjs": "^0.19.41","typings": "^1.3.2","zone.js": "^0.7.2","moment": "^2.17.0"},"devDependencies": {"gulp": "^3.9.1","gulp-clean": "^0.3.2","gulp-concat": "^2.6.1","gulp-less": "^3.3.0","gulp-sourcemaps": "^1.9.1","gulp-typescript": "^3.1.3","gulp-uglify": "^2.0.0","typescript": "^2.0.10"},"scripts": {"postinstall": "typings install dt~core-js --global"}
}

var gulp = require('gulp'),gp_clean = require('gulp-clean'),gp_concat = require('gulp-concat'),gp_less = require('gulp-less'),gp_sourcemaps = require('gulp-sourcemaps'),gp_typescript = require('gulp-typescript'),gp_uglify = require('gulp-uglify');/// Define paths
var srcPaths = {app: ['Scripts/app/main.ts', 'Scripts/app/**/*.ts'],js: ['Scripts/js/**/*.js','node_modules/core-js/client/shim.min.js','node_modules/zone.js/dist/zone.js','node_modules/reflect-metadata/Reflect.js','node_modules/systemjs/dist/system.src.js','node_modules/typescript/lib/typescript.js','node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js','node_modules/moment/moment.js'],js_angular: ['node_modules/@angular/**'],js_rxjs: ['node_modules/rxjs/**']
};var destPaths = {app: 'wwwroot/app/',js: 'wwwroot/js/',js_angular: 'wwwroot/js/@angular/',js_rxjs: 'wwwroot/js/rxjs/'
};// Compile, minify and create sourcemaps all TypeScript files
// and place them to wwwroot/app, together with their js.map files.
gulp.task('app', ['app_clean'], function () {return gulp.src(srcPaths.app).pipe(gp_sourcemaps.init()).pipe(gp_typescript(require('./tsconfig.json').compilerOptions)).pipe(gp_uglify({ mangle: false })).pipe(gp_sourcemaps.write('/')).pipe(gulp.dest(destPaths.app));
});// Delete wwwroot/app contents
gulp.task('app_clean', function () {return gulp.src(destPaths.app + "*", { read: false }).pipe(gp_clean({ force: true }));
});// Copy all JS files from external libraries to wwwroot/js
gulp.task('js', function () {gulp.src(srcPaths.js_angular).pipe(gulp.dest(destPaths.js_angular));gulp.src(srcPaths.js_rxjs).pipe(gulp.dest(destPaths.js_rxjs));return gulp.src(srcPaths.js).pipe(gulp.dest(destPaths.js));
});// Watch specified files and define what to do upon file changes
gulp.task('watch', function () {gulp.watch([srcPaths.app, srcPaths.js], ['app', 'js']);
});// Define the default task so it will launch all other tasks
gulp.task('default', ['app', 'js', 'watch']);

它包含五个任务：

import { Component } from "@angular/core";@Component({selector: 'masterchef2',template: '<h1>Master Chef</h1><div>Best recipes from AngularJS 2.</div>'
})export class AppComponent { }

代码的第一行基本上是从Angular 2库@ angular/core 导入的Component函数。该Component函数是我们需要为类定义组件的元数据。@Component下面的代码块是组件的创建。@Component表示TypeScript指令，该指令告诉Angular此类是Angular组件。注意export关键字，它将允许我们从其他组件导入它。

///<reference path="../../typings/index.d.ts">
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpModule } from "@angular/http";
import "rxjs/Rx";import { AppComponent } from "./app.component";@NgModule({// directives, components, and pipesdeclarations: [AppComponent],// modulesimports: [BrowserModule,HttpModule],// providersproviders: [],bootstrap: [AppComponent]
})
export class AppModule { }

上面配置的第一行添加了对类型定义的引用，以确保我们的TypeScript编译器可以找到它。然后，我们导入应用程序所需的基本Angular2模块。您可以根据需要在此文件中添加更多Angular 2模块引用。我们还导入了rxjs库定义文件，这对编译某些Angular2库很有用。然后，我们导入了组件“AppComponent”。最后，我们声明了根NgModule：正如我们所看到的，它包含一个命名数组数组，每个数组包含一组Angular2对象，这些对象具有共同的用途：指令、组件、管道、模块和提供程序。它们的最后一个包含我们要引导的组件，在本例中为AppComponent文件。

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app.module";platformBrowserDynamic().bootstrapModule(AppModule);

在boot.ts中，我们引用了新的Angular捆绑包，还引用了我们先前创建的新AppModule。

<html>
<head><title>Master Chef2</title><meta name="viewport" content="width=device-width, initial-scale=1"><!-- Step 1. Load libraries --><!-- Polyfill(s) for older browsers --><script src="js/shim.min.js"></script><script src="js/zone.js"></script><script src="js/Reflect.js"></script><script src="js/system.src.js"></script><!-- Angular2 Native Directives --><script src="/js/moment.js"></script><!-- Step 2. Configure SystemJS --><script src="systemjs.config.js"></script><script>System.import('app').catch(function(err){ console.error(err); });</script>
</head>
<!-- Step 3. Display the application -->
<body><!-- Application PlaceHolder --><masterchef2>Please wait...</masterchef2>
</body>
</html>

5）SystemJs文件

(function (global) {System.config({paths: {// paths serve as alias'npm:': 'js/'},// map tells the System loader where to look for thingsmap: {// our app is within the app folderapp: 'app',// angular bundles'@angular/core': 'npm:@angular/core/bundles/core.umd.js','@angular/common': 'npm:@angular/common/bundles/common.umd.js','@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js','@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js','@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js','@angular/http': 'npm:@angular/http/bundles/http.umd.js','@angular/router': 'npm:@angular/router/bundles/router.umd.js','@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',// angular testing umd bundles'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js','@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js','@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js','@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js','@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js','@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js','@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js','@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',// other libraries'rxjs': 'npm:rxjs','angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',},// packages tells the System loader how to load when no filename and/or no extensionpackages: {app: {main: './boot.js',defaultExtension: 'js'},rxjs: {defaultExtension: 'js'},'angular2-in-memory-web-api': {defaultExtension: 'js'}}});
})(this);

6）运行应用程序

export class Recipe {constructor(public Id: string,public Name: string,public Comments: string) { }
}

请注意，在我们的视图模型类中，您不必包含所有属性。您需要包括的是类型脚本中需要的内容。

import { Injectable } from "@angular/core";
import { Http, Response } from "@angular/http";
import { Recipe } from "../viewmodels/recipe";
import { Observable } from "rxjs/Observable";@Injectable()
export class AppService {constructor(private http: Http){ }//URL to web apiprivate recipeUrl = 'api/recipes/';getAllRecipes() {return this.http.get(this.recipeUrl).map(response => response.json()).catch(this.handleError);}private handleError(error: Response) {console.error(error);return Observable.throw(error.json().error || "Server error");}
}

这是一个非常简单的类，只有一个main方法getAllRecipes，它基本上调用了我们之前构建的Recipes Web控制器。

import { Component, OnInit } from "@angular/core";
import { Router } from "@angular/router";
import { Recipe } from "./viewmodels/recipe";
import { AppService } from "./services/app.service";@Component({selector: 'masterchef2',templateUrl: '../partials/recipes.html'
})//export class AppComponent { } export class AppComponent implements OnInit {title: string;items: Recipe[];errorMessage: string;constructor(private appService: AppService) {//called first time before the ngOnInit()//this.title = "Master Chef Favorite Recipes";}ngOnInit() {//called after the constructor and called  after the first ngOnChanges()this.title = "Master Chef Recipes";var service = this.appService.getAllRecipes();service.subscribe(items => this.items = items,error => this.errorMessage = <any>error);}
}

在文件的顶部，我们导入了所需的Angular类：由于我们正在创建Component，因此需要通过引用@angular/core来获得Component基类，并且还需要实现OnInit接口，因为组件需要在初始化时执行某些操作。我们引用了我们先前创建的服务来与服务器通信以获取一些数据。最后，我们导入了配方视图模型以存储值。

<h2>{{title}}</h2>
<ul><li *ngFor="let recipe of items"><p> {{recipe.name}} - {{recipe.comments}}</p><ul><li *ngFor="let step of recipe.recipeSteps"><p> step {{step.stepNo}} : {{step.instructions}}</p><ul><li *ngFor="let item of step.recipeItems"><p> {{item.name}}  {{item.quantity}} {{item.measurementUnit}}</p></li></ul></li></ul></li>
</ul>

请注意，在recipes.html中，绑定AppComponent类中的数据，一个是{{title}}，另一个是{{items}}。这两个属性已在AppComponent类中定义，title是字符串，items是配方视图模型的数组。

///<reference path="../../typings/index.d.ts">
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpModule } from "@angular/http";
import { RouterModule } from "@angular/router";
import { FormsModule } from "@angular/forms";
import "rxjs/Rx";import { AppComponent } from "./app.component";
import { AppService } from "./services/app.service";@NgModule({// directives, components, and pipesdeclarations: [AppComponent,],// modulesimports: [BrowserModule,HttpModule,FormsModule,RouterModule],// providersproviders: [AppService],bootstrap: [AppComponent]
})
export class AppModule { }

启动Master Chef2

{"name": "asp.net","private": true,"dependencies": {"bootstrap": "3.3.7"}
}

恢复完成后，Visual Studio将在 wwwroot\lib 文件夹下安装引导程序。

<link href="lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">

3）在recipes.html中应用bootstrap

<div><h2>{{title}}</h2><div *ngFor="let recipe of items"><div class="btn-group"><button class="btn-outline-info pull-left"><h5>{{recipe.name}} - {{recipe.comments}}</h5></button></div><div *ngFor="let step of recipe.recipeSteps"><div class="row breadcrumb"><span>step {{step.stepNo}} : {{step.instructions}}</span></div><ul><li *ngFor="let item of step.recipeItems"><p> {{item.name}}  {{item.quantity}} {{item.measurementUnit}}</p></li></ul></div></div>
</div>

从IIS Express运行我们的项目。

export class AppComponent implements OnInit {title: string;items: Recipe[];errorMessage: string;show: boolean;constructor(private appService: AppService) {//called first time before the ngOnInit()//this.title = "Master Chef Favorite Recipes";}ngOnInit() {//called after the constructor and called  after the first ngOnChanges()this.title = "Master Chef Recipes";var service = this.appService.getAllRecipes();service.subscribe(items => this.items = items,error => this.errorMessage = <any>error);}public Expand() {this.show = !this.show;}
}

在recipes.html中，我添加了单击事件处理程序以调用扩展功能。

<div class="btn-group"><button class="btn-outline-info pull-left" (click)="Expand()"><h5>{{recipe.name}} - {{recipe.comments}}</h5></button>
</div>

您需要注意两件事。

<div *ngIf="show"><div *ngFor="let step of recipe.recipeSteps"><div class="row breadcrumb"><span>step {{step.stepNo}} : {{step.instructions}}</span></div><ul><li *ngFor="let item of step.recipeItems"><p> {{item.name}}  {{item.quantity}} {{item.measurementUnit}}</p></li></ul></div>
</div>

如何使用示例代码