19

Spring MVC バックエンドでシングル ページ アプリケーションを作成したいと考えています。Angular.js を学習したばかりです。

2 つのリンクで構成される左側のメニューがあります。

以下のコントローラにリクエストを送信します。このコントローラーは、URL 転送を行い、指定されたモデル属性で満たされているものの詳細を一覧表示します。

@RequestMapping(value = "{id}/rev/{rid}/detail", method = RequestMethod.GET)
public String detail(@PathVariable("id") Project project, @PathVariable("rid") Rev rev, Model model, HttpSession session) {
        User user = ((User) session.getAttribute(CSession.USER));
        model.addAttribute("project", project);
        model.addAttribute("rev", rev);
        model.addAttribute("cont", revContBS.getRevCont(rev, user));

        return "template/detail";
}

もう 1 つは、JSON を返すコントローラーへの ajax 呼び出しを行います。

@RequestMapping(value = "file/{fid}", method = RequestMethod.GET)
public @ResponseBody String getFile(@PathVariable("fid") FV fv) {
        return repBS.getVerCon(fv);
}

現在、ヘッダー、左メニュー、メイン コンテンツ エリアの装飾があります。最初のリンクをクリックすると、ページ全体が更新されます (ページ転送と JSP テンプレートを作成するため)。2 番目のリンクをクリックすると、メイン コンテンツ領域のみが変更されます。

コンテンツ領域のみを変更する必要があるため、最初のリンクの動作を変更したいと考えています。Angular.JS + Spring MVC で可能ですか? つまり、Spring MVC からページをリクエストします。指定されたモデル属性で「template/detail.jsp」をテンプレート化します。しかし、このページを ng-app のコンテンツ領域に配置します。

現在、次の分野で問題があります。

  1. @RequestMapping(value = "{id}/rev/{rid}/detail", method = RequestMethod.GET) はパラメトリックです。ルート転送をパラメトリックにする方法が見つかりませんでした。
  2. 「template/detail.jsp」を再提供して、ng-view という div に配置する方法がわかりません。
4

1 に答える 1

23

AngularJS のディレクティブ ng-view は、現在のルートに関連付けられたテンプレートを HTML ページにレンダリングするために使用されます。要点は、テンプレートはクライアント側のみで管理する必要があるということです。

ここでやろうとしているのは、Spring MVC を使用してテンプレート サーバー側をレンダリングすることですが、これは AngularJS を使用した単一ページ アプリケーションのアイデアではありません。

代わりに、Spring MVC コントローラーは json オブジェクトのみを返す必要があります。RESTful サービスを作成し、AngularJS を使用してテンプレートをレンダリングし、モデルを取得します。

ユースケースの完全な例を次に示します。

index.html :

<html ng-app="myApp">
<head>
</head>
<body>
    <!-- Your menu -->
    <ul>
        <li><a href="#/project/1/rev/1">Project 1 - Rev 1</a></li>
        <li><a href="#/project/1/rev/2">Project 1 - Rev 2</a></li>
    </ul>

    <!-- Your content -->
    <div ng-view>
    </div>
</body>
</html>

テンプレート ("template/detail.html")

<div>Id of project : {{project.id}}</div>

角度のあるアプリケーション:

angular.module('myApp', []).
    config(['$routeProvider', function($routeProvider) {
        $routeProvider.
            // Bind your route with your template and associated controller
            // Your template will be loaded into ng-view area
            when('/project/:projectId/rev/:revId', { templateUrl: 'template/detail.html', controller: MyController }).

            // Default route
            otherwise({redirectTo: '/'});
    }]);

function MyController($scope, $routeParams, $http) {
    // Use $routeParams to get parameter from your current route
    var projectId = $routeParams.projectId,
        revId = $routeParams.revId;

    // Here I use $http API from AngularJS but ng-resouce may be easier to use 
    // when you have to deal with rest resources
    $http.get('project/' + projectId + 'rev/' + revId).success(function(data) {
        $scope.project = data.project;
        $scope.rev = data.rev;
    });
}

REST サービスを使用した Spring MVC コントローラー:

@RequestMapping(value = "{id}/rev/{rid}/detail", method = RequestMethod.GET)
@ResponseBody
public Map<String, Object> detail(
         @PathVariable("id") Project project,
         @PathVariable("rid") Rev rev,
         HttpSession session) {

    User user = ((User) session.getAttribute(CSession.USER));

    // I use a map for the example but you should probably use a "real" object
    // The idea here is that you return a rest resource
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("project", project);
    map.put("rev", rev);
    map.put("cont", revContBS.getRevCont(rev, user));
    return map;
}

より複雑なルーターが必要な場合は、AngularUI プロジェクトを参照してください。

于 2013-07-04T16:03:59.787 に答える