Question

我正在努力找出最好的方法和方法。将Angular2集成到传统Spring MVC框架中的实践。这不是特定于Spring MVC，而是特定于任何MVC框架。

在Angular1世界中，服务器呈现页面，Angular1可以纯粹用于客户端功能。每页将有1 ng-app。

从我看到的使用Angular（Typescript + Angular-CLI）看起来非常适合单页应用程序，其中html由节点webserver呈现。

我也研究过Angular2（使用普通的js），但似乎缺少了一些在Typescript中可用的功能。例如，templateUrl属性。

总结将Angular2集成到MVC框架的建议设置是什么？

要求

在本地开发环境中，我希望能够具有ng serve提供的类似功能（即实时重新加载），但页面本身将由服务器呈现

在prod中，我应该能够捆绑并完成生产构建最佳实践。

提前谢谢你。

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调用代理到服务器项目。这可以通过将proxy.conf.json文件添加到CLI项目的根目录来完成：

   {
      "/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>
       }

MVC项目的Angular2设置

1 个答案:

服务器渲染

工具

角-Cli.json

代理到服务器API

提供应用