Angular UI router resolving gets a promise after which the post request becomes null
I have a problem with a Ui router using angular v1.3.15 and ui-router v0.2.8. I've set up nested state routing and I allow promises to load views with data as well. My problem comes when I resolve to promise to show a previously saved "job" and try to add a new "job" via a POST request. I get an error: "job cannot be null". The weird thing is that when I don't allow the GET promise to show the previous work messages, my POST works as expected (keeping the data that is there).
I allow promises to fetch data to other views, and in those views I can run PUT requests without any problem, I don't understand where I am going wrong. Although I'm new to angular and may be missing something really simple ...
My app.js; (the first state "home.edit" is accessing the current app and that works fine, my second state gets all the "work", the job works fine)
.state("home.edit",
{
url: "/applications/edit/:applicationId",
templateUrl: "app/applicationEdit/applicationEdit.html",
controller: "applicationEditCtrl as vm",
resolve:
{
applicationEditResource: "applicationEditResource",
application: function (applicationEditResource, $stateParams)
{
var applicationId = $stateParams.applicationId;
return applicationEditResource.get(
{ applicationId: applicationId }).$promise;
},
}
})
.state("home.edit.work", {
url: "/Work",
templateUrl: "app/applicationEdit/applicationEditWork.html",
controller: "workEditCtrl as vm",
resolve:
{
workEditResource: "workEditResource",
work: function (workEditResource) {
return workEditResource.get( ).$promise;
}
},
})
My workEditResource;
return $ resource (appSettings.serverPath + "api / works /: applicationId", null,
{
'get':
{
isArray: true,
method: 'GET',
headers: { 'Authorization': 'Bearer ' + currentUser.getProfile().token }
},
'save': {
method: 'POST',
headers: { 'Authorization': 'Bearer ' + currentUser.getProfile().token }
}
});
}
My workEditCtrl;
.controller("workEditCtrl",
["application",
"work",
"workEditResource",
workEditCtrl]);
function workEditCtrl(application, work, workEditResource) {
var vm = this;
vm.fail = '';
vm.message = '';
vm.work = work;
vm.application = application;
vm.work.applicationId = vm.application.applicationId;
if (vm.work && vm.application.applicationId) {
vm.title = "Hantera arbete " + vm.application.applicationId
}
//sparar nytt arbete med ansökans ID
vm.submit = function () {
vm.fail = '';
vm.message = '';
workEditResource.save(vm.work,
function(data){
vm.message = "Nytt arbete sparat"
}),
function (response) {
vm.fail = "Formuläret är inte korrekt ifyllt, var vänlig kontrollera uppgifterna och försök igen.";
};
}
}
} ());
My API controller;
public IHttpActionResult Post([FromBody] Work work)
{
try
{
if (work == null)
{
return BadRequest("Work can not be null");
}
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
var workRepository = new Models.WorkRepository();
var newWork = workRepository.Save(work);
if (newWork == null)
{
return Conflict();
}
return Created<Work>(Request.RequestUri + newWork.WorkId.ToString(), newWork);
}
catch (Exception ex)
{
return InternalServerError(ex);
}
}
Would really appreciate what I'm missing :)
source to share
POST is for creating a new record and this is similar to how you use it, however when resolving a work
previous record, what you go through workEditResource.save
is an existing record, not a new one.
I suspect the $ resource handler is getting confused by the ID provided in the work object, so it tries to POST to the PUT url for that work ID, not POST to the url to create a new record.
EDIT: To solve this, you have to use separate variables in your controller for two - perhaps an vm.previousWork
array of old work to view and vm.work
for the new work you are "creating".
source to share