How to get param from @PathVariable to AngularJS controller

Question

I've just learnt Angular.js. I try to use angularjs to bind object with form. I have a list of items, when user click on one, app go to spring controller:

@RequestMapping(value = {"test/{id}" }, method = RequestMethod.GET)
    public ModelAndView test(@PathVariable String id) {
        LOG.info("test() main page called with id = " + id);
        ModelAndView mav = new ModelAndView("test");
        return mav;
    }

test.jsp. looks like below:

<!doctype html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example99-production</title>


<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js"></script>
<script src="<c:url value="/static/s/${buildInfo.commitId}/js/controller.js" />"></script>
<script type="text/javascript">var appRoot = "<c:url value="/" />";</script>

</head>
<body ng-app="">
    <div data-ng-app="formular" data-ng-controller="Controller"
        data-ng-submit="save()">
        <form novalidate class="simple-form">
            Author: <input type="text" data-ng-model="stickerModel.author" /><br />
            Id: <input type="text" data-ng-model="stickerModel.id" /><br />
            Title: <input type="text" data-ng-model="stickerModel.title" /><br />
            <button ng-click="reset()">RESET</button>
            <button ng-click="update(stickerModel)">SAVE</button>
        </form>

    </div>

</body>
</html>

And angularjs controller:

function Controller($scope, $http) {
    getUrl =  appRoot + 'rest/tttt' ;

    $http({method: 'GET', url: getUrl}).
    success(function(data, status, headers, config) {
        $scope.stickerModel = data;
        console.log('controller', data); 
    }).
    error(function(data, status, headers, config) {
      // called asynchronously if an error occurs
      // or server returns response with an error status.
    });

    $scope.save = function() {
       //do sth
      };

    $scope.master = {};

    $scope.update = function(sticker) {
        $scope.master = angular.copy(sticker);
    };

    $scope.reset = function() {
        $scope.sticker = angular.copy($scope.master);
    };

    $scope.reset();
}

Now I call rest service with hard coded variable (getUrl = appRoot + 'rest/tttt' ;) but I would like call it with given id (like in spring controller). I googled that I should use $routeParams, but when I added in in my angular controller ('function Controller($scope, $http, $routeParams)') error occurred:

Error: [$injector:unpr] http://errors.angularjs.org/1.3.0-beta.5/$injector/unpr?p0=%24routeParamsProvider%20%3C-%20%24routeParams
    at Error (native)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js:6:456
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js:35:368
    at Object.c [as get] (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js:33:461)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js:35:436
    at c (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js:33:461)
    at d (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js:34:176)
    at Object.instantiate (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js:34:340)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js:66:72
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js:52:434 angular.js:9784
(anonymous function) angular.js:9784
(anonymous function)

JB Nizet · Accepted Answer · 2014-05-04 13:22:12Z

2

I'm not absolutely sure that it's what you want to achieve, but you're already customizing your URL based on information generated at server-side:

var appRoot = "<c:url value="/" />";

...

getUrl =  appRoot + 'rest/tttt' ;

So you just need to do the exact same thing for your ID:

@RequestMapping(value = {"test/{id}" }, method = RequestMethod.GET)
public ModelAndView test(@PathVariable String id) {
    LOG.info("test() main page called with id = " + id);
    ModelAndView mav = new ModelAndView("test");

    mav.addObject("theId", id);

    return mav;
}

...

var theId = '${theId}';

...

var getUrl =  appRoot + 'test/' + theId;

answered May 4, 2014 at 13:22

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get param from @PathVariable to AngularJS controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related