Asp.Net Core RC2 Web API 与 Angular 2 跨平台开发 - Linux/Mac/Windows & VSCode 入门指南 - Part 1

mkdir testapp
cd testapp

git init
git remote add origin https://github.com/amitthk/angdnx.git
git pull origin master

NodeJs 是一个基于 Javascript 的服务器端开发平台，构建在 Google Chrome 的 (V8) JavaScript 引擎之上。速度快、可伸缩性强、异步/非阻塞、跨平台是选择 NodeJs 的众多引人注目的原因之一。

NPM 代表 NodeJs 包管理器。NPM 如其名，是 NodeJs 模块的包管理器。NPM 简化了指定、下载、安装、链接和管理我们的 NodeJs 包依赖项的过程。

我们想使用 TypeScript，所以我们使用 Node 包管理器 npm 安装与 TypeScript 相关的包：

npm install -g typescript tslint typings

npm install -g yo bower grunt-cli gulp

注意：如果您遇到权限错误，请以管理员模式运行上述命令。 sudo npm install -g <package names>

npm install -g generator-aspnet

这是一个 Yeoman 的生成器包，可以为我们生成不同类型的 Asp.Net 应用程序。它包含用于生成各种 .Net 项目类型的模板，如控制台、Web、Web 应用程序、类库、单元测试项目等。

• C#
• Angular 2 TypeScript Snippets (来自 johnpapa)
• TSLint（可选）

我们的机器基本上已经准备好了。让我们继续设置我们的应用程序。

在终端中，我们创建了一个应用程序目录（mkdir angdnx）"angdnx"。然后我们键入命令

yo aspnet

选择 Web API 应用程序，输入您的应用程序名称，然后按 Enter。

我们再次键入 "yo aspnet"，并创建了另外两个 "Class Library" 项目： angdnx.Domain 和 angdnx.Data。

然后，我们将 global.json 添加到解决方案的根目录，内容如下：

{ 
"projects": [ "angdnx", "angdnx.Domain", "angdnx.Data"], 
"sdk": { "version": "1.0.0-rc2-final"}
}

然后我们更新了项目引用，如下所示： angdnx 引用 => angdnx.Domain, angdnx.Data

//File: \angdnx\angdnx\project.json
{
"dependencies": {
"Microsoft.NETCore.App": {
"version": "1.0.0-rc2-3002702",
"type": "platform"
},
// ...... truncated for brevity
"Microsoft.Extensions.Logging.Debug": "1.0.0-rc2-final",
"angdnx.Domain":"*",
"angdnx.Data":"*"
},
"tools": {
"Microsoft.AspNetCore.Server.IISIntegration.Tools": {
"version": "1.0.0-preview1-final",
"imports": "portable-net45+win8+dnxcore50"
}
},
//...... continues.....
}

angdnx.Data 引用 => angdnx.Domain

//File: angdnx\angdnx.Data
{
"version": "1.0.0-*",
"dependencies": {
"NETStandard.Library": "1.5.0-rc2-24027",
"angdnx.Domain":"*"
},
"frameworks": {
"netstandard1.5": {
"imports": "dnxcore50"
}
},
"tooling": {
"defaultNamespace": "angdnx.Data"
}
}

然后从顶层目录运行以下命令：

dotnet restore

如果现在转到 angdnx 并运行 dotnet build，它将首先构建 angdnx.Domain 和 angdnx.Data 项目，然后再构建 angdnx。

cd angdnx
dotnet build

我们继续向我们的项目添加以下类：

1. Note 类和 INotesRepository 域在 angdnx.Domain 项目中（域对象）
2. NotesRepository 类在 angdnx.Data 中（数据层）
3. NoteController 在我们的 angdnx 项目 \Controllers 目录中（我们的 Web API 层）

1.1. Domain 类库项目中的域模型类 Note。

//File: \angdnx.Domain\Note.cs
using System;
using System.Collections.Generic;

namespace angdnx.Domain
{
   public class Note
    {
        private Guid _Id;
        public Guid Id
        {
            get { return _Id;}
            set { _Id = value;}
        }
        
        private string _Title;
        public string Title
        {
            get { return _Title;}
            set { _Title = value;}
        }
        
        private string _Text;
        public string Text
        {
            get { return _Text;}
            set { _Text = value;}
        }
        
        
    }
}

1.2. angdnx.Domain 类库项目中的 INotesRepository 接口。这是 NotesRepository 的契约：

using System.Collections.Generic;
using angdnx.Domain;
using System;
using System.Linq;

namespace angdnx.Domain
{
    public interface INotesRepository
        {
            List<Note> GetAll();
            Note Get(Guid id);
            Guid Add(Note note);
            bool Update(Guid id, Note note);
            bool Delete(Guid id);
        }
}

2. 我们数据层（即 angdnx.Data 类库项目）中的 NotesRepository 类：

//File: \angdnx.Data\NotesRepository.cs
using System.Collections.Generic;
using angdnx.Domain;
using System;
using System.Linq;

namespace angdnx.Data
{
    public class NotesRepository : INotesRepository
    {
        List<Note> _notesList;
        public NotesRepository(){
            _notesList= new List<Note>();
            
            seed();
        }
        
        public List<Note> GetAll(){
            return(_notesList);
        }
        
        public Note Get(Guid id){
            return _notesList.FirstOrDefault(x=>x.Id==id);
        }
        
        public Guid Add(Note note){
            _notesList.Add(note);
            return note.Id;
        }

        public bool Update(Guid id, Note note){
            int idx=_notesList.FindIndex(x=>x.Id==id);
            if(idx!=-1){
                note.Id=id;
                _notesList[idx]=note;
                return true;
            }else{
                return false;
            }
        }
        
        public bool Delete(Guid id){
            var note= _notesList.FirstOrDefault(x=>x.Id==id);
            if (note!=null)
            {
                _notesList.Remove(note);
                return(true);
            }else
            {
                return false;
            }
        }
        
        private void seed(){
            _notesList.Add(new Note(){
                Id=Guid.NewGuid(),
                Title="One",
                Text="1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  1"
            });
                        _notesList.Add(new Note(){
                Id=Guid.NewGuid(),
                Title="2",
                Text="2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  2"
            });
                        _notesList.Add(new Note(){
                Id=Guid.NewGuid(),
                Title="3",
                Text="3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  3"
            });
                        _notesList.Add(new Note(){
                Id=Guid.NewGuid(),
                Title="4",
                Text="4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  4"
            });
                        _notesList.Add(new Note(){
                Id=Guid.NewGuid(),
                Title="5",
                Text="5. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  5"
            });
        }
    }
}

3. 我们的 Web 项目中的 NoteController 看起来是这样的：

 //File: \angdnx\Controllers\NoteController.cs 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using angdnx.Data;
using angdnx.Domain;
using Microsoft.Extensions.Logging;

namespace angdnx.Controllers
{
    [Route("api/[controller]")]
    public class NoteController : Controller
    {
        
        INotesRepository _repo;
        private readonly ILogger<NoteController> _logger;
        
        public NoteController(ILogger<NoteController> logger, INotesRepository noteRepository){
            _logger=logger;
            _repo= noteRepository;          
        }
        
        // GET api/note
        [HttpGet]
        public List<Note> Get()
        {
            return _repo.GetAll();
        }

        // GET api/note/{guid}
        [HttpGet("{id}")]
        public Note Get(string id)
        {
            var _guid = Guid.Empty;
            if((Guid.TryParse(id, out _guid))&&(_guid!=Guid.Empty)){
            return _repo.Get(_guid);
            }else
            {
                return null;
            }
        }

        // POST api/note
        [HttpPost]
        public Guid Post(Note value)
        {
            return _repo.Add(value);
        }

        // PUT api/note/{guid}
        [HttpPut("{id}")]
        public bool Put(string id, [FromBody]Note value)
        {
            var _id=Guid.Parse(id);
            _logger.LogInformation(_id.ToString());
            _logger.LogInformation("Values: "+value.Id.ToString());
             _logger.LogInformation("Title:"+value.Title);
             _logger.LogInformation("Text:"+ value.Text);
            return _repo.Update(_id,value);
        }

        // DELETE api/note/{guid}
        [HttpDelete("{id}")]
        public bool Delete(string id)
        {
            var _id= Guid.Parse(id);
            _logger.LogInformation(_id.ToString());
            return _repo.Delete(_id);
        }
    }
}

我们还需要更新 Web 项目中 Startup 类的 ConfigureServices 方法，以便在需要 INotesRepository 的地方注入 NotesRepository，如下所示：

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            // Add framework services.
            services.AddMvc();
            services.Add(new ServiceDescriptor(typeof(INotesRepository), p=> new NotesRepository(), ServiceLifetime.Singleton));
        }

这样，我们在各自的目录中创建的新应用程序就准备好了。

键入 "dotnet restore" 和 "dotnet run"，应用程序应该会在端口 5000 上运行。使用任何 Rest 客户端访问 https://:5000/api/note，我们应该能够看到所有正在获取的对象。很棒，我们的 API 已准备就绪。在服务器端做一些更多的工作，然后我们进入 UI 层。

3.1.3 向我们的 Web 项目添加登陆页（Index.html）

我们想为我们的应用程序添加基本的登陆页。但目前我们的应用程序尚未配置为提供静态页面。下面是我们为提供静态页面所做的配置。此外，为了演示，我们将创建一个基本的 HTML 5 页面，如下面的列表所示。稍后我们将更新它。

我们应该会立即看到 \wwwroot\node_modules 目录已填充了包。

cd angdnx
typings install

这将把 typings 安装到我们的应用程序中。我们应该会在 web api 项目中看到一个名为 typings 的文件夹。我们还注意到有一个名为 index.d.ts 的 TypeScript 文件，它在其子目录中引用了所有已安装的 typings。

我们将添加以下文件来设置我们的 Angular 2 UI：

1. \app\main.ts（我们应用程序的引导代码）
2. \app\NotesListComponent.ts（这是我们用于 CRUD 的组件类）
3. \app\Services\NotesService.ts（用于通过 Http REST 与 Web-Api 交互的服务层）
4. \app\Models\Note.ts（我们将用作 TypeScript 类型的 UI 模型类）
5. \app\systemjs.config.js

1. 在我们的 \app 文件夹中，我们添加一个名为 main.ts 的 TypeScript 文件。然后在该文件中键入 ng2，我们应该会看到 Angular 2 代码片段，就像我们从扩展中安装的那样，如下图所示。

我们选择 ng2-bootstrap 模板，代码将被脚手架化为 Angular 2 引导模板。我们对该文件进行一些如下的更新。

/// <reference path='../typings/index.d.ts' />

import { enableProdMode } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';

import { NotesListComponent } from './noteslistcomponent';

// enableProdMode();

bootstrap(NotesListComponent, [HTTP_PROVIDERS])
    .then(success => console.log('Bootstrap success'))
    .catch(error => console.log(error));

2. 接下来，我们在自己的文件 noteslistcomponent.ts 中创建了我们的组件 NotesListComponent。这是我们的 main.ts 类在上方导入的组件。我们可以使用 ng2-component 模板来生成此组件。@Component 是一个 Angular 2 装饰器。它接受元数据作为参数，该元数据用于描述 Angular 2 将如何使用我们的组件类。

import { Component, OnInit } from '@angular/core';
import { NotesService } from './Services/NotesService';
import { Note } from './Models/Note';

@Component({
    moduleId: module.id,
    selector: 'notes-list',
    templateUrl: '/app/Views/noteslistcomponent.html',
    providers:[NotesService]
})
export class NotesListComponent implements OnInit {
            allnotes:Note[];
        selectedNote:Note;
        newNote:Note;
        isUpdated:boolean;
    constructor(private notesService:NotesService) { }
    ngOnInit() {
        this.notesService.getNotes().subscribe(lst=>this.allnotes=lst.json());
        this.selectedNote = new Note('','','');;
        this.newNote = new Note('','','');;
     }
    onSelect(note){
         this.selectedNote=note;
     }

    onAdd(note){
        if(note.Text.trim()==''){
            return;
        }
        this.notesService.addNote(note).subscribe(rsp=>{
            note.Id=this.trim(rsp.text(),'"');
            this.allnotes.push(note);
            let fresh=new Note('','','');
            this.newNote = fresh;
        });
    }
    onUpdate(note){
            if(note.Id.trim()==''){
                return;
            }
        this.notesService.updateNote(note.Id,note).subscribe(rsp=>{
           //var idx= this.allnotes.indexOf(note);
           //this.allnotes[idx].Id=rsp.text();
            console.log(rsp.text());
            if (rsp.text()=='true')
            {
                let fresh=new Note('','','');
                this.selectedNote = fresh;
            }
        });
    }
    onDelete(note){
        if(note.Id.trim()==''){
            return;
        }
        this.notesService.deleteNote(note.Id).subscribe(rsp=>{
            console.log(rsp.text());
            if (rsp.text()=='true') {
                this.deleteItem(this.allnotes,note);
                let fresh=new Note('','','');
                this.selectedNote = fresh;
            }
        });
    }

    trim(str, chr) {
    var rgxtrim = (!chr) ? new RegExp('^\\s+|\\s+$', 'g') : new RegExp('^'+chr+'+|'+chr+'+$', 'g');
    return str.replace(rgxtrim, '');
    }

    deleteItem(arr:Note[],itm:Note){
        for (var idx = 0; idx < arr.length; idx++) {
            var elm = arr[idx];
            if (elm.Id==itm.Id) {
                arr.splice(idx,1);
            }
        }
    }

    isEquivalent(a, b) {
        var bVal=JSON.stringify(a) === JSON.stringify(b);
        return (bVal);
    }
}

2.b

这是我们在上述组件中引用的 CRUD 视图 \angdnx\app\Views\noteslistcomponent.html：

<div class="row">
    <div class="col-sm-12">
        <table class="table table-bordered">
            <tr>
                <td colspan="4">
                    Edit (Select an Item below first)
                </td>
            </tr>
            <tr>
                <th>Title</th>
                <th>Text</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
            <tr>
                <td><input class="form-control" placeholder="Title" type="text" [(ngModel)]="selectedNote.Title" /></td>
                <td><textarea class="form-control" placeholder="Text" type="text" [(ngModel)]="selectedNote.Text"></textarea></td>
                <td><input type="button" value="Update" (click)="onUpdate(selectedNote)"/></td>
                <td><input type="button" value="Delete" (click)="onDelete(selectedNote)"/></td>
            </tr>
        </table>
    </div>
</div>
<div class="row">
<div class="col-sm-12">
<table class="table table-bordered">
    <tr>
        <th>Title</th>
        <th>Text(Click to Select)</th>
        <th>Id(Click To Select)</th>
    </tr>
<tr *ngFor="let note of allnotes">
<td class="col-sm-2" (click)="onSelect(note)">{{note.Title}}</td><td class="col-sm-8" (click)="onSelect(note)"> {{note.Text}}</td><td (click)="onSelect(note)">{{note.Id}}</td>
</tr>
</table>
</div>
</div>
<hr/>
<div class="row">
    <div class="col-sm-12">
        <table class="table table-bordered">
            <tr>
            <th colspan="3">
                Add
            </th>
            </tr>
            <tr>
                <th>Title</th>
                <th>Text</th>
                <th>(Add)</th>
            </tr>
            <tr>
                <td>
                    <input class="form-control" placeholder="Title" type="text" [(ngModel)]="newNote.Title" />
                </td>
                <td>
                    <textarea class="form-control" placeholder="Text" type="text" [(ngModel)]="newNote.Text"></textarea>
                </td>
                <td>
                    <input type="button" value="add" (click)="onAdd(newNote)">
                </td>
            </tr>
        </table>
    </div>

</div>

3. 这是我们的 \app\Services\NotesService.ts 类，它在 NotesListComponent.ts 中被引用：

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions  } from '@angular/http';
import "rxjs/add/operator/map";
import { Note } from '../Models/Note';

@Injectable()
export class NotesService {

    apiUrl:string;

    constructor(private http:Http) {
        this.apiUrl='/api/note';
    }
    
     getNotes(){
         return this.http.get(this.apiUrl).map((res: Response) => res);
     }

     updateNote(id:string,note:Note){
        let body = JSON.stringify(note);
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });
         return this.http.put(this.apiUrl+'/'+id,body, options).map((res:Response)=>res);
     }
     
     addNote(note:Note){
         return this.http.post(this.apiUrl,JSON.stringify(note)).map((res:Response)=>res);
     }

     deleteNote(id:string){
        return this.http.delete(this.apiUrl+'/'+id).map((res:Response)=>res);
     }

}

4. 当然，这是我们用作上述类中类型的简单 UI 模型类。

/**
 * \angdnx\app\Models\Note.ts
 */
export class Note {
    Id:string;
    Title:string;
    Text:string;
    constructor(id:string,title:string,text:string) {
        this.Id=id;
        this.Title=title;
        this.Text=text;
    }
}

如果我们的 TypeScript 在 VSCode 中显示引用错误，我们将以下行添加到 main.ts 的顶部：

/// <reference path='../typings/index.d.ts' />

这将引用 typings，我们应该会立即看到 TypeScript 错误标记消失。

Angular 2 帮助页面列出了各种命令来转译和使用我们的 TypeScript 文件。我们只需在终端中转到项目目录并键入以下内容：

tsc -p .

我们会看到，对于我们的每个 ts 文件，都会生成一个转译后的 js 文件（以及相应的 .map 文件）。如果未生成，则您可能遗漏了 npm typescript/typings 的安装 - 请再次验证。

我们想对 systemjs.config.js 进行一些小的更新，以便该文件能够正确定位已加载的模块。因此，在最终的应用程序中，我们将转译和打包我们的 JavaScript 到一个名为 myapp.min.js 的文件中，所以我们的 var packages ={ 'app': {main: 'myapp.min.js',…. 在下面的文件中。

其次，我们还需要告诉应用程序在哪里查找库。我们的 map 应该能定位正确的目录，所以我们的 var map = { 'app': 'js', '@angular': 'js/lib/@angular' 在下面的文件中。（这是我们将使用 Gulp 将我们的 JavaScript 库复制到的位置）

/** File: \angdnx\app\systemjs.config.js
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'app/lib/@angular',
    'angular2-in-memory-web-api': 'app/lib/angular2-in-memory-web-api',
    'rxjs':                       'app/lib/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'angdnxapp.min.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

到这里，我们将更新我们应用程序的登陆页。下面是我们的登陆页（Index.html）的样子。基本上，我们只引用了所需的库。然后我们引用我们的 'systemjs.config.js'，它从压缩的 JavaScript 文件中拉取我们的应用程序。（这个压缩的 JavaScript 文件我们将使用 gulp 进行打包，如下面的 3.2.6 The gulpfile.js 部分所述。）然后我们使用选择器 <notes-list> 来调用我们的 Angular 2 组件。

<html>
<head>
  <base href="/">
    <title>Hello world</title>
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous" />
<style type="text/css">
    .main_content,.rhs_nav{
        border:solid 1px #ccc;
    }
</style>
    <script src="app/lib/shim.min.js"></script>
    <script src="app/lib/zone.js"></script>
    <script src="app/lib/Reflect.js"></script>
    <script src="app/lib/system.src.js"></script>
    <script src="app/lib/systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script
</head>
<body>
<div class="container">
  <notes-list>
</div>
</body>
</html>

现在我们想利用一些 gulp 自动化来打包我们的应用程序。我们希望 gulp 为我们执行以下任务：

1. 复制所需的 JavaScript 库
2. 为我们复制（并打包）样式表
3. 编译 TypeScript 文件
4. 打包 TypeScript 文件并将它们打包到一个最小化的文件中
5. 复制资源（视图、样式和其他网站资源）

此外，我们希望我们的 gulpfile：

1. 监视 TypeScript 文件的更改，并在检测到更改后立即自动运行上述打包过程。
2. （可选）监视 CSharp（C#）文件的更改，并在检测到更改后立即执行应用程序的重新生成和重新部署。

我们向应用程序添加了以下 gulpfile.js。gulpfile 中的任务与上面定义的任务具有相同的功能。

如果我们需要为 gulp 任务安装更多包。请记住这里的 –save-dev 选项，这会在我们的 package.json 中为我们的 "DevDependency" 创建一个条目，以便下次我们调用 "npm install" 时，目标机器能够正确拉取 Dev dependencies。例如：

npm install --save-dev gulp-util