AngularJS:如何从服务器端加载部分视图

Question

我正在开发基于Spring MVC的基于Java的web应用程序。现在，在这个应用程序中，我试图集成AngularJS框架，以实现模块化的客户端代码，并将我的客户端模式和视图解耦。

在Spring MVC中，当我们从控制器返回ModelAndView时，我试图将此返回的视图与AngularJS路由器模块一起使用。

var hmAdministration = angular.module('administration', ['ngRoute']);
hmAdministration.config(function ($locationProvider, $routeProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider.
        when("AngularJSSpringMVC/displayRoleList", {templateUrl: "AngularJSSpringMVC/displayRoleList"});
});

现在这里AngularJSSpringMVC/displayRoleList是绑定到控制器API的URL，它将返回模式和视图。现在，根据我的理解，这里返回的视图应该放在我的<ng-view></ng-view>标记中。当我在客户端完整地运行这段代码时，它是有效的，但现在尝试将这段代码与SpringMVC集成，似乎仍然需要连接很多点。

Answer 1

首先，AngularJS始终运行complete client side。

你没有具体说明你的错误，所以我在这里猜测，基于我自己在集成Angular和MVC视图时的经验。

请注意，浏览器上的地址应如下所示：http://yourserveraddress/#/AngularJSSpringMVC/displayRoleList

#很重要，这就是Angular路由和MVC路由（在服务器中完成）的区别。上面的地址将加载你的索引页面，你的角度代码应该在其中，它将处理#之后的路由，并使其全部工作。

当您期望MVC视图的内容应该加载到ng-view上时，您是对的。

一个建议是在角度上使用足够不同的路线，这样它们就不会容易混淆，也许这样的东西会让它更简单：

$routeProvider.
    when("displayRoleList", {
        templateUrl: "AngularJSSpringMVC/displayRoleList"
});

所以你的网址应该是http://yourserveraddress/#/displayRoleList。

我希望这能有所帮助，如果我严重错过了标记，请分享更多的代码。