BreezeJS datacontext POST in angular turns into 'GET' - angularjs

Question

I have a factory to retrieve json from my own server via POST, I'm getting the errror "TypeError: Cannot read property '$http' of undefined {query: ctor, stack: (...), message: "Cannot read property '$http' of undefined"}". Walking through breeze.debug.js I see my request is turned into a GET and thus mungs up the call. How do I force Breeze to execute my POST? Below is the datacontext based on the BreezeJS documentation on doing posts at http://www.getbreezenow.com/documentation/breezeajaxpostjs :
angular.module('rmBreezeApp.datacontext', [])
.factory('datacontext', function ($http, breeze, jsonResultsAdapter, logger, model, RMServer,AuthService) {
breeze.ajaxpost();
var postData = function (selector, argsArray) {
return {"selector": selector, "arguments": argsArray}
};
var ds = new breeze.DataService({
serviceName: RMServer,
hasServerMetadata: false,
useJsonp: false,
jsonResultsAdapter: jsonResultsAdapter
});
var manager = new breeze.EntityManager({dataService: ds});
model.initialize(manager.metadataStore);
return {
getShiftsForWeek: getShiftsForWeek
};
/*** implementation details ***/
function getShiftsForWeek() {
var arguments = [];
var query = breeze.EntityQuery.from("session?token=" + AuthService.authToken())
.withParameters({
$method: 'POST',
$encoding: 'JSON',
$data: postData("getShiftsForWeek",[])
});
return manager.executeQuery(query).then(
function (data) {
return data;
},
function (reject) {
console.log(reject);
}
)
}
});
I've got these includes in my index.html
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/breezejs/breeze.debug.js"></script>
<script src="lib/breeze.js.labs/breeze.angular.js"></script>
<script src="lib/breeze.js.labs/breeze.ajaxpost.js"></script>

Answer 1

Good thing you wrote a plunker. It revealed a number of errors and opportunities which I'll summarize here.
I forked your plunker and "fixed it". It's now returning data and displaying on screen.
I tried not to change too much but I did re-organize for what seems to me a readable style. I begin by showing the complete application component set at the top:
angular.module('myApp', ['breeze.angular'])
.value('jsonResultsAdapter', createJsonResultsAdapter())
.service('datacontext', DataContext)
.service('model', Model)
.controller('sitesCtrl', SitesCtrl)
//.config(configForCORS);
Observations
CORS
Your attempt to configure the browser for CORS (configForCors) makes no difference to my browsers (IE10, Chrome, FF). I don't think it will help you. Either a browser supports CORS or it doesn't. I haven't found any way around that. You're in trouble if you need to support IE8 because it doesn't do CORS.
Configure ajaxAdapter for Breeze
The 'breeze.angular' module does that for you. Including that module as a dependency (angular.module('myApp', ['breeze.angular'])) and then injecting the 'breeze' service into the first service that needs breeze (e.g., Datacontext) is all you needed to do.
Configure Breeze for POST queries
Breeze by default sends query requests as GET requests. Your service expects POST requests. Breeze can do that.
You neglected to include the breeze.ajaxpost.js library script tag in your index.html. You need that Breeze Labs plug-in to make POST queries.
You also have to tell the Angular ajaxAdapter about it. Look in DataContext#configAjaxAdapter. You'll see:
// configure that adapter to use ajaxPost plugin
breeze.ajaxpost(ajaxAdapter);
Actually, you don't need to specify the ajax adapter; breeze will enable POST query support for whatever is the current default ajax adapter instance if you write this:
// configure that adapter to use ajaxPost plugin
breeze.ajaxpost();
But I was more explicit because I had to get the ajax adapter anyway in order to set your default headers:
// default ajax adapter is already a wrapper around current $http
// as a result of injecting the breeze service.
var ajaxAdapter = breeze.config.getAdapterInstance("ajax");
// add the app-specific default headers
// no need to set "Content-Type" for JSON; breeze does that by default
ajaxAdapter.defaultSettings = {
headers: {
"JsonStub-User-Key": "2d3b6e81-b556-4049-ab54-ec8422237c63",
"JsonStub-Project-Key": "a753777a-bbff-4db6-8755-ea8c5e60f032"
}
};
Notice I called getAdapterInstance, not initializeAdapterInstance. We want to modify the existing instance created by breeze.angular, not overwrite it with a new one.
Client metadata and jsonResultsAdapter
After making those changes, I was getting data from the service. Unfortunately, the
shape of that data didn't quite match the expectations in the jsonResultsAdapter or the metadata.
The JSON arrives in an object with a pathwaySchool property. That property returns an array. The array contains the entity data of interest; the array itself is useless and should not become a Breeze entityType.
I trained the 'jsonResultsAdapter.visitNode' method to recognize objects with a "buildingCode" property. Such objects contain the data for the PathwaySchool entities ... and we say so by returning {entityType: "PathwaySchool"} for those nodes.
Patrick's metadata describe a type named "Site". But his jsonResultsAdapter called the type "PathwaySchool". Had to call it one thing or the other. I chose "PathwaySchool".
The metadata also said we should expect an "_id" property that is the entity key. There was no such property in the data. The buildingCode property looked most like a unique identifier so I made that property the key. I also added a name property so we can display the school on screen.
Extracting entities from the ajax results
The service returns a deeply nested object. The datacontext should hide that mess from the ViewModel/Controller.
So the success callback digs in and extracts the array of "PathwaySchool"s.
return data.results[0].pathwaySchool;
We should do something if the ajax call fails. The fail callback writes the error to the console (using Angular's $log service for future testability) and then re-rejects the error.
Re-rejecting is important! We want to make sure the caller sees the error so it can process it appropriately. If we did nothing, the Angular would assume we had fixed the error and pass undefined to the caller's success callback. That's not what we want. We want to pass the error along to the caller's fail callback. So we re-reject the error and return that (failed) promise.
ViewModel/Controller
Patrick's controller called the datacontext and simply assigned the results of the call to the $scope.sites array, expecting angular to bind to those results:
$scope.sites = datacontext.getSites(); // Not good!
That won't work. We don't want Angular to display the promise. We want to set the $scope.sites array after the promise resolves with the appropriate entities.
We should also be prepared to display an error if our call for data fails.
Here's how I get the sites into $scope:
$scope.sites = [];
datacontext.getSites()
.then(function(sites){
$scope.error = ''; // clear previous error if any
$scope.sites = sites;
})
.catch(function(error){
$scope.error = "'getSites' failed: " + error.message +
". Check console log for details.";
});
The View can bind to $scope.error if there's a problem.
View Binding
Finally, we display the results or error on screen. I need a small amount of HTML for the purpose:
<div ng-controller="sitesCtrl">
<div ng-repeat="site in sites">#{{site.buildingCode}} {{site.name}}</div>
<p class="errorMessage" ng-if="error">{{error}}</p>
</div>

Answer 2

I added a passing test that looks like yours to the ngDocCode sample:
var resource = '/breeze/Northwind/CustomersWithFilterOptions?token=1234ABCD';
beforeEach(function () {
breeze.ajaxpost(); // add POST option to ajax adapter
em = newEm(); // fresh EntityManager before each test
});
...
it("by CompanyName w/ appended URL query string", function (done) {
// See SO question
// http://stackoverflow.com/questions/27364078/breezejs-datacontext-post-in-angular-turns-into-get
var companyName = 'Die Wandernde Kuh';
// Notice the query string appended to the resource
EntityQuery.from(resource + '?token=1234ABCD')
.withParameters({
$method: 'POST',
$encoding: 'JSON',
$data: {
CompanyName: companyName
}
})
.using(em).execute()
.then(success)
.then(done, done);
function success(data){
expect(data.results).to.have.length(1);
var cust = data.results[0];
expect(cust.CompanyName).to.equal(companyName);
}
});
The request over the network looks like this:
POST /breeze/Northwind/CustomersWithFilterOptions?token=1234ABCD HTTP/1.1
Host: localhost:58066
Connection: keep-alive
Content-Length: 35
Pragma: no-cache
Cache-Control: no-cache
Accept: application/json, text/plain, */*
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)
Content-Type: application/json;charset=UTF-8
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8
The request payload is
{"CompanyName":"Die Wandernde Kuh"}
I'm not sure what's different between ours and yours. But the ball is in your court to provide a repro (plunker or jsFiddle).
I didn't see anything glaringly obvious in your question's code. I don't know why you're injecting $http but that shouldn't hurt.
I don't see where you're taking the dependency on the breeze labs 'breeze.angular' module but you must be doing it somewhere or Angular would have failed ("can't find breezeProvider") when it injected "breeze" into your "datacontext" factory.