Ember.js ember-data findAll objects on the remote server - javascript

Folks! Are there any examples of how ember-data and remote back-end server works together (separate applications - client-side with ember.js and abstractive back-end server, Rails for example)?
And the second question here - how to make array attribute (array of objects) with ember-data model?

There is a guide on the Ember site, which provides a great explanation;
http://emberjs.com/guides/models/finding-models/
If you're using Rails you will probably be using the REST Adapter
http://emberjs.com/guides/models/the-rest-adapter/
This is a fully-functioning Ember app that uses ember-data and Rails:
https://github.com/dgeb/ember_data_example/
The last example may look like the application is integrated, but the client-side and back-end are completely separate. To change where the adapter expects to be sending data you can define a namespace and /or a url in your adapter:
App.Adapter = DS.RESTAdapter.extend({
url: "http://www.domain.com/path/to/remote_app/",
namespace: "api/v1"
});

Related

How to set Backbone.js to include model name in JSON post?

I've been working on a Backbone.js project that syncs to a Google App Engine REST server I've also put together. I'm using the Appengine-Rest-Server project code to enable the REST interface. IT works really well, but there is one problem. When I post a new model to it, it expects a JSON post in the form of:
{ 'modelname' : {'attribute1':'attribute','attribute2':'attribute'}}
When I use python and the requests library to POST this data to my REST server... it works fine.
Backbone.js appears to be sending POST requests without the model name a la
{'attribute1':'attribute','attribute2':'attribute'}
Now, not being an expert on what formats are 100% RESTful, I'm not sure whether my REST server is improperly configured (in which case I don't expect you guys to be able to help with the code), whether Backbone.js is improperly configured, or whether both formats are potentially RESTful and I just need to figure out how to get backbone to add in the model name.
So, to close, is one or both of these formats compatible with a truly RESTful API? If requiring the model name in the JSON is not a gross violation of making a RESTful API, does anyone know how I can make Backbone send out post requests in the proper format?
Thanks!
Most elegant way:
YourModel = Backbone.Model.extend({
name: 'modelName',
toJSON: function () {
var data = {};
data[this.name] = _.clone(this.attributes); // or Backbone.Model.prototype.toJSON.apply(this)
return data;
}
});
Or you can directly pass data to the options
model.save(null, {
data: {
// custom format
}
});

Wireing Breeze (with Angular) to an existing WCF Data Service

The Short
I have an existing WCF Data Service that I would like to wire up to use in an AngularJS SPA using Breeze.
Can anyone show a noobie level example of how to do that with out access to the actual database (just the OData Service)?
The Long
I have an existing WCF Data Service that is already in use by a WPF app.
I experimenting with web development and would like to wire up to that service using Breeze. In case it matters, I am using Angular (and am setting up via the HotTowel.Angular nuget package).
I have done a fair amount of Googling and I am stuck.
I can see two ways outlined from my searching:
The First
Make is to make a Breeze controller on the server side of my web app.
The problem I see with that is the metadata. From my limited understanding I need to tell breeze all the meta data of my WCF Data Service. I know how to get the meta from my WCF Data Service (the url + $Metadata), but I don't know how to tell this to Breeze.
The Second
This way is more vague in implementation. I got it from the accepted answer on this question: Breeze.js with WCF Data Service.
Basically the answer here does not seem to work. It relies on something called the entityModel that I cannot seem to find (I have an entityManager, but not an entityModel. And the entityManager does not have the properties that the entityModel is shown to have.
In the end I like the idea of the second method best. That way I can directly connect to my odata service with out needed my web app to have a "in-between" server component. But I would happily take anything that does not need entity framework to connect to my database.
I tried several variations of the second option, but I just can't seem to get it to work. I also tried the Breeze samples. It has one for OData, but it still relies on having Entity Framework hook up to the source database.
To to clearly summarize what I am asking: I am looking for a Breeze example that connects to an existing WCF Data Service.
We regret that you were mislead by that old StackOverflow answer which was way out of date and (therefore) incorrect. There is no longer a type called entityModel.
I updated the answer there and repeat here the same advice.
The recommended way to configure Breeze so that it talks to a standard OData source (such as a WCF OData service) is
breeze.config.initializeAdapterInstance('dataService', 'OData', true);
Here's how you might proceed with defining an EntityManager and querying the service:
// specify the absolute URL to the WCF service address
var serviceName = "http://localhost:9009/ODataService.svc";
var em = new breeze.EntityManager(serviceName);
var query = breeze.EntityQuery.from("Customers")
.where("CompanyName", "startsWith", "B")
.orderBy("City");
em.executeQuery(query).then(function(data) {
// process the data.results here.
});
There is some documentation on this subject here.
A Web API OData service differs from a WCF OData service in several respects. But you may still find value in the Angular Web API OData sample.

AngularJS - Interaction with mongodb

I am new to MEAN stack, I am trying to create a basic one page application at the moment.
I am trying to connect to the mongodb and then list the values in a certain collection in a controller.
However, when I looked for the answer, I came across this answer
Using AngularJs and MongoDB/Mongoose
Which then confuses me as what is the point of having the code below if you can't use it between angular and mongo ? Or are there other interim steps that use it?
var mongoose = require('mongoose');
var db = mongoose.createConnection('mongodb://localhost:3000/database');
var orderSchema = new mongoose.Schema({
routeFrom : String,
routeTo : String,
leaving: String
});
var Order = db.model('Order', orderSchema);
module.exports = Order;
Edit: The situation i am trying to use it in is such:
Geek.html
<div class="jumbotron text-center">
<h1>Geek City</h1>
<p>{{tagline}}</p>
<ul>
<li ng-repeat="value in dataValues">
{{value.name}}
</li>
</ul>
</div>
GeekController
angular.module('GeekCtrl', []).controller('GeekController', function($scope) {
$scope.tagline = 'The square root of life is pi!';
$scope.dataValues = function(){
var mongo = require('../config/db.js');
var collectionValues = mongo.myCollection.find();
return collectionValues;
};
});
You cannot require db.js config file in Angular because it's not set to be used on the client side. What you describe is so called 'Isomorphic' approach.
What I mean by that: mongo is a database system (roughly speaking). To get data from the database, we usually don't trust the client. So we have some server-side code (PHP, Ruby, Node.js, Java, what have you) which authorizes the client, processes and filters the data and returns it to the client (in this case Angular.js). So your Mongoose models are set to be used by the server-side javascript and that part of the app. That server side should also serve data to Angular so you'd connect to Node.js from Angular, not directly to Mongo. So the same server that (usually) serves your angular files, will also serve the data it reads from mongo.
If you want server-less data with Angular, you can take a look at Firebase.js. It's angular-ready and it could help you not mess around with Mongo, mongoose and the server-side code.
You could try a hybrid approach with something like meteor.js or backbone.js set to work both on client and server, or take a look at this article for more info.
Or for what it's worth, if you want to run your own Mongo, you could start mongo with --rest, then you'd be able to connect to Angular directly to Mongo, at http://somehost:28017/mydatabase or something similar, depending on your setup.
Mongoose is a node module, and as far as I know it doesn't have a front end component, so you won't be using it directly in your frontend js code. It's only going to help you on the server side of your app. If you're relatively new to Node then this stuff can get pretty confusing, since it's all end-to-end javascript and sometimes it's not clear what modules work on the server or frontend, especially since some can do both.
Node, MongoDB, Express, and Mongoose all live on the server.
Angular lives in the browser, and can't use any of the server-side components directly.
Using the MEAN stack, You will be building a node app that uses mongoose to talk to mongodb and express to expose an api to your front end. Then in in your html/js code you'll be using angular and its $http service to talk to the server to get and set data.
There is a great tutorial that walks you through the entire process on scotch.io:
http://scotch.io/bar-talk/setting-up-a-mean-stack-single-page-application

How to execute a create and update operation to an Apache Isis Restful Object using AngularJS

Goodday Folks,
I have implemented a get or read operation using an AngularJS application to invoke a Isis service via an $http call. And displaying the collection on the screen using Angular ng-repeat. My next task is to do a create and update on the same entity using AngularJS. I am aware i have to send some parameters in the endpoint URL. Please, I need both Isis guidance and also importantly AngularJS hints or references or code.
I think i should get some sort of acknowledgment to confirm the create or update is succesful.
Below, is an extract from my code for the getList operation, just for starters.
Your logic might be totally different from this.
Thanks a lot.
sampleApp.controller('CrateUpdateController', function($scope, $http) {
$http({ method:'GET',
url: 'http://localhost:8080/xxx-webapp-1.0-SNAPSHOT/restful/services',
headers: {'Accept': 'application/json'}
}).
success(
function (data) {
//code to process outcome and acknowledgement etc
}
);
});
You might be best doing some Angular tutorials to learn the principles of that library. Then, (as I've mentioned before) take a look at using the Spiro library as the main interface to the RO server (Isis or RO.Net).
You should not mix so much different topics. A good practice is to distinguish the server side interface exposed by your HTTP server (Apache Isis) from the client side code accessing it.
This question should be break down to the following:
How to expose create and delete verbs for an existing resource in Isis
How to use create and delete verbs with Angular
The two topics are very different and it does not make so much sense to ask them together. The main point about having Isis exposing an HTTP interface is exactly to abstract from the client side logic.
As a side note, when accessing restful resources with Angular, try to use $resource instead of $http

Breeze.js - re-target save to custom endpoint

I communicate with OData services by using Breeze.js and wanna be able to get and save data.
So there are two endpoints which should be used to get and save resources:
1. https://domain.com/smth/getdata
2. https://domain.com/smth/postdata
I created a manager which purpose is to get data, and send them back to server if needed:
var smthManager = new EntityManager(http://domain.com/smth/getdata);
After changing entities in smthManager I have to save them (by using endpoind 2). Investigating documentation I have found the next statement:
you can re-target a "save" to a custom server endpoint such as an
arbitrarily named action method on a separate
So here is the code to "re-target a save":
var so = new SaveOptions({ resourceName: "postdata" }); // also tried with resourceName: 'http://domain.com/smth/postdata'
myEntityManager.SaveChanges(null, so );
But after all these manipulations what can I see that request was sent to https://domain.com/smth/getdata/$batch
Breeze with a WebApi or WebApi2 service supports multiple server endpoints. Breeze with an OData service does not because the OData spec itself only supports a single $batch save for a service.
See http://www.odata.org/documentation/odata-v2-documentation/batch-processing/
Note that any Breeze WebApi or WebApi2 service is a superset of what can be provided directly from an OData service and is in general just as easy to expose your model from ( as long as you have a .NET server).

Categories

Resources