MVC項目的Angular2設置

Question

我正在嘗試找出將Angular2集成到舊版Spring MVC框架中的最佳方法和做法。 這不是特定於Spring MVC，而是特定於任何MVC框架。

在Angular1世界中，服務器渲染了頁面，而Angular1可以純粹用於客戶端功能。 每頁會有1 ng-app。

從我對Angular（Typescript + Angular-CLI）的使用中所見，它看起來非常適合於單頁面應用程序，其中html是由節點Web服務器呈現的。

我也研究了Angular2（使用純js），但似乎缺少Typescript中可用的某些功能。 例如， templateUrl屬性。

總結一下將Angular2集成到MVC框架中的推薦設置是什么？

要求

在本地開發環境中，我希望能夠具有ng serve提供的類似功能（即實時重新加載），但是頁面本身將由服務器呈現

在生產中，我應該能夠捆綁並進行生產構建最佳實踐。

先感謝您。

Answer 1

在繼續使用Angular 2進行用例開發之前，最好調查一下其中的許多選項，即使您來自Angular 1.x背景也是如此。 我之所以這樣說是因為我最近在項目上將Angular與另一個MVC服務器端框架一起使用。 這是我遇到的一些缺點/頭痛。

服務器渲染

使用Angular 1.x時最方便的事情之一就是能夠像這樣在服務器上呈現模板。

<div ng-controller="HomeController as vm" >
      <!-----Home.Html------>

      <!------Server Logic/Bindings----->

 </div>

只需快速地將數據綁定並在服務器上呈現您的主頁模板，然后Angular編譯過程就會使home.html栩栩如生。 似乎在Angular中不支持也不建議從服務器中提取模板。 我認為，這與Angular 2相比是一個很大的缺點。

現在，我相信可以使用Angular 2來實現服務器渲染，但是我認為只能在使用Angular Universal模塊進行初始頁面加載期間進行。

工裝

如果要編寫Angular 2應用程序，則需要太多工具。 Typescript或ES6，在大多數情況下，您將需要單獨的文本編輯器，例如VS Code或Webstorm。 我的企業版Visual Studio 2015甚至不再用於Angular開發。 因此，我使用Webstorm進行所有的Angular開發，並且與服務器端框架完全隔離。

許多更新的JS框架中最令人沮喪的事情之一就是如何將應用程序交付到瀏覽器。 這就是構建系統的用武之地。開發過程的這一方面可能是最復雜的。 因此，您幾乎被迫使用種子項目，並且該種子項目的構建過程已經很好地進行了調整。 Angular-cli似乎是目前最好的選擇。 即使有了這些出色的入門項目，我也不得不創建一個額外的gulp流程來自動化一些事情。

考慮到這些因素，您可能想看看還有哪些其他選項可以更好地與更傳統的MVC服務器方法兼容。 我聽說過有關VueJs的好消息 。 React甚至可能更適合這種方法。 我強烈考慮兩個框架，甚至對於較小的場景，甚至考慮使用VanillaJS。

這並不是說Angular不是一個很棒的框架。 我只是認為該工具還不存在，並且可能不是每種情況下的最佳工具。 考慮到這一點，這就是我使用Angular-Cli采取的方法。

角Cli.json

當Angular-cli生成構建時。 您可能希望將該構建輸出到服務器端框架的公共目錄。 這可以通過修改angular-cli.json文件的outDir屬性來完成。

"outDir": "../MVC-Project/wwwroot"

服務器API的代理

使用ng serve時，您可能希望將所有api調用代理到服務器項目。 這可以通過在CLI項目的根目錄中添加proxy.conf.json文件來完成：

   {
      "/api": {
        "target": "http://localhost:8000",
        "secure": false
      }
    }

服務應用

然后，您需要在服務器呈現的模板中的某個位置包含“ APP”組件。 為了簡單起見，假設這是您的index.html文件。 下面示例中的標簽與.Net Core相關，但希望您能理解。

<app-root>
    <div class="loader"></div>
</app-root>
  @section scripts{
        <environment names="Development, Staging">
            <script type="text/javascript" src="inline.bundle.js"></script>
            <script type="text/javascript" src="scripts.bundle.js"></script>
            <script type="text/javascript" src="styles.bundle.js"></script>
            <script type="text/javascript" src="vendor.bundle.js"></script>
            <script type="text/javascript" src="main.bundle.js"></script>
        </environment>
        <environment names="Production">

            <!-- inject:js -->

            <!-- endinject -->
        </environment>
       }