NET Core + Angular 2

標籤：發布   目錄   條件   版本   新解   安裝   接收   server   tar   

ASP.NET Core + Angular 2 Template for Visual Studio

2017-01-11 08:45 by 小白哥哥, 2069 閱讀, 19 評論, 收藏, 編輯

多個月以來，我和多個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或者其他編輯器上對於Angular2、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/

NET Core + Angular 2