65.9K
CodeProject 正在变化。 阅读更多。
Home

使用CLI和Visual Studio Code集成ASP.Net Core 2.0和Angular 4项目 - 初学者教程

@sof-mckoy
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.94/5 (15投票s)

2017年9月17日

CPOL

7分钟阅读

viewsIcon

67337

逐步教程，介绍如何集成使用 angular-cli 和 dotnet-cli 创建的项目

目录

引言

如今，单体式框架已成为过去。最新的框架倾向于模块化。ASP.Net Core是ASP.Net的重写，但更加模块化，Angular 4（2）与AngularJS一样。

这些现代框架提供了CLI（命令行界面）工具，为开发人员提供了更多开发下一代应用程序的选择。CLI工具使开发人员可以自由地在任何操作系统上工作。显而易见，GUI工具并非在所有主要操作系统上都可用。最好的例子就是Visual Studio，它只在Windows上运行，最近才在Mac上运行。

使用Angular和ASP.NET Core Web API创建SPA（单页应用程序）项目的一种方法是使用Visual Studio模板。尽管这种方法很方便，但您依赖于由某些可能不是框架开发人员一部分的人创建和更新的模板。

本教程是为那些听说过并对Angular和ASP.NET Core日益增长的受欢迎程度感到好奇但又不知道如何开始的开发人员提供的入门指南。

您将学到什么

  1. 如何使用Angular CLI创建Angular项目
  2. 如何使用Dotnet Core CLI创建ASP.Net Core Wep API
  3. 如何集成这两个项目
  4. 如何安装，更新和使用最新的CLI

环境

本教程适用于Microsoft Windows，但除了安装部分外，它还可以作为其他操作系统的指南。

  • Microsoft Windows 10 Version 1703, 64位（在此版本上创建）

关键步骤

以下是关键步骤

  1. 下载并安装SDK
  2. 下载并安装Visual Studio Code
  3. 更新npm
  4. 安装 Angular CLI
  5. 检查版本
  6. 创建Angular项目（真正的工作从这里开始）
  7. 创建ASP.Net Core Web API项目
  8. 集成项目

步骤1：下载并安装SDK

请注意，每个操作系统的安装过程都不同。本教程不包括SDK的分步安装。屏幕截图是在Windows上执行安装程序后的第一个窗口。

下载并安装SDK

  1. .NET Core 2.0 SDK
  2. Node.js SDK

 

  • .Net Core 2.0

下载 .NET Core 2.0 SDK 安装程序。

https://www.microsoft.com/net/download/core

安装下载的安装程序。

.NET Core SDK Installer

  • Node.js

下载 Node.js SDK 安装程序。

下载当前版本以获取最新功能。

Node.js SDK Installer

安装下载的安装程序。

Install Node.js

步骤2：下载并安装Visual Studio Code

使用Microsoft Visual Studio Code（VS Code）作为GUI工具，IDE（集成开发环境）进行开发。

下载 Microsoft Visual Studio Code 安装程序。

安装。安装下载的安装程序。

 

步骤3.更新npm

Node.js安装程序默认安装npm，但可能不是最新版本。

以管理员身份从命令行更新npm。请按照此处的指南了解如何以管理员身份运行命令行（cmd.exe）。

Update Node Package Manager Image

请勿关闭命令行，因为它将在后续步骤中使用。

解释

cd\
   - 将目录从当前路径更改为根路径。在上图的屏幕截图中，C:是根路径。

npm update -g npm
   - 更新全局（-g）安装的Node包管理器（NPM）

步骤4.安装Angular CLI

从命令行安装angular cli。

 Install Angular CLI image

解释

npm install -g @angular/cli

   - 使用npm，angular cli是全局安装的。

步骤5.检查版本（可选）

此时，检查已安装的SDK/CLI版本。

解释

dotnet --version
   - 显示.NET Core SDK版本

node -v
  - 显示Node.js版本

npm -v
  - 显示NPM版本

ng -v
  - 显示Angular CLI版本

步骤6.创建Angular项目（真正的工作从这里开始）

使用Angular（ng）CLI创建Angular项目。

解释

cd projects
   - 将当前路径更改为当前路径下的“projects”文件夹。这是为了将项目组织到一个文件夹中
ng new hello-world
   - 使用Angular（ng）CLI，在当前路径下创建一个名为“hello-world”的文件夹，并添加同名的Angular项目
   - 从命令行发出“ng new hello-word & cd new hello-world”将在创建项目后立即将当前路径更改为“hello-world”

运行新创建的Angular项目。

解释

cd hello-world
   - 将当前路径更改为当前路径下的“hello-world”文件夹

ng server --open
   - “ng serve”构建应用程序并启动Web服务器
   - “--open”在成功构建并启动Web服务器后打开Web浏览器。有关其他选项，请参阅此处。如果不使用“--open”选项，您可以通过在Web浏览器中打开“https://:4200”作为URL来查看输出。

创建的网页将在Web浏览器中显示。

通过发出“ctrt + c”终止Web服务器，然后按“Y”然后“Enter”。

步骤7.创建ASP.Net Core Web API项目

虽然接下来的过程仍然可以使用命令行执行，但这次将使用VS Code。事实上，之前在命令行中完成的所有Angular命令也可以在VS Code中执行。我更喜欢在VS Code中工作，以避免在打开的窗口之间切换。

使用命令行在VS Code中打开项目（第一种方式）

解释

code .

   - 在VS Code中打开当前文件夹

在VS Code中打开项目（第二种方式）

运行VS Code后，通过从菜单中单击“文件-打开文件夹...”来选择项目文件夹。

通过从菜单中单击“视图-集成终端”或使用键盘快捷键“Ctrl + ~”来显示VS Code中的集成终端（命令行）。这解释了为什么所有内容都可以在VS Code中执行。

从终端（集成命令行）创建新的ASP.NET Core Web API项目。

解释

dotnet new webapi

   - 使用DotNet CLI，创建一个新的Web API项目。如果不指定选项，Dotnet CLI将创建一个名称与发出“new”命令的文件夹同名的项目。有关其他信息，请参阅此链接。

在VS Code显示的弹出消息中选择“是”和“还原”。将添加设置以在单击“是”后启用调试。请注意，调试是本教程的包含主题，因此您选择哪个选项并不重要。单击“还原”将还原ASP.NET Core Web API所需的依赖项或库。

注意侧边栏中已添加“hello-world.csproj”。那是新添加的ASP.NET Core Web API项目。如果未显示侧边栏，请从菜单中单击“视图-切换侧边栏”以显示/隐藏它，或者如果您喜欢键盘快捷键，请按“Ctrl + B”。

此时，存在两个项目：现有的Angular项目和新添加的ASP.NET Core Web API项目。尽管项目位于同一文件夹中，但目前它们之间没有任何关系。

构建并运行新创建的ASP.NET Core Web API项目。

在Web浏览器中打开“https://:5000/api/values”作为URL。请确保将“/api/values”添加到URL，因为这是新创建的Web API的默认路由。

在集成终端中按“Ctrl + C”终止Web服务器。

步骤8.集成项目

打开“.angular-cli.json”并在“apps”下将“outDir”更改为“wwwroot”。这告诉Angular CLI将编译输出文件保存到DotNet CLI输出的同一文件夹中。

从“Controllers”文件夹中删除“ValuesController.cs”，并用一个简单的Web API替换它，该API只返回一个简单的“hello”问候。

在“Controllers”文件夹内创建“HelloController.cs”。右键单击“Controllers”文件夹，然后单击“新建文件”。将文件命名为“HelloContoller.cs”。

粘贴以下代码。

[Controllers\HelloController.cs]

using System;
using Microsoft.AspNetCore.Mvc;

namespace hello_world
{
    [Route("api/[Controller]")]
    public class HelloController : Controller
    {
        [HttpGet]
        public IActionResult Greetings() {
            return Ok("Hello from ASP.NET Core Web API.");
        }
    }
}

修改Startup.cs，在HTTP请求管道中包含“UseDefaultFiles”和“UseStaticFiles”。

使用“UseDefaultFiles”，对文件夹的请求将搜索

  • default.htm
  • default.html
  • index.htm
  • index.html

“UseStaticFiles”使Web根目录（默认为wwwroot）中的文件可供服务。

有关UseDefaultFiles”和“UseStaticFiles”的更多信息，请参阅此链接。

此时，我们在Web API项目上的工作已完成。让我们回到Angular并从Angular消耗Web API。

在“src\app”文件夹内创建一个新文件“app.service.ts”，然后粘贴以下代码。

[src\app\app.service.ts]

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';

// Import RxJs required methods
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class AppService {
    private greetUrl = 'api/Hello';

    // Resolve HTTP using the constructor
    constructor(private _http: Http) { }

    sayHello(): Observable<any> {
        return this._http.get(this.greetUrl).map((response: Response) => {
            return response.text();
        });
    }
}

修改“app.module.ts”并将“AppService”添加为providers。然后导入“HttpModule”。

[src\app\app.module.ts]

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

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

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

修改“app.component.ts”以注入“AppService”。

[src\app\app.component.ts]

import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';

import { AppService } from './app.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  greetings = '';

  constructor(private _appService: AppService) { }

  ngOnInit(): void {
    this._appService.sayHello()
      .subscribe(
      result => {
        this.greetings = result;
      }
      );
  }
}

更改“app.component.html”的内容。

[src\app\app.component.html]

<h2 class='panel-heading'>
  {{greetings}}
</h2>
<hr/>

构建Angular。

构建DotNet。

运行DotNet。

在“https://:5000/”打开Web浏览器。请注意，“api/*”未包含在URL中。页面加载时，Angular首先加载，然后Web API在Angular内部被消耗，从而显示问候语。

就是这样。

接下来呢？

我们已经学会了如何使用各自的CLI创建Angular和DotNet项目。我们还能够集成这两个项目。这意味着我们现在能够充分利用两个完全不同框架的CLI的优势。那么，下一步是什么？

1.在此处学习ASP.Net Core Web API。

2.在此处学习Angular。

历史

09/16/2017 - 初始创建

09/17/2017 - 修复损坏的图像

© . All rights reserved.