I am a beginner in AngularJS, currently in the learning phase.
Query
I want to edit a specific rma from the list. When I click on the edit button and call the controller function updateRma(rma), after selecting rma number 11, my absolute URL is "http://localhost:8383/RmaClient/app/index.html#/rma-detail/11"
- What changes do I need to make to ensure that the rma-detail.html page opens with the correct data of the rma object? Currently, I always end up back in index.html.
- The issue could be with $location.path('/rma-detail/'+rma); If I remove "+rma", I can access the correct rma-detail page without the rma's data, of course.
I have received a list of rmas from a Java Rest service in the following format:
<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>
This data is in JSON format:
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();
}