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>
       }