在Visual Studio 2017中使用Asp.Net Core構(gòu)建Angular4應(yīng)用程序

發(fā)布時(shí)間：2017年07月11日作者： IT網(wǎng)絡(luò)文摘 (該文來(lái)自筆記，點(diǎn)擊查看原文)

前言

Visual Studio 2017已經(jīng)發(fā)布了很久了。做為集成了Asp.Net Core 1.1的地表最強(qiáng)IDE工具，越來(lái)越受.NET系的開(kāi)發(fā)人員追捧。

隨著Google Angular4的發(fā)布。我一直在想，怎么能夠用這個(gè)地表最強(qiáng)IDE工具編寫(xiě)Angular4的Asp.Net Core項(xiàng)目。經(jīng)過(guò)不懈的研究。終于的得到了一套很好的解決方案與大家分享。

文章轉(zhuǎn)載請(qǐng)著名出處：http://www.cnblogs.com/smallprogram

我們的目的

隨著Web技術(shù)的快速發(fā)展，新的技術(shù)層出不窮，這使得Web程序的用戶體驗(yàn)不斷提升。最具代表性的就是SPA(Single Page Application)應(yīng)用。

技術(shù)的快速發(fā)展也有弊端，那就是學(xué)習(xí)成本的不斷提升。作為一名開(kāi)發(fā)人員，你需要不斷學(xué)習(xí)、提升自己的技術(shù)以適應(yīng)這個(gè)技術(shù)快速發(fā)展的時(shí)代，以讓自己不在這個(gè)技術(shù)快速發(fā)展的洪流中所淘汰。

當(dāng)然，我們的老大Microsoft也是如此，借著Asp.Net Core的機(jī)會(huì)，發(fā)布了好幾款集成目前流行的前端框架的Asp.Net Core的模板。文章后邊我就具體描述以一下。

你需要知道的東西

你需要明白的東西

1. NodeJS,這是一個(gè)基于Chrome V8 JavaScript引擎構(gòu)建的JavaScript運(yùn)行時(shí)的庫(kù)，NPM就包含在NodeJS中，他具有強(qiáng)大的生態(tài)系統(tǒng)。

2. NPM包管理器，是Node包生態(tài)系統(tǒng)的管理器?？梢允褂盟惭bAngular所有的包以及依賴包。

2. DotNet CLI，這是微軟提供的命令行接口工具。用于開(kāi)發(fā)跨平臺(tái).NET程序的工具鏈。如果你安裝了VS2017,默認(rèn)應(yīng)該已經(jīng)安裝DotNetCLI工具。

3. AngularCLI，這是Angular官方發(fā)布的AngularCLI工具，可以使用他對(duì)Angular進(jìn)行新建、編譯、運(yùn)行等操作。

4. Asp.Net Core，這是微軟推出的跨平臺(tái)Web應(yīng)用程序。功能強(qiáng)大。官方文檔非常完善。

5. TypeScript，這是一種類型化的JavaScript，可以通過(guò)他編譯生成Javascript，Angular就是基于TypeScript的。

6. RESTful API，這是一個(gè)很火熱的Web應(yīng)用程序API的設(shè)計(jì)理念。微軟官網(wǎng)也寫(xiě)過(guò)一篇關(guān)于RESTful的文章，但實(shí)在太老了。于是用aisuhua的GitHub代替了

你需要了解的東西

1. 翻GFW，根據(jù)我國(guó)國(guó)情需要，GFW是“必須要有的”，這無(wú)可厚非。但是帶來(lái)的問(wèn)題就是開(kāi)發(fā)人員的一手資料被屏蔽。所以你應(yīng)該了解怎么翻GFW。

2. 國(guó)內(nèi)NPM源，之后會(huì)細(xì)說(shuō)。

3. WebPack，這是一個(gè)現(xiàn)代化的JavaScript模塊打包器。具體內(nèi)容可以去官網(wǎng)了解

也許有一些沒(méi)有接觸過(guò)以上提到的這些工具或知識(shí)的童鞋可能會(huì)一臉懵逼，但是不用擔(dān)心也不用著急，本文會(huì)用最淺顯易懂的方式告訴你如何配置。

微軟SPA模板(不在本文討論范圍)

先說(shuō)說(shuō)老大Microsoft的模板。

想要安裝微軟官方提供的模板，我們就需要用到dotnet CLI工具了。這套模板是由微軟Steve Sanderson提出并研發(fā)的。關(guān)于史蒂夫·桑德森，從2010年到現(xiàn)在，在微軟從事Web技術(shù)工作。并且最先加入到Asp.Net MVC3的技術(shù)團(tuán)隊(duì)。構(gòu)建了一系列JavaScript庫(kù)以及Azure的門(mén)戶網(wǎng)站。我們所熟知的Knockout.js就是這個(gè)人主導(dǎo)開(kāi)發(fā)的。可以說(shuō)是絕對(duì)的.Net技術(shù)大牛。

附上一張他的照片，還有他的Twitter。有玩Twitter的可以Follow他

回到正題，想要安裝這個(gè)模板，你就需要使用DotNet CLI工具了。具體命令如下：

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

當(dāng)你使用CMD或Powershell運(yùn)行后會(huì)得到一下結(jié)果：

可以看到微軟很給力，給我提供了好多模板。有Angular的，有Knockout的，有Aurelia的，有React的，有Vue的?？梢哉f(shuō)，非常全面。

可以使用如下DotNetCLI命令根據(jù)模板新建項(xiàng)目。

dotnet new angular

如果你了解dotnet CLI，你就會(huì)明白，這條命名的意義就是從當(dāng)前目錄使用MVC ASP.NET Core with Angular創(chuàng)建一個(gè)Asp.Net Core的項(xiàng)目。

新建成功后，使用如下命令還原.NET依賴包和Angular依賴包：

dotnet restore
npm install

完成之后你就可以運(yùn)行程序，查看效果：

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計(jì)算培訓(xùn),高端軟件開(kāi)發(fā)培訓(xùn),項(xiàng)目經(jīng)理培訓(xùn)

你不妨可以試試看，期間你可能需要一個(gè)高速VPN，否則你在執(zhí)行npm install命令時(shí)，可能會(huì)有很多Angular的包安裝不上。

有人會(huì)說(shuō)，為啥我們不直接用微軟的模板反而要自己去構(gòu)建Asp.Net Core+Angular的應(yīng)用程序呢。

其實(shí)原因很簡(jiǎn)單，微軟一如既往的作風(fēng)就是高度集成高度封裝。他所提供的這些模板中，集成Server-side prerendering(服務(wù)端渲染)，WebPack dev middleware，Hot Module Replacement(模塊熱插拔)等等技術(shù)。最后再加上Angular。

如果你對(duì)這些技術(shù)了解程度不夠，很難做到高度擴(kuò)展。例如添加新的npm包也會(huì)有可能引起一些莫名其妙的異常。所以，我們才要自己去構(gòu)建集成Angular的Asp.Net Core的應(yīng)用程序。

有興趣的童鞋可以自己去嘗試一下。

讓我們開(kāi)始把

1.新建一個(gè)Asp.Net Core項(xiàng)目

打開(kāi)宇宙最強(qiáng)IDE，Visual Studio 2017，新建一個(gè)Asp.Net Core項(xiàng)目。并且取個(gè)名字，比如AspNetCoreWithAngular4：

之后我們創(chuàng)建一個(gè)空的Asp.Net Core 程序，我是用的版本是1.1

2. 配置我們的Asp.Net Core

這一步，我們需要配置一些Core的依賴包，并且設(shè)置Core在VS重構(gòu)時(shí)MSBuild不去編譯Typescript文件，因?yàn)槲覀円褂闷渌ぞ呷ゾ幾gTypescript文件。

直接打開(kāi)csproj文件：

添加如下代碼：

代碼：

<PackageReference Include="Microsoft.AspNetCore.Mvc" Version="1.1.3" />

<PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="1.1.2" />

在我們的項(xiàng)目中，Microsoft.AspNetCore.Mvc包能夠允許我們添加控制器并且構(gòu)建WebAPI，而Microsoft.AspNetCore.StaticFiles包可以讓我們配置提供靜態(tài)目錄訪問(wèn)的功能。例如默認(rèn)提供/wwwroot目錄的訪問(wèn)。

因?yàn)槲覀儠?huì)使用其他工具去編譯Typescript文件，所以需要在PropertyGroup節(jié)點(diǎn)中配置

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

保存csproj文件后，VS2017會(huì)自動(dòng)下載相關(guān)包。如果你在MacOS或者Linux環(huán)境，請(qǐng)使用dotnet restore命令還原包。

3. 配置Startup.cs文件

首先在ConfigServives方法中添加MVC服務(wù)：

services.AddMvc();

如果VS出現(xiàn)紅色波浪線，你需要關(guān)閉項(xiàng)目，重新打開(kāi)項(xiàng)目即可。

之后，刪除Configure方法中的所有代碼，使用如下代碼替換：

app.Use(async (context, next) => {    await next();    if (context.Response.StatusCode == 404 &&
       !System.IO.Path.HasExtension(context.Request.Path.Value) &&
       !context.Request.Path.Value.StartsWith("/api/"))
    {
        context.Request.Path = "/index.html";        await next();
    }
});

app.UseMvcWithDefaultRoute();

app.UseDefaultFiles();
app.UseStaticFiles();

這里簡(jiǎn)單說(shuō)一下，首先第一個(gè)app.Use中間件的作用是當(dāng)系統(tǒng)返回404狀態(tài)碼并且訪問(wèn)的Request不包含文件擴(kuò)展名并且訪問(wèn)Request不是以“/api/”開(kāi)頭的訪問(wèn)直接將其跳轉(zhuǎn)到/index.html

app.UseMvcWithDefaultRoute()的意思是使用MVC的默認(rèn)路由中間件。

app.UseDefaultFiles()的意思是啟用默認(rèn)文檔提供器中間件，他會(huì)對(duì)只有主機(jī)的URL進(jìn)行訪問(wèn)時(shí)搜索default.html、default.htm、index.html、index.htm文件，如果有就返回內(nèi)容。

app.UseStaticFiles()的意思啟用程序的靜態(tài)文件支持，也就是啟用wwwroot文件夾可以通過(guò)URL訪問(wèn)。

4. 創(chuàng)建一個(gè)APIController

在根目錄中創(chuàng)建一個(gè)Controllers的文件夾，當(dāng)然直接在根目錄創(chuàng)建一個(gè)WebAPIController也可以。

這里簡(jiǎn)單說(shuō)一下，VS2017 15.2(26430.14)這個(gè)版本有一個(gè)小bug，就是當(dāng)你使用MVC腳手架功能的時(shí)候，比如上圖的新建中的“控制器”，亦或者在Controller的Action中使用右鍵新建視圖的功能時(shí)，中文會(huì)出現(xiàn)亂碼。所以我推薦大家直接使用“新建項(xiàng)”，放棄使用腳手架功能。當(dāng)然在目前的項(xiàng)目中涉及不到上述問(wèn)題。

創(chuàng)建一個(gè)默認(rèn)的ValuesController

讓我們來(lái)修改一下ValuesController中Get方法的返回值：

public IEnumerable<string> Get()
 {     return new string[] { "Hello Angular4", "Hello Asp.Net Core 1.1" };
 }

創(chuàng)建一個(gè)Angular4的應(yīng)用程序

我們的Asp.Net Core服務(wù)器已經(jīng)構(gòu)建完成了?，F(xiàn)在讓我們來(lái)向項(xiàng)目中添加Angular

1. 在項(xiàng)目位置中打開(kāi)CMD或PowerShell命令行工具

以PowerShell為例，輸如如下命令，導(dǎo)航到項(xiàng)目所在目錄：

PS C:\WINDOWS\system32> cd F:\Code\TFSProject\GitHub\AspNetCoreWithAngular4\AspNetCoreWithAngular4\AspNetCoreWithAngular 4

我的這個(gè)路徑有點(diǎn)長(zhǎng)，當(dāng)人如果你覺(jué)得麻煩，可以安裝一個(gè)小插件。他可以直接從項(xiàng)目根目錄打開(kāi)命令行工具。插件的名字是：

Open Command Line，你可以通過(guò)Visual Studio Marketplace下載安裝。安裝好之后，你就可以通過(guò)如下方式直接在根目錄打開(kāi)命令行工具了：

也許有人會(huì)問(wèn)，為什么不用VS的PowerShell Interactive Window,我只想說(shuō)我不喜歡他的界面。

2. 全局安裝AngularCLI

如果你的機(jī)器上沒(méi)有安裝nodeJS，你需要去官網(wǎng)下載nodeJS進(jìn)行安裝，根據(jù)你的系統(tǒng)下載相應(yīng)的安裝包。node會(huì)有兩個(gè)版本可供下載。一個(gè)是LTS版本，也就是通常我們所說(shuō)的穩(wěn)定版，另一種是Current版本，就是嘗鮮版。有新的功能。當(dāng)然我推薦安裝穩(wěn)定版。

安裝成功之后，我們需要處理的下一個(gè)問(wèn)題就是GFW的問(wèn)題。眾所周知，node的資源鏡像是在GFW禁止訪問(wèn)的黑名單URL列表中。這就導(dǎo)致你可能在使用node的NPM包管理器安裝AngularCLI的過(guò)程出現(xiàn)問(wèn)題。不過(guò)馬云家的淘寶已經(jīng)有了很好的解決方案，那就是國(guó)內(nèi)NPM數(shù)據(jù)鏡像。

提到國(guó)內(nèi)NPM數(shù)據(jù)鏡像，淘寶建立自己的NPM數(shù)據(jù)鏡像，他們的數(shù)據(jù)鏡像與NPM官網(wǎng)的數(shù)據(jù)鏡像是同步的，時(shí)間差大約在10分左右。

因?yàn)槭窃趪?guó)內(nèi)，所以不會(huì)受到GFW的影響。我們需要做的就是更改NPM包管理器的鏡像地址，在我們的剛剛的PowerShell中使用如下命令：

npm config set registry https://registry.npm.taobao.org

當(dāng)你替換之后，在不使用VPN或代理的情況下，通過(guò)NPM安裝包就會(huì)速度很快了。

但是我要闡述一點(diǎn)，當(dāng)我們安裝AngularCLI的時(shí)候，其中有一個(gè)依賴項(xiàng)為node-sass，他的指定訪問(wèn)一個(gè)https://github.com/sass/node-sass/releases/download/v4.5.3/win32-x64-57_binding.node地址去下載，該地址是被GFW屏蔽的。所以就算我們使用國(guó)內(nèi)NPM鏡像，也會(huì)出現(xiàn)問(wèn)題。

當(dāng)然最好的解決方案是設(shè)置NPM為原始鏡像地址，然以掛上高速VPN，去安裝AngularCLI。

也許你本的網(wǎng)絡(luò)很好，你也可以嘗試使用淘寶NPM鏡像，但是不要開(kāi)VPN，那樣會(huì)很慢。

就像我家和我單位的網(wǎng)。都是淘寶NPM鏡像，單位安裝AngularCLI一點(diǎn)問(wèn)題沒(méi)有，但是家里就出現(xiàn)了我上面說(shuō)的node-sass下載不下來(lái)的問(wèn)題了。

替換完淘寶NPM鏡像之后，那么讓我們繼續(xù)，使用如下命令全局安裝AngularCLI，注意這個(gè)只需要安裝一次即可：

npm install –g @angular/cli

其中npm install是NPM安裝的意思。
-g是全局安裝的意思，是-global的簡(jiǎn)寫(xiě)
@angular/cli就是告訴NPM我們要安裝AngularCLI

執(zhí)行后就是慢慢等待他完成吧。

如果安裝失敗，你需要執(zhí)行一下命令，卸載AngularCLI：

npm uninstall –g @angular/cli
npm cache clean --force

并刪除“C:\Users\[你用系統(tǒng)賬戶名]\AppData\Roaming\npm\node_modules”目錄下的@angular文件夾，重復(fù)上面的安裝步驟。

安裝成功之后你會(huì)看到如下界面：

OK，通過(guò)上述操作，我們已經(jīng)在系統(tǒng)上安裝完成了AngularCLI。

3. 在Asp.NET Core 中安裝Angular

現(xiàn)在回到之前的項(xiàng)目路徑：

運(yùn)行如下命令，在項(xiàng)目根目錄中新建一個(gè)Angular項(xiàng)目：

ng new [你的Angular項(xiàng)目名稱] --skip-install

解析一下這條命令：

ng new是AngularCLI的新建命令
--skip-install是npm的跳過(guò)還原包命令
作用就是在當(dāng)前目錄下新建一個(gè)Angular項(xiàng)目并且跳過(guò)還原包

大神別嫌我啰嗦。我要照顧一下新手。

OK，運(yùn)行之后的結(jié)果：

4. 目錄調(diào)整

回到VS，你會(huì)發(fā)現(xiàn)，目錄中多了一個(gè)Angular的目錄：

這就是剛剛我們使用AngularCLI安裝后的文件。

讓我們調(diào)整一下目錄結(jié)構(gòu)，已使Angular能更好的集成到Core中：

將Angular文件夾下的所有文件拖拽到系統(tǒng)根目錄下。并且刪除Angular文件夾。調(diào)整后的結(jié)果：

啰嗦幾句，其中package.json是Angular的所有包文件，你可以打開(kāi)看一下，其中包含許多除了Angular包以外的依賴包。

如果你想了解這些文件都是干嘛的，作用是什么，請(qǐng)參考Angular官網(wǎng)

之后我們需要把src文件夾重命名一下，當(dāng)然也可以不重命名，為了看著方便，我把他重命名為ClientApp。

5. 啟用Angular的HTTP模式和表單綁定模式

打開(kāi)ClientApp/app/app.module.ts文件，加入FormsModule和HttpModule并且在NgMudule導(dǎo)入

這里插一句，由于我們?cè)诎惭bAngular時(shí)使用了--skip-install，所以這里會(huì)提示我們@angular組件找不到，不過(guò)沒(méi)關(guān)系，我們會(huì)在之后還原Angular的相關(guān)包

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.json，tsconfig.json，tsconfig.app.json，tsconfig.spec.json

由于我們使用的是Asp.Net Core集成Angular，所以我們需要告訴Angular將程序輸出到wwwroot文件夾。當(dāng)使用AngularCLI編譯Angular時(shí)，Angular將會(huì)把編譯后的文件輸出到Asp.Net Core的靜態(tài)文件目錄wwwroot下。

配置如下

同樣的配置tsconfig.json，tsconfig.app.json，tsconfig.spec.json，tsconfig.json文件是編譯TypeScript文件的配置文件。同樣需要修改輸出位置：

7. 從Angular中調(diào)用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[];
        });
    }
}

當(dāng)Angular在Core上運(yùn)行之后，他會(huì)向ValuesController發(fā)出GET請(qǐng)求，并且返回一個(gè)字符串?dāng)?shù)組。

之后我們需要修改ClientApp/app/app.component.html文件，然他來(lái)顯

轉(zhuǎn)載請(qǐng)著名出處：http://www.cnblogs.com/smallprogram

如果有哪位大神知道更好的并行運(yùn)行解決方案，請(qǐng)為我留言或聯(lián)系我，再次先行謝過(guò)~

最后附上本項(xiàng)目的源碼：　https://github.com/smallprogram/AspNetCoreWithAngular4　，需要手工還原NPM哦～

請(qǐng)求博客園的超管給加個(gè)精~

作者：smallprogram

出處： http://www.cnblogs.com/smallprogram

感謝您的閱讀。喜歡的、有用的就請(qǐng)大哥大嫂們高抬貴手"推薦一下"吧！你的精神支持是博主強(qiáng)大的寫(xiě)作動(dòng)力。歡迎轉(zhuǎn)載！另外，文章在表述和代碼方面如有不妥之處，歡迎批評(píng)指正。留下你的腳印，歡迎評(píng)論！

http://www.cnblogs.com/smallprogram/p/7127225.html

分類導(dǎo)航

在Visual Studio 2017中使用Asp.Net Core構(gòu)建Angular4應(yīng)用程序

前言

我們的目的

你需要知道的東西

你需要明白的東西

你需要了解的東西

微軟SPA模板(不在本文討論范圍)

讓我們開(kāi)始把

1.新建一個(gè)Asp.Net Core項(xiàng)目

2. 配置我們的Asp.Net Core

3. 配置Startup.cs文件

4. 創(chuàng)建一個(gè)APIController

創(chuàng)建一個(gè)Angular4的應(yīng)用程序

1. 在項(xiàng)目位置中打開(kāi)CMD或PowerShell命令行工具

2. 全局安裝AngularCLI

3. 在Asp.NET Core 中安裝Angular

4. 目錄調(diào)整

5. 啟用Angular的HTTP模式和表單綁定模式

6. 配置.angular-cli.json，tsconfig.json，tsconfig.app.json，tsconfig.spec.json

7. 從Angular中調(diào)用Asp.Net Core WebApi

延伸閱讀

我想了解如何學(xué)習(xí)

分類導(dǎo)航

在Visual Studio 2017中使用Asp.Net Core構(gòu)建Angular4應(yīng)用程序

前言

我們的目的

你需要知道的東西

你需要明白的東西

你需要了解的東西

微軟SPA模板(不在本文討論范圍)

讓我們開(kāi)始把

1.新建一個(gè)Asp.Net Core項(xiàng)目

2. 配置我們的Asp.Net Core

3. 配置Startup.cs文件

4. 創(chuàng)建一個(gè)APIController

創(chuàng)建一個(gè)Angular4的應(yīng)用程序

1. 在項(xiàng)目位置中打開(kāi)CMD或PowerShell命令行工具

2. 全局安裝AngularCLI

3. 在Asp.NET Core 中安裝Angular

4. 目錄調(diào)整

5. 啟用Angular的HTTP模式和表單綁定模式

6. 配置.angular-cli.json，tsconfig.json，tsconfig.app.json，tsconfig.spec.json

7. 從Angular中調(diào)用Asp.Net Core WebApi

延伸閱讀

我想了解如何學(xué)習(xí)

6. 配置.angular-cli.json，tsconfig.json，tsconfig.app.json，tsconfig.spec.json