ASP.NET Core + Angular 2 Template for Visual Studio

多個月以來，我和多個Github上的社區貢獻者一塊兒創建支持庫、包，咱們最終的目的是但願完成這樣一個做爲起點的模板，也就是基於把Typescript代碼和Angular2宿主在ASP.NET Core項目中，這個模板包含一下這些方面：

• 服務端預加載（預渲染）：這樣你的UI能夠快速的顯示，甚至在瀏覽器下載Javascript以前。
• Webpack中間件集成：在開發期間，你不須要一直從新編譯你的客戶端項目，或者你能夠用一個watcher工具在後臺幫你作這些事。
• 模塊熱拔插：在開發期間，一旦你編輯了一個Typescript文件、CSS文件、或者其餘客戶端資源，你的改變也將在不刷新頁面的狀況下當即推送到瀏覽器。
• 快速構建：對於開發來講，你不須要再等待再每次更改以後，webpack去從新解析第三方代碼，由於第三方類庫將會獨立到另外的一個bundle中，另外，超快速的構建包含了全部的map文件便於調試，再發布版本的文件中卻將直接輸出壓縮版本，再發布過程當中，這些工做將自動完成。

那若是你想使用一個不同的framework呢？若是你傾向於React、React+Redux或者Knockout，咱們也一樣爲他們提供了模板。

假如你是在Linux和MacOS開發，或者使用其餘IDE，使用咱們的Yeoman生成器來得到在VS Code或者其餘編輯器上對於Angular二、React、React+Redux或者knockout項目的相同支持，.NET Core是徹底跨平臺的。

 

安裝

 

首先，確保你已經安裝了一下必須內容，沒有他們事情就沒法進行下去了：

• Visual Studio 2015 Update3：注意Update2是不夠的，你須要Update3，由於它修復了一些關於npm的bug，並且它是使用Typescript的先決條件。
• .NET Core 1.0.1
• TypeScript 2.0 for Visual Studio 2015： 若是你的VS2015一直"抱怨" Cannot find name 'require',這就是由於你忘記了安裝本插件。
• Node.js 4及以上： 由於一些issue ,咱們暫時不支持Node 0.x，使用node -v檢查你的Node版本。

當你確認過以上內容安裝以後，下載並安裝 ASP.NET Core Template Pack Extension

 

建立而且運行項目

 

當你完成安裝以上全部內容後，你能夠打開VS2015 建立新項目，展開Web目錄，選擇 ASP.NET Core Angular2 Starter Application(.NET Core)

 

鍵入一個名字，點擊OK，如今耐心等待一段時間，讓Node.js安裝全部依賴項目，考慮你的網絡環境，這可能須要一段時間（並且，考慮國內環境）

 

一切就緒以後，項目中看起來可能回出現一點問題，可是實際上並非這樣，當VS2015完成安裝依賴後將會顯示not installed

 

而後，VS犯了個錯，事實上是由於一個只在macos上的可選依賴沒有安裝成功，你能夠選擇視而不見，可是若是你是個強迫症患者，那麼看這裏，追隨大神的腳步，去解決掉它。

如今，你能夠運行這個項目了，按下Ctrl+F5試試吧，如下內容將會顯示在你的瀏覽器裏：

 

服務端預渲染

 

在瀏覽一遍這個站點以後，你會發現一些簡單的angluar2 component的例子，這看起來倒不是什麼牛逼了的事，可是歧視已經在你看不見的地方發生了一些牛逼拉瞎的事情。

第一件事，雖然一般angular2運行在瀏覽器裏，可是ASP.NET Core Server也可讓他運行在服務器端，因此它能夠僅將HTML代碼發送到瀏覽器，不須要javascript就能夠顯示內容。

爲了證實它，你能夠經過禁用瀏覽器的Javascript功能，而後刷新頁面來查看內容，對於Chrome來講，你能夠打開F12控制檯，點擊設置，在裏面找到Disable Javascript複選框，而且反選它。

刷新頁面，你會發現一切看起來和以前同樣，左邊的tab仍是能夠工做，可是一些依賴javascript的內容就再也不能夠運行了，好比counter。

 

服務器端預加載的意義何在？

 

意義並不在於讓支持哪些不運行javascript的瀏覽器，它只是一種極端狀況而已（若是爲了這種極端狀況，那還爲何要創建一個SPA應用呢？）

它真正的意義在於：

1. 它極大的提升了用戶體驗：及時他們是在一個較慢的網絡環境或者設備上，也能夠在很快的看到你想顯示給他們的內容，在這背後，你可能又一個很大的捆綁javascript正在下載、轉換而且執行，而後緊接着接管頁面實現綁定你的那些功能，這比花很長時間加載javascript代碼，讓客戶看到一個空白的網頁好的多。
2. 它支持一些能不運行javascript的爬蟲：對於搜索引擎來講，返回簡單的HTML代碼對於他們來講是更簡單的理解和收錄的。

假如你不想使用預加載，能夠經過移除在Views/Home/Index.cshtml中的app標籤的asp-prerender-module屬性來禁用它。

 

Webpack集成

 

當前系統裏的代碼使用typescript編寫，這就是說你須要在運行它以前先構建它，就像你使用SASS同樣，須要在使用以前編碼，甚至捆綁和壓縮它。

目前最興盛的modern javascript構建系統是Webpack，它相似Grunt和Gulp，可是在2017的今天（原文中是2016），Webpack是最流行的typescript編譯、捆綁和壓縮工具，咱們在template中使用它的幾個很是酷的功能：

 

Webpack 開發中間件

 

一般來講，一旦你改變任何一個Typescript文件，你都須要去運行webpack來從新生成javascript文件，可是webpack開發中間件會幫助你作這些工做。

若是你的項目運行在VS默認開發模式下，webpack會在後臺監控你每個到http://yoursite/dist的請求，它處理每個請求而且返回一個編譯過的代碼文件。

 

模塊熱拔插（HMR）

 

在有任何代碼修改以後，一般咱們須要刷新頁面來應用這些修改，可是這對於效率和調試方便性來講是很不友好的。

模塊熱拔插（HMR）解決了這個問題，在默認的開發模式下，它會監測對於angular項目文件的任何改變（Typescript,css,html），當改變發生，它會自動觸發一次快速的編譯，而且託送全部改變的文件到活動的瀏覽器窗口，你的應用程序將會在不刷新頁面的狀況下啊當即應用改變。

你能夠經過打開控制纔來觀測它的工做，當VS開始調試，瀏覽器控制檯將會顯示如下內容：

看到[HMR] Connected的字眼了嗎？它表明已經準備好接收新的文件了，嘗試更改一個源文件。好比：ClientApp/app/components/home/home.component.html。

原文地址：http://www.dotnet.online/Article/66/ASP-NETCoreAngular2TemplateforVisualStudio

源地址：http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/

本文翻譯徵得了原做者Steve Sanderson的贊成，感謝他爲ASP.NET Core作出的傑出貢獻。

轉載請註明出處

白玉龍 2017/1/9

 

個人博客即將搬運同步至騰訊雲+社區，邀請你們一同入駐：https://cloud.tencent.com/developer/support-plan