乱爱性全过程免费视频/午夜毛片视频/中文字幕av三区/一级视频网址

當前位置： 維易PHP培訓學院 > LINUX入門 > 內容正文

LINUX入門：在Visual Studio 2017中使用Asp.Net Core構建Angular4應用程序

作者：VEPHP   時間 2017-10-04

《LINUX入門：在Visual Studio 2017中使用Asp.Net Core構建Angular4應用程序》要點：
本文介紹了LINUX入門：在Visual Studio 2017中使用Asp.Net Core構建Angular4應用程序，希望對您有用。如果有疑問，可以聯系我們。

前言

Visual Studio 2017已經宣布了很久了.做為集成了Asp.Net Core 1.1的地表最強IDE工具,越來越受.NET系的開發人員追捧.

隨著Google Angular4的發布.我一直在想,怎么能夠用這個地表最強IDE工具編寫Angular4的Asp.Net Core項目.經過不懈的研究.終于的得到了一套很好的辦理方案與大家分享.?

我們的目的

隨著Web技術的快速發展,新的技術層出不窮,這使得Web程序的用戶體驗不斷提升.最具代表性的便是SPA(Single Page Application)應用.

技術的快速發展也有弊端,那就是學習本錢的不斷提升.作為一名開發人員,你需要不斷學習、提升自己的技術以適應這個技術快速發展的時代,以讓自己不在這個技術快速發展的洪流中所淘汰.

當然,我們的老年夜Microsoft也是如此,借著Asp.Net Core的機會,發布了好幾款集成目前流行的前端框架的Asp.Net Core的模板.文章后邊我就具體描述以一下.

你需要知道的東西

你需要明白的東西

1. NodeJS,這是一個基于Chrome V8 JavaScript引擎構建的JavaScript運行時的庫,NPM就包含在NodeJS中,他具有強大的生態系統.
2. NPM擔保理器,是Node包生態系統的管理器.可以使用他安裝Angular所有的包以及依賴包.
2. DotNet CLI,這是微軟提供的命令行接口工具.用于開發跨平臺.NET程序的工具鏈.如果你安裝了VS2017,默認應該已經安裝DotNetCLI工具.
3. AngularCLI,這是Angular官方發布的AngularCLI工具,可以使用他對Angular進行新建、編譯、運行等操作.

4. Asp.Net Core,這是微軟推出的跨平臺Web應用程序.功能強大.官方文檔非常完善.

5. TypeScript,這是一種類型化的JavaScript,可以通過他編譯生成Javascript,Angular便是基于TypeScript的.

6. RESTful API,這是一個很火熱的Web應用法式API的設計理念.微軟官網也寫過一篇關于RESTful的文章,但實在太老了.于是用aisuhua的GitHub代替了

你需要了解的東西

1. 翻GFW,根據我國國情需要,GFW是“必需要有的”,這無可厚非.但是帶來的問題就是開發人員的一手資料被屏蔽.所以你應該了解怎么翻GFW.

2. 海內NPM源,之后會細說.

3. WebPack,這是一個現代化的JavaScript模塊打包器.具體內容可以辭官網了解

也許有一些沒有接觸過以上提到的這些工具或知識的童鞋可能會一臉懵逼,但是不消擔心也不消著急,本文會用最淺顯易懂的方式告訴你如何配置.?

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

先說說老年夜Microsoft的模板.

想要安裝微軟官方提供的模板,我們就必要用到dotnet CLI工具了.這套模板是由微軟Steve Sanderson提出并研發的.關于史蒂夫·桑德森,從2010年到現在,在微軟從事Web技術工作.并且最先加入到Asp.Net MVC3的技術團隊.構建了一系列JavaScript庫以及Azure的門戶網站.我們所熟知的Knockout.js就是這個人主導開發的.可以說是絕對的.Net技術大牛.

附上一張他的照片,還有他的Twitter.有玩Twitter的可以Follow他

image

回到正題,想要安裝這個模板,你就必要使用DotNet CLI工具了.具體命令如下：

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

當你使用CMD或Powershell運行后會得到一下成果：

image

可以看到微軟很給力,給我提供了好多模板.有Angular的,有Knockout的,有Aurelia的,有React的,有Vue的.可以說,異常全面.

可以使用如下DotNetCLI命令依據模板新建項目.

dotnet new angular

如果你了解dotnet CLI,你就會明白,這條命名的意義便是從當前目錄使用MVC ASP.NET Core with Angular創建一個Asp.Net Core的項目.

新建勝利后,使用如下命令還原.NET依賴包和Angular依賴包：

dotnet restore

npm install

完成之后你就可以運行法式,查看效果：

Generated Angular application homepage

你不妨可以試試看,期間你可能必要一個高速VPN,否則你在執行npm install命令時,可能會有很多Angular的包安裝不上.

有人會說,為啥我們不直接用微軟的模板反而要本身去構建Asp.Net Core+Angular的應用程序呢.

其實原因很簡單,微軟一如既往的作風便是高度集成高度封裝.他所提供的這些模板中,集成Server-side prerendering(服務端渲染),WebPack dev middleware,Hot Module Replacement(模塊熱插拔)等等技術.最后再加上Angular.

如果你對這些技術了解程度不夠,很難做到高度擴展.例如添加新的npm包也會有可能引起一些莫名其妙的異常.所以,我們才要本身去構建集成Angular的Asp.Net Core的應用程序.

有興趣的童鞋可以本身去嘗試一下.

讓我們開始把

1.新建一個Asp.Net Core項目

打開宇宙最強IDE,Visual Studio 2017,新建一個Asp.Net Core項目.并且取個名字,好比AspNetCoreWithAngular4：

image

之后我們創建一個空的Asp.Net Core 法式,我是用的版本是1.1

image

2. 配置我們的Asp.Net Core

這一步,我們必要配置一些Core的依賴包,并且設置Core在VS重構時MSBuild不去編譯Typescript文件,因為我們要使用其他工具去編譯Typescript文件.

直接打開csproj文件：

image

添加如下代碼：

image

代碼：

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

在我們的項目中,Microsoft.AspNetCore.Mvc包能夠允許我們添加控制器并且構建WebAPI,而Microsoft.AspNetCore.StaticFiles包可以讓我們配置提供靜態目錄拜訪的功能.例如默認提供/wwwroot目錄的拜訪.

因為我們會使用其他工具去編譯Typescript文件,所以必要在PropertyGroup節點中配置

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

保留csproj文件后,VS2017會自動下載相關包.如果你在MacOS或者Linux環境,請使用dotnet restore命令還原包.

3. 配置Startup.cs文件

首先在ConfigServives辦法中添加MVC服務：

services.AddMvc();

image

如果VS出現紅色波浪線,你必要關閉項目,重新打開項目即可.

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

image

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();

這里簡單說一下,首先第一個app.Use中間件的作用是當系統返回404狀態碼并且拜訪的Request不包含文件擴展名并且拜訪Request不是以“/api/”開頭的拜訪直接將其跳轉到/index.html

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

app.UseDefaultFiles()的意思是啟用默認文檔提供器中間件,他會對只有主機的URL進行拜訪時搜索default.html、default.htm、index.html、index.htm文件,如果有就返回內容.

app.UseStaticFiles()的意思啟用程序的靜態文件支持,也就是啟用wwwroot文件夾可以通過URL拜訪.

4. 創立一個APIController

在根目錄中創立一個Controllers的文件夾,當然直接在根目錄創立一個WebAPIController也可以.

image

這里簡單說一下,VS2017 15.2(26430.14)這個版本有一個小bug,就是當你使用MVC腳手架功能的時候,比如上圖的新建中的“控制器”,亦或者在Controller的Action中使用右鍵新建視圖的功能時,中文會出現亂碼.所以我保舉大家直接使用“新建項”,放棄使用腳手架功能.當然在目前的項目中涉及不到上述問題.

image

創立一個默認的ValuesController

讓我們來修改一下ValuesController中Get辦法的返回值：

image

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

創建一個Angular4的應用法式

我們的Asp.Net Core服務器已經構建完成了.現在讓我們來向項目中添加Angular

1. 在項目位置中打開CMD或PowerShell命令行工具

以PowerShell為例,輸如如下命令,導航到項目地點目錄：

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

我的這個路徑有點長,當人如果你感到麻煩,可以安裝一個小插件.他可以直接從項目根目錄打開命令行工具.插件的名字是：

Open Command Line,你可以通過Visual Studio Marketplace下載安裝.安裝好之后,你就可以通過如下方式直接在根目錄打開命令行對象了：

image

image

也許有人會問,為什么不消VS的PowerShell Interactive Window,我只想說我不喜歡他的界面.

2. 全局安裝AngularCLI

如果你的機器上沒有安裝nodeJS,你需要去官網下載nodeJS進行安裝,根據你的系統下載相應的安裝包.node會有兩個版本可供下載.一個是LTS版本,也就是通常我們所說的穩定版,另一種是Current版本,就是嘗鮮版.有新的功能.當然我保舉安裝穩定版.

image

安裝成功之后,我們需要處理的下一個問題就是GFW的問題.眾所周知,node的資源鏡像是在GFW禁止拜訪的黑名單URL列表中.這就導致你可能在使用node的NPM包管理器安裝AngularCLI的過程出現問題.不過馬云家的淘寶已經有了很好的解決方案,那就是國內NPM數據鏡像.

提到國內NPM數據鏡像,淘寶建立本身的NPM數據鏡像,他們的數據鏡像與NPM官網的數據鏡像是同步的,時間差大約在10分左右.

因為是在國內,所以不會受到GFW的影響.我們需要做的就是更改NPM擔保理器的鏡像地址,在我們的剛剛的PowerShell中使用如下命令：

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

image

當你替換之后,在不使用VPN或代理經銷的情況下,通過NPM安裝包就會速度很快了.

但是我要闡述一點,當我們安裝AngularCLI的時候,其中有一個依賴項為node-sass,他的指定拜訪一個https://github.com/sass/node-sass/releases/download/v4.5.3/win32-x64-57_binding.node地址去下載,該地址是被GFW屏蔽的.所以就算我們使用國內NPM鏡像,也會出現問題.

當然最好的辦理方案是設置NPM為原始鏡像地址,然以掛上高速VPN,去安裝AngularCLI.

也許你本的網絡很好,你也可以測驗考試使用淘寶NPM鏡像,但是不要開VPN,那樣會很慢.

就像我家和我單位的網.都是淘寶NPM鏡像,單位安裝AngularCLI一點問題沒有,但是家里就呈現了我上面說的node-sass下載不下來的問題了.

替換完淘寶NPM鏡像之后,那么讓我們繼續,使用如下命令全局安裝AngularCLI,注意這個只必要安裝一次即可：

npm install –g @angular/cli

image

此中npm install是NPM安裝的意思.

-g是全局安裝的意思,是-global的簡寫

@angular/cli便是告訴NPM我們要安裝AngularCLI

執行后便是慢慢等待他完成吧.

image

image

如果安裝失敗,你必要執行一下命令,卸載AngularCLI：

npm uninstall –g @angular/cli

npm cache clean --force

并刪除“C:\Users\[你用系統賬戶名]\AppData\Roaming\npm\node_modules”目錄下的@angular文件夾,重復上面的安裝步調.

安裝勝利之后你會看到如下界面：

image

OK,通過上述操作,我們已經在體系上安裝完成了AngularCLI.

3. 在Asp.NET Core 中安裝Angular

如今回到之前的項目路徑：

image

運行如下敕令,在項目根目錄中新建一個Angular項目：

ng new [你的Angular項目名稱] --skip-install

image

解析一下這條敕令：

ng new是AngularCLI的新建敕令

--skip-install是npm的跳過還原包敕令

作用便是在當前目錄下新建一個Angular項目并且跳過還原包

年夜神別嫌我啰嗦.我要照顧一下新手.

OK,運行之后的成果：

image

4. 目次調整

回到VS,你會發現,目次中多了一個Angular的目次：

image

這便是剛剛我們使用AngularCLI安裝后的文件.

讓我們調整一下目錄布局,已使Angular能更好的集成到Core中：

image

將Angular文件夾下的所有文件拖拽到系統根目錄下.而且刪除Angular文件夾.調整后的結果：

image

啰嗦幾句,其中package.json是Angular的所有包文件,你可以打開看一下,其中包括許多除了Angular包以外的依賴包.

假如你想了解這些文件都是干嘛的,作用是什么,請參考Angular官網

之后我們必要把src文件夾重命名一下,當然也可以不重命名,為了看著方便,我把他重命名為ClientApp.

image

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

打開ClientApp/app/app.module.ts文件,加入FormsModule和HttpModule而且在NgMudule導入

image

這里插一句,由于我們在安裝Angular時使用了--skip-install,所以這里會提示我們@angular組件找不到,不外沒關系,我們會在之后還原Angular的相關包

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]
})
exportclass AppModule { }

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

由于我們使用的是Asp.Net Core集成Angular,所以我們必要告訴Angular將程序輸出到wwwroot文件夾.當使用AngularCLI編譯Angular時,Angular將會把編譯后的文件輸出到Asp.Net Core的靜態文件目錄wwwroot下.

設置裝備擺設如下

image

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

image

image

7. 從Angular中調用Asp.Net Core WebApi

這里我們必要修改app.component.ts文件.

image

image

import { Component, OnInit } from '@angular/core';
import { Http }from '@angular/http'
@Component({
? ? selector:'app-root',
? ? templateUrl:'./app.component.html',
? ? styleUrls: ['./app.component.css']
})
exportclass AppComponent implements OnInit {
? ? constructor(private _httpService: Http) { }
? ? apiValues:string[] = [];
? ? ngOnInit() {
? ? ? ?this._httpService.get('/api/values').subscribe(values => {
? ? ? ? ? ?this.apiValues = values.json() as string[];
? ? ? ? });
? ? }
}

當Angular在Core上運行之后,他會向ValuesController發出GET哀求,并且返回一個字符串數組.

之后我們必要修改ClientApp/app/app.component.html文件,然他來顯示WebApi返回的數據：

image

<divstyle="text-align:center">
? <h1>
? ? 這是一個Asp.Net Core 1.1 With Angular4應用程序
? </h1>
? <h2>下面的信息是由Asp.Net Core WebAPI返回的</h2>
? <ul*ngFor="let value of apiValues">
? ? <li>{{value}}</li>
? </ul>
? <imgwidth="300" src=PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
</div>

其中 *ngFor循環遍歷apiValues并一個一個的輸出到value中.這是Angular的一種語法.更多語法你必要參閱Angular官方文檔.

8. 安裝Angular所有依賴項

這一步我們就要用到node了.就是安裝AngularCLI一樣.使用NPM擔保理器.

首先開啟Powershell或CMD命令提示行對象,將路徑設置到項目根目錄.執行如下命令：

npm install

執行該命令后,npm會根據項目中的package.json配置文件安裝包含Angular在內的所有依賴包：

image

image

image

當出現如上圖所示界面,沒有ERR,表現Angular包安裝成功了.其中會有兩個警告,不必在乎.這是正常的.

回到VS,顯示全部文件,你會發現多出一個node_module的文件夾,并且依賴項中會出現npm依賴,這個文件夾里包括的就是包括Angular在內的所有依賴包.不要把他包括在項目中.否則會出錯.

image

編譯并運行程序

1. 編譯Angular程序

執行AngularCLI命令編譯Angular程序,同樣必要使用PowerShell或CMD命令行工具,將路徑設置為項目根目錄,執行如下名：

ng build

image

image

編譯勝利之后,會顯示如上圖所示的內容

回到VS中你會發現wwwroot文件夾下出現了編譯好的JS文件和HTML文件等.不要在意wwwroot文件夾的圖標從一個小地球釀成了文件圖標.：-)

image

2. 編譯運行Asp.Net Core應用法式

之后使用DotNetCLI編譯并運行Asp.NET Core應用法式,執行如下命令：

dotnet run

image

3. 打開瀏覽器運行

打開瀏覽器,運行http://localhost:5000,得到如下成果：

image

提升開發的友好度

大概有的朋友可能會說.太麻煩了.

是的.確實是有點麻煩,因為我們必需同時完成兩條線路上的編譯工作.

一條線路是Angular的編譯事情.

另一條線路是Asp.Net Core的編譯事情.

如果我們能夠在Angular和Asp.Net Core的代碼被變動時,系統自動編譯他們,那就太好了.

這里我給出我的辦理方案.如果有大神有更好的辦理方案,可以留言或聯系我.在此謝過~

1. 將API調用代理到Asp.Net Core服務上

在開發的過程中,我們會用到AngularCLI命令中的 ng serve 命令來啟用Angular的監控服務模式.他會監控Angular的源碼變化,當源碼被改變時,自動重新編譯Angular法式并編譯TypeScript代碼.默認情況下ng serve提供的是localhost:4200地址.

而且Angular默認接受Request的地址為localhost:4200/api,這與我們Asp.Net Core默認的localhost:5000不一樣.

所以我們要通過配置proxy來辦理這個問題.

首先在項目根目次中添加一個json文件,取名字叫proxy.config.json

image

為這個文件添加如下設置裝備擺設代碼

image

2. 啟用Asp.Net Core自動編譯

如果Angular能夠自動進行變動重編譯運行,并且Asp.Net Core也能用監控變動自動重編譯,那絕對是我想要的.

啟用Asp.Net Core自動重編譯,必要修改.csproj文件,添加一個DotNetCLI工具包.代碼如下：

image

<ItemGroup>
    <DotNetCliToolReference Include="Microsoft.DotNet.Watcher.Tools" Version="1.0.1" />
</ItemGroup>

保留文件后,VS會自動還原安裝這個包.如果沒有自動還原,請使用DotNetCLI命名還原包：

dotnet restore

3. 以監控模式同時運行Angular和Asp.Net Core

使用PowerShell或CMD命令行對象,運行如下命令以監控模式啟用Asp.Net Core服務器

dotnet watch run

image

打開另一個PowerShell或CMD命令行對象,以監控模式配置文件運行Angular

ng serve --proxy-config proxy.config.json

image

現在讓我們打開瀏覽器,拜訪http://localhost:4200

image

打開ValuesContoller,讓我們變動一些東西：

image

打開ClientApp/app/app.component.html文件,變動一些東西：

image

保留上面兩步的更改后,回到瀏覽器,你會驚奇的發現,Asp.Net Core和Angular的代碼變更已經生效了

image

OK ,至此,使用在Visual Studio 2017中使用Asp.Net Core構建Angular4應用法式撰寫完畢.

希望本文對你有所贊助

如果有哪位大神知道更好的并行運行辦理方案,請為我留言或聯系我,再次先行謝過~

最后附上本項目的源碼：　https://github.com/smallprogram/AspNetCoreWithAngular4　,必要手工還原NPM哦～

本文永遠更新鏈接地址：

更多LINUX教程，盡在維易PHP學院專欄。歡迎交流《LINUX入門：在Visual Studio 2017中使用Asp.Net Core構建Angular4應用程序》！

轉載請注明本頁網址：
http://www.fzlkiss.com/jiaocheng/9818.html


    標簽：