StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The first problem was solved by Vineet. Actually the functions $get, $post, $delete and so on were present. Just further down when expanding the log record in the Chrome Batarang environment.</p> <p>My actual problem was that the default query method does not like file extensions at the end such as .json </p> <p>If using file extensions following will happen when not parsing an Id:</p> <ul> <li>/api/user/.json</li> </ul> <p>But we would like to have following to display all users:</p> <ul> <li>/api/user/</li> </ul> <p>So file extensions should not be used. The Content-Type should be negotiated through the header. Then file extensions won't be necessary to determine the Content-Type.</p> <p>I changed my user.service the following way:</p> <pre><code>angular.module('user.services', ['ngResource']). factory('User', function($resource){ return $resource('http://localhost\\:8080/api/user/:userId', {userId: '@id'}, { query: {method: 'GET', headers: [{'Content-Type': 'application/json'}, {'Accept': 'application/json'}]}, get: {method:'GET', headers: [{'Content-Type': 'application/json'}, {'Accept': 'application/json'}]}, update: {method:'PUT', headers: [{'Content-Type': 'application/json'}, {'Accept': 'application/json'}]}, create: {method:'POST', headers: [{'Content-Type': 'application/json'}, {'Accept': 'application/json'}]}, delete: {method:'DELETE', headers: [{'Content-Type': 'application/json'}, {'Accept': 'application/json'}]} }); }) </code></pre> <p>My controller looks as followed:</p> <pre><code>function UserCtrl($scope, $resource, User) { // set edit screen to invisible by default $scope.userModScreenIsVisible = false; // initialize buttons as invisible $scope.updateUserDetailsButtonIsVisible = false; $scope.saveUserDetailsButtonIsVisible = false; // display list with users $scope.getList = function() { User.query( {}, //params function (data) { //success $scope.users = data.data; }, function (data) { //failure console.log("Error occurred while getting list of users"); }); } $scope.getList(); // show edit screen if edit button is clicked $scope.showEditScreen = function(id) { $scope.user = User.get({userId: id}); $scope.updateUserDetailsButtonIsVisible = true; $scope.userModScreenIsVisible = true; } // hide edit screen if close button is clicked $scope.hideEditScreen = function() { $scope.updateUserDetailsButtonIsVisible = false; $scope.saveUserDetailsButtonIsVisible = false; $scope.userModScreenIsVisible = false; } // update a user $scope.updateUserDetails = function() { $scope.user.$update(); for(var i=0;i<$scope.users.length;i++) { if($scope.users[i].id == $scope.user.id) { angular.extend($scope.users[i], $scope.user); break; } } console.log($scope.user); //$scope.user = User.get({userId: $scope.user.id}); $scope.updateUserDetailsButtonIsVisible = false; $scope.userModScreenIsVisible = false; } // show a new user screen $scope.showNewScreen = function() { $scope.user = new User(); $scope.saveUserDetailsButtonIsVisible = true; $scope.userModScreenIsVisible = true; } // save a new user $scope.saveUserDetails = function() { $scope.user.$create(); $scope.users.push($scope.user); $scope.saveUserDetailsButtonIsVisible = false; $scope.userModScreenIsVisible = false; } // delete a user $scope.deleteUser = function(id) { $scope.user = User.get({userId: id}); $scope.user.$delete(); } } </code></pre> <p>The HTML:</p> <pre><code><div id="user_list" class="listview_list"> <div id="user_row" class="listview_row" ng-repeat="u in users"> <div id="user_username" class="listview_column"><span class="listview_fat">{{u.username}}</span></div> <div id="user_firstname" class="listview_column">{{u.firstName}}</div> <div id="user_lastname" class="listview_column">{{u.lastName}}</div> <button class="listview_row_button" ng-click="deleteUser(u.id)">Delete</button> <button class="listview_row_button" ng-click="showEditScreen(u.id)">Edit</button> </div> </div> <div id="user_new" class="new_user"> <button class="new_user_button" ng-click="showNewScreen()">Add user</button> </div> <div id="user_mod" class="mod_form" ng-show="userModScreenIsVisible"> <form name="mod_user"> <label>Username</label><br/> <input name="username" ng-model="user.username"/><br/> <label>Firstname</label><br/> <input name="firstName" ng-model="user.firstName"/><br/> <label>Lastname</label><br/> <input name="lastName" ng-model="user.lastName"/><br/> <button class="button" ng-click="hideEditScreen()">Close</button> <button class="button" ng-click="updateUserDetails()" ng-show="updateUserDetailsButtonIsVisible">Update</button> <button class="button" ng-click="saveUserDetails()" ng-show="saveUserDetailsButtonIsVisible">Save</button> </form> </div> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload