使用EF Core和AngularJS的Master Chef（第3部分）ASP.NET Core MVC

{
  "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 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();
        }

        public Guid RecipeStepId { get; set; }
        public Guid RecipeId { get; set; }
        public int StepNo { get; set; }
        public string Instructions { get; set; }

        public virtual ICollection 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: '

Master Chef
Best recipes from AngularJS 2.
'
})
 export class AppComponent { }

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

///
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 pipes
    declarations: [
        AppComponent
    ],
    // modules
    imports: [
        BrowserModule,
        HttpModule
    ],
    // providers
    providers: [
    ],
    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。

    Master Chef2
    

    
    
    
    
    
    

    
    

    
    
    
      System.import('app').catch(function(err){ console.error(err); });
    



    
    Please wait...

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'js/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: '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 extension
        packages: {
            app: {
                main: './boot.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular2-in-memory-web-api': {
                defaultExtension: 'js'
            }
        }
    });
})(this);

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 api
    private 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 = error
        );
    }
}

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

{{title}}

    

        
 {{recipe.name}} - {{recipe.comments}}
        

            

                
 step {{step.stepNo}} : {{step.instructions}}
                

                    

                        
 {{item.name}}  {{item.quantity}} {{item.measurementUnit}}
                    
                
            
        
    

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

///
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 pipes
    declarations: [
        AppComponent,
    ],
    // modules
    imports: [
        BrowserModule,
        HttpModule,
        FormsModule,
        RouterModule

    ],
    // providers
    providers: [
        AppService
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule { }

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

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

    {{title}}

    

        

            {{recipe.name}} - {{recipe.comments}}
        

        

            

                step {{step.stepNo}} : {{step.instructions}}
            
            

                

                    
 {{item.name}}  {{item.quantity}} {{item.measurementUnit}}
                
            
        
    

从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 = error
        );
    }

    public Expand() {
        this.show = !this.show;
    }
}

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

            {{recipe.name}} - {{recipe.comments}}

您需要注意两件事。

    

        

            step {{step.stepNo}} : {{step.instructions}}
        
        

            

                
 {{item.name}}  {{item.quantity}} {{item.measurementUnit}}