We Keep Coding

Angularjs CRUD delete issue (GET called in DELETE method)

I am trying to consume my spring rest service using angularjs client following this link
Create,update and read parts are working. When I try to delete, its showing this error.
Error: [$resource:badcfg] Error in resource configuration for action
get. Expected response to contain an object but got an array
(Request: GET http://localhost:8080/SpringRestExample/employee)
Why i am getting GET request in DELETE method?
employee_service.js
'use strict';
App.factory('Employee', ['$resource', function ($resource) {
return $resource(
'http://localhost:8080/SpringRestExample/employee/:id',
{id: '#employeeId'},
{
update: {
method: 'PUT'
}
}
);
}]);
employee_controller.js
'use strict';
App.controller('EmployeeController', ['$scope', 'Employee', function($scope, Employee) {
var self = this;
self.employee= new Employee();
self.employees=[];
self.fetchAllEmployees = function(){
self.employees = Employee.query();
};
self.createEmployee = function(){
self.employee.$save(function(){
self.fetchAllEmployees();
});
};
self.updateEmployee = function(){
self.employee.$update(function(){
self.fetchAllEmployees();
});
};
self.deleteEmployee = function(identity){
var employee = Employee.get({employeeId:identity}, function() {
employee.$delete(function(){
console.log('Deleting employee with id ', identity);
self.fetchAllEmployees();
});
});
};
self.fetchAllEmployees();
self.submit = function() {
if(self.employee.employeeId==null){
console.log('Saving New Employee', self.employee);
self.createEmployee();
}else{
console.log('Updating employee with id ', self.employee.employeeId);
self.updateEmployee();
console.log('Employee updated with id ', self.employee.employeeId);
}
self.reset();
};
self.edit = function(employeeId){
console.log('id to be edited', employeeId);
for(var i = 0; i < self.employees.length; i++){
if(self.employees[i].employeeId === employeeId) {
self.employee = angular.copy(self.employees[i]);
break;
}
}
};
self.remove = function(employeeId){
console.log('id to be deleted', employeeId);
if(self.employee.employeeId === employeeId) {//If it is the one shown on screen, reset screen
self.reset();
}
self.deleteEmployee(employeeId);
};
self.reset = function(){
self.employee= new Employee();
$scope.myForm.$setPristine(); //reset Form
};
}]);

Your issue could be when you call Employee.get({employeeId:identity}, ...) prior to deleting the employee. This will load the employee before deletion and it will do a GET request on 'http://localhost:8080/SpringRestExample/employee/:id'.
For this query to work properly, you need to provide id, which you haven't done, so it might just be leaving out that part of the URL. You provided employeeId, which is only used for mapping the id parameter to the Employee objects. Try replacing the query above with {id: identity}.

AngularJS Jasmine Tests

I've been learning AngularJS for a while now and am finally getting my head around how it works after being a back-end developer for years.
However, I'm having an enormous amount of trouble understanding how unit testing works with Karma + Jasmine.
Every article I read either stops at testing a controller $scope variable for a value or dives so far into the deep end I get lost in the first paragraph.
I'm hoping someone can write a demo test for this controller so I can get my head around how to test controller functions with private variables etc.
financeApp.controller('navController', ['$scope', '$resource', '$cookies', '$location', function ($scope, $resource, $cookies, $location) {
// Set default values
$scope.resultList = [];
$scope.cookieExp = moment().add(3, 'months').toDate();
$scope.dataLoaded = true;
$scope.codesList = [];
// Update watchlist item stock prices
$scope.updateWatchItem = function (items) {
sqlstring = items.join("\",\"");
var financeAPI = $resource('https://query.yahooapis.com/v1/public/yql', {callback: "JSON_CALLBACK" }, {get: {method: "JSONP"}});
financeAPI.get({q: decodeURIComponent('select%20*%20from%20yahoo.finance.quote%20where%20symbol%20in%20(%22' + sqlstring + '%22)'),
format: 'json', env: decodeURIComponent('store%3A%2F%2Fdatatables.org%2Falltableswithkeys')})
.$promise.then(function (response) {
var quotes = response.query.results.quote;
quotes = Array.isArray(quotes) ? quotes : [quotes];
quotes.forEach(function (quote) {
$scope.createWatchItem(quote);
});
}, function (error) {
alert("ERROR: There was an issue accessing the finance API service.");
});
};
// Add a new watchlist item (triggered on button click)
$scope.newWatchItem = function () {
var newcode = $scope.asxcodeinput;
if (newcode == null) {
alert('Please enter a valid ASX equities code...');
return;
}
else if ($scope.codesList.indexOf(newcode + '.AX') > -1) {
alert('You are already tracking ' + newcode.toUpperCase() + '!');
return;
}
$scope.dataLoaded = false;
var financeAPI = $resource('https://query.yahooapis.com/v1/public/yql', {callback: "JSON_CALLBACK" }, {get: {method: "JSONP"}});
financeAPI.get({q: decodeURIComponent('select%20*%20from%20yahoo.finance.quote%20where%20symbol%20in%20(%22' + newcode + '.AX%22)'),
format: 'json', env: decodeURIComponent('store%3A%2F%2Fdatatables.org%2Falltableswithkeys')})
.$promise.then(function (response) {
$scope.dataLoaded = true;
var quote = response.query.results.quote;
if(quote.StockExchange != null) {
$scope.createWatchItem(quote);
$cookies.putObject('codesCookie', $scope.codesList, {expires: $scope.cookieExp});
$location.path('/' + (quote.Symbol).split('.')[0].toUpperCase());
}
else {
alert("Woops! Looks like that stock doesn't exist :(");
}
}, function (error) {
alert("ERROR: There was an issue accessing the finance API service.");
});
$scope.asxcodeinput = "";
};
// Delete a watchlist item (triggered on delete icon click)
$scope.deleteWatchlistItem = function (asxcode) {
$scope.resultList.forEach(function (result, key) {
if(result.Symbol == asxcode) {
$scope.resultList.splice(key, 1);
}
});
$scope.codesList.forEach(function (code, key) {
if(code == asxcode) {
$scope.codesList.splice(key, 1);
}
});
$cookies.putObject('codesCookie', $scope.codesList, {expires: $scope.cookieExp});
$location.path('/');
};
// Add new watchlist item to lists of watched items
$scope.createWatchItem = function (quote) {
$scope.resultList.push(quote);
$scope.codesList.push(quote.Symbol);
};
// Get current page for navigation menu CSS
$scope.isActive = function (location) {
return location === $location.path();
};
// If the cookie is set and not empty, populate the watchlist items with the cookie contents
if($cookies.getObject('codesCookie') && $cookies.getObject('codesCookie').length > 0) {
$scope.updateWatchItem($cookies.getObject('codesCookie'));
}
}]);
Also, if anyone can recommend an easy to read article on unit testing in AngularJS I'd appreciate it.

That is a big lump to start testing with. I suggest looking at the tutorial page REST and Custom Services on the angular site and put the resource stuff in a service.
I suggest viewing some good videos on jasmine at https://www.youtube.com/channel/UC4Avh_hoUNIJ0WL2XpcLkog
I do recommend you view up to and including the one on spies.

AngularJS RESTful Web Service - Delete row from table

I need to delete a row from my table but I don't want to reload or refresh all my table in order to see the updated rows.
var demoApp = angular.module("demoApp", ["ngResource"]);
// Controller
demoApp.controller("categoryController", function($scope, deleteCategorieService, categoriesService){
$scope.categories = categoriesService.query();
$scope.deleteCategory = function(id){
deleteCategoryService.deleteCategory({id: id});
// I want to avoid this method to refresh my table.
// $scope.categories = categoriesService.query();
};
});
// Factories
demoApp.factory("deleteCategorieService", function($resource){
return $resource("/demopro/deleteCategory/:id", {}, {
deleteCategory: {
method: "DELETE",
params: {id: "#id"}
}
});
});
demoApp.factory("categoriesService", function($resource){
return $resource("/demopro/categories", {}, {
listAllCategories : {
method: "GET",
isArray: true
}
});
});
How can I do that?

You still have to make the server call to delete the item but, to simply remove it from the view without reloading the whole list from the server, loop through your $scope.categories looking for the id of the item you are deleting, when found, remove from the array.
var i = $scope.categories.length;
while (i > 0) {
if ($scope.categories[i].id === id) {
$scope.categories.splice(i, 1);
break;
}
i--;
}
You can also do a positive loop which I normally do but I recently was told this back-to-front loop is supposed to be much faster. YMMV.
for (var i = 0; i < $scope.categories.length; i++) {
if ($scope.categories[i].id === id) {
$scope.categories.splice(i, 1);
break;
}
}
If you are using 2-way binding in your view, the HTML should update without the item you just deleted without having to requery the entire collection.

If the problem is that you want to avoid the flickering that happens when refreshing the list, just update the list in the success callback. Something like:
$scope.deleteCategory = function(id){
deleteCategoryService.deleteCategory({id: id},
function(success) {
$scope.categories = categoriesService.query();
});
};

Laravel/Angularjs: Insert into pivot table with less queries

I succeeded at creating a simple "add topic" form to test laravel's pivot operations. It consists of a title, body and tag checkboxes. My models are Post, Tag and the pivot PostTag.
After reading the Laravel documentation on updating pivot tables, it seems to me that I'm making way too many queries to simply create a new topic and update the pivot's table. Also, the way I pass on the checkbox values (tags) seems kind of sloppy to me.
Here is my Angular controller:
app.controller('NewPostController', function($scope, $http) {
$scope.selection = [];
$http.get('/new_post').success(function(tags) {
$scope.tags = tags;
});
$scope.toggleSelection = function toggleSelection(tag) {
var idx = $scope.selection.indexOf(tag);
// is currently selected
if (idx > -1) {
$scope.selection.splice(idx, 1);
}
// is newly selected
else {
$scope.selection.push(tag);
}
};
$scope.addPost = function() {
$scope.post.selection = $scope.selection;
$http.post('new_post', $scope.post).success(function() {
});
}
... and my Laravel controller:
class PostController extends BaseController {
public function add() {
if($post = Post::insertGetId(array('title' => Input::json('title'),
'body' => Input::json('body')))) {
$tags = [];
foreach(Input::json('selection') as $tag) {
array_push($tags, $tag['id']);
}
$new_post = Post::find($post);
$new_post->tags()->sync($tags);
}
}
}
With this I'm actually making 5 queries to achieve the final result. However, I followed Laravel's documentation on this. Should I use a normal query instead?
Thanks!!

Angularjs must refresh page to see changes

What I have is simple CRUD operation. Items are listed on page, when user clicks button add, modal pops up, user enters data, and data is saved and should automatically (without refresh)be added to the list on page.
Service:
getAllIncluding: function(controllerAction, including) {
var query = breeze.EntityQuery.from(controllerAction).expand(including);
return manager.executeQuery(query).fail(getFailed);
},
addExerciseAndCategories: function(data, initialValues) {
var addedExercise = manager.createEntity("Exercise", initialValues);
_.forEach(data, function(item) {
manager.createEntity("ExerciseAndCategory", { ExerciseId: addedExercise._backingStore.ExerciseId, CategoryId: item.CategoryId });
});
saveChanges().fail(addFailed);
function addFailed() {
removeItem(items, item);
}
},
Controller:
$scope.getAllExercisesAndCategories = function() {
adminCrudService.getAllIncluding("ExercisesAndCategories", "Exercise,ExerciseCategory")
.then(querySucceeded)
.fail(queryFailed);
};
function querySucceeded(data) {
$scope.queryItems = adminCrudService.querySucceeded(data);
var exerciseIds = _($scope.queryItems).pluck('ExerciseId').uniq().valueOf();
$scope.exerciseAndCategories = [];
var createItem = function (id, exercise) {
return {
ExerciseId: id,
Exercise : exercise,
ExerciseCategories: []
};
};
// cycle through ids
_.forEach(exerciseIds, function (id) {
// get all the queryItems that match
var temp = _.where($scope.queryItems, {
'ExerciseId': id
});
// go to the next if nothing was found.
if (!temp.length) return;
// create a new (clean) item
var newItem = createItem(temp[0].ExerciseId, temp[0].Exercise);
// loop through the queryItems that matched
_.forEach(temp, function (i) {
// if the category has not been added , add it.
if (_.indexOf(newItem.ExerciseCategories, i.ExerciseCategory) < 0) {
newItem.ExerciseCategories.push(i.ExerciseCategory);
}
});
// Add the item to the collection
$scope.items.push(newItem);
});
$scope.$apply();
}
Here is how I add new data from controller:
adminCrudService.addExerciseAndCategories($scope.selectedCategories, { Name: $scope.NewName, Description: $scope.NewDesc });
So my question is, why list isn't updated in real time (when I hit save I must refresh page).
EDIT
Here is my querySuceeded
querySucceeded: function (data) {
items = [];
data.results.forEach(function(item) {
items.push(item);
});
return items;
}
EDIT 2
I believe I've narrowed my problem !
So PW Kad lost two hours with me trying to help me to fix this thing (ad I thank him very very very much for that), but unfortunately with no success. We mostly tried to fix my service, so when I returned to my PC, I've again tried to fix it. I believe my service is fine. (I've made some changes as Kad suggested in his answer).
I believe problem is in controller, I've logged $scope.items, and when I add new item they don't change, after that I've logged $scope.queryItems, and I've noticed that they change after adding new item (without refresh ofc.). So probably problem will be solved by somehow $watching $scope.queryItems after loading initial data, but at the moment I'm not quite sure how to do this.

Alright, I am going to post an answer that should guide you on how to tackle your issue. The issue does not appear to be with Breeze, nor with Angular, but the manner in which you have married the two up. I say this because it is important to understand what you are doing in order to understand the debug process.
Creating an entity adds it to the cache with an entityState of isAdded - that is a true statement, don't think otherwise.
Now for your code...
You don't have to chain your query execution with a promise, but in your case you are returning the data to your controller, and then passing it right back into some function in your service, which wasn't listed in your question. I added a function to replicate what yours probably looks like.
getAllIncluding: function(controllerAction, including) {
var query = breeze.EntityQuery.from(controllerAction).expand(including);
return manager.executeQuery(query).then(querySucceeded).fail(getFailed);
function querySucceeded(data) {
return data.results;
}
},
Now in your controller simply handle the results -
$scope.getAllExercisesAndCategories = function() {
adminCrudService.getAllIncluding("ExercisesAndCategories", "Exercise,ExerciseCategory")
.then(querySucceeded)
.fail(queryFailed);
};
function querySucceeded(data) {
// Set your object directly to the data.results, because that is what we are returning from the service
$scope.queryItems = data;
$scope.exerciseAndCategories = [];
Last, let's add the properties we create the entity and see if that gives Angular a chance to bind up properly -
_.forEach(data, function(item) {
var e = manager.createEntity("ExerciseAndCategory");
e.Exercise = addedExercise; e.Category: item.Category;
});

So I've managed to solve my problem ! Not sure if this is right solution but it works now.
I've moved everything to my service, which now looks like this:
function addCategoriesToExercise(tempdata) {
var dataToReturn = [];
var exerciseIds = _(tempdata).pluck('ExerciseId').uniq().valueOf();
var createItem = function (id, exercise) {
return {
ExerciseId: id,
Exercise: exercise,
ExerciseCategories: []
};
};
// cycle through ids
_.forEach(exerciseIds, function (id) {
// get all the queryItems that match
var temp = _.where(tempdata, {
'ExerciseId': id
});
// go to the next if nothing was found.
if (!temp.length) return;
// create a new (clean) item
var newItem = createItem(temp[0].ExerciseId, temp[0].Exercise);
// loop through the queryItems that matched
_.forEach(temp, function (i) {
// if the category has not been added , add it.
if (_.indexOf(newItem.ExerciseCategories, i.ExerciseCategory) < 0) {
newItem.ExerciseCategories.push(i.ExerciseCategory);
}
});
// Add the item to the collection
dataToReturn.push(newItem);
});
return dataToReturn;
}
addExerciseAndCategories: function (data, initialValues) {
newItems = [];
var addedExercise = manager.createEntity("Exercise", initialValues);
_.forEach(data, function (item) {
var entity = manager.createEntity("ExerciseAndCategory", { ExerciseId: addedExercise._backingStore.ExerciseId, CategoryId: item.CategoryId });
items.push(entity);
newItems.push(entity);
});
saveChanges().fail(addFailed);
var itemsToAdd = addCategoriesToExercise(newItems);
_.forEach(itemsToAdd, function (item) {
exerciseAndCategories.push(item);
});
function addFailed() {
removeItem(items, item);
}
}
getAllExercisesAndCategories: function () {
var query = breeze.EntityQuery.from("ExercisesAndCategories").expand("Exercise,ExerciseCategory");
return manager.executeQuery(query).then(getSuceeded).fail(getFailed);
},
function getSuceeded(data) {
items = [];
data.results.forEach(function (item) {
items.push(item);
});
exerciseAndCategories = addCategoriesToExercise(items);
return exerciseAndCategories;
}
And in controller I have only this:
$scope.getAllExercisesAndCategories = function () {
adminExerciseService.getAllExercisesAndCategories()
.then(querySucceeded)
.fail(queryFailed);
};
function querySucceeded(data) {
$scope.items = data;
$scope.$apply();
}