up vote 0 down vote favorite

I am totally newbe in AngularJS, just learning.

Question

I would like to edit one rma in that list. I press the edit-button and call the controller funtcion updateRma(rma). After pressing rma number 11 my absolute url is "http://localhost:8383/RmaClient/app/index.html#/rma-detail/11"

  1. What should I change to get my rma-detail.html page open with correct data of rma object? Now I am always back in index.html.
  2. $location.path('/rma-detail/'+rma); could be the problem. If I take "+rma" off, I can get to correct rma-detail page without rma's data of course.

I have got a list of rmas from Java Rest service like that:

<rmas>
<rma>
<an8>22</an8>
<created>2012-02-28T19:28:54+02:00</created>
<dsc1>dsc1</dsc1>
<dsc2>dsc2</dsc2>
<rma>1</rma>
<sarjanro>serial</sarjanro>
<shortdesc>shortdesc</shortdesc>
<tuotenro>tuotenro</tuotenro>
<user>USER</user>
</rma>
</rmas>

as a JSON:

an8: 22,
created: "2012-02-28T19:28:54",
dsc1: "dsc1",
dsc2: "dsc2",
rma: 1,
sarjanro: "serial",
shortdesc: "shortdesc",
tuotenro: "tuotenro",
user: "USER"

VIEW

<tbody>
        <tr ng-repeat="rma in rmas">
            <td>{{ rma.rma}}</td>
            <td>{{ rma.sarjanro }}</td>
            <td>{{ rma.an8}}</td>
            <td>{{ rma.user }}</td>
            <td>{{ rma.created}}</td>
            <td>{{ rma.tuotenro }}</td>
            <td><a ng-click="updateRma(rma)" class="btn btn-small btn-success">edit</a></td>
            <td><a ng-click="deleteRma(rma.rma)" class="btn btn-small btn-danger">delete</a></td>
        </tr>
    </tbody>

CONTROLLER

  angular.module('rmaClientApp')
     .controller('RmaListCtrl', function ($scope, $location, rmaService) {        
            $scope.rmas = rmaService.query();
            /* callback for ng-click 'updateRMA': */
            $scope.updateRma = function (rma) {
                $location.path('/rma-detail/'+rma);
                console.log("2. ABSURL---->" +$location.absUrl());
                // ABSURL---->http://localhost:8383/RmaClient/app/index.html#/rma-detail/%5Bobject%20Object%5D

            };
     });

Service

angular.module('rmaServices', ['ngResource'])
    .factory('rmaService', ['$resource',
        function ($resource) {
            return $resource(
                    'http://localhost:8080/Rma/webresources/com.demo.rma.rma/:rma:id',
                    {},
                    {
                        update: { method: 'PUT', params: {id: '@rma'} }
                    });
        }]);

ROUTEPROVIDER

.config(function ($routeProvider) {
$routeProvider
  .when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
  })
  .when('/about', {
    templateUrl: 'views/about.html',
    controller: 'AboutCtrl'
  })
  .when('/rma-list', {
    templateUrl: 'views/rma-list.html',
    controller: 'RmaListCtrl'
  })
  .when('/rma-detail', {
    templateUrl: 'views/rma-detail.html',
    controller: 'RmaDetailCtrl'
  })
  .otherwise({
    redirectTo: '/'
  });

});

REST services in Glassfish

@GET
@Path("{id}")
@Produces({"application/json"})
public Rma find(@PathParam("id") Integer id) {
    return super.find(id);
}

@GET
@Override
@Produces({"application/json"})
public List<Rma> findAll() {
    return super.findAll();
}
share|improve this question
1  
Do you have a route setup for /rma-detail/:id ? – mohamedrias Mar 23 '15 at 8:40
    
Can you post the code for routeProvider and the detail controllers too? – Huy Hoang Pham Mar 23 '15 at 8:59
1  
I updated the answer, you have to change the route provider too. – Huy Hoang Pham Mar 23 '15 at 9:06
up vote 1 down vote accepted

Instead of sending the entire object, how about just sending the rma field as a key:

$location.path('/rma-detail/'+rma.rma);
//http://localhost:8383/RmaClient/app/index.html#/rma-detail/1

Change the routing so that the rma can be read as a param

.when('/rma-detail/:rmaId', {
templateUrl: 'views/rma-detail.html',
controller: 'RmaDetailCtrl'
})

Then in the RmaDetailCtrl controller, you can get the rmaId from route params

//Remember to inject the $routeParams in controller's constructor
var rma = $routeParams.rmaId; //1
//Call the get rma detail from API

For simple learning purpose, don't use $resource. Use $http instead:

var rma = $routeParams.rmaId; //1
$http.get('/Rma/webresources/com.demo.rma.rma/?id=' + rma).success(function(result) {
    console.log(result);
});

//Use $http.get for update
share|improve this answer
    
If I add rma.rma my absolute path is like that: localhost:8383/RmaClient/app/index.html#/rma-detail/undefine‌​d and in my detail controller i've got: if ($scope.editMode) { $scope.rma = rmaService.get({id: $routeParams.id}); It never goes to detail-page, it goes always to index-page. – Sami Mar 23 '15 at 8:54
    
That was it. Now it is working. Thank you guys mohamedrias and @Huy Hoang Pham. The main mistake was incorrect routingprovider. .when('/rma-detail/:id' is correct and in controller: $scope.rma = rmaService.get({id: $routeParams.id}); – Sami Mar 23 '15 at 9:39

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.