I'm making an Angular2 SPA with a webAPI REST service that exposes an EntityFramework model.
The quickest way to get going is to load up a big object graph in a single controller action and pass out a big blob of JSON to the client, which can then split it up as it walks the object graph.
Is it considered better practice to build API actions for each object in the object graph and have the JS client pull the graph piecemeal as required?
The piecemeal approach requires many more controllers and actions and, correspondingly, angular services, i.e., more work! Do I need to just grasp the nettle and get on with it?
Actually it depends whether your are using Entity Framework in connected scenarios or in disconnected scenarios. Regarding your case, you are using Entity framework in disconnected scenarios, which mean that DBContext doesn't attach to object graph all the time, because you get the data from database, send it to the client and then close the context. For me, I would recommend to use divide your controllers and actions for each POCO or DTO because this will help you to maintain and attach each object individually rather than maintain the whole object graph at once. The problem will start to appear when you start editing or manipulating your entities because in disconnected scenarios you never know which object has been edited or deleted or added in a big object graph. However, you should maintain and manipulate each change in client side directly to the sever to reflect that update.
I don't know if this answers your question, but if you need any further explanation or code sample. please let me know.
I think you have to make one backend action for one angular2 page-level component. User shouldn't wait for extra data loads, only data that needed on this page.
Related
I'm following an Angular2 course having a background of Sencha ExtJS framework.
My question is pretty easy : with AngularJS how do you store and interact with big data structures? In all the course when a Service was retrieving data was always small and was stored in an array.
Why did I mention ExtJS? Because it offers classes called Store to, as the name says, store data and query it, with possibility of filtering,sorting,mapping and so on.
Let's make an example :
I have the list of the airports in the world and I want to offer it in a select. Of course i will setup the service injected to the select that offers the entire list. But then:
-I want to filter it as the user go on typing
-The array containing the data is an array of objects with other properties after the name like the country or the id
Which is the approach to follow?
As per my comments, here's my answer.
In Angular 2 we have smart components, which hosts logic and data, and dumb components which are pure views, with no logic and preferably stateless.
Ideally, you could retrieve your data from the API and deliver it to your smart components either returning the whole data or exposing a stream with RxJS.
An example using RxJS would be:
A service calling the APIs and returning an Observable with the data
A smart component consuming the service's data, in the form of a Subscription
One or more dumb component in showing the data which is pushed down by the smart component (acting as a container)
At this point, your data manipulation could reside either in the service or in the smart component (it depends on what you need to transform and how).
To manipulate the data, I suggest you use RxJS which offers the possibility to chain streams and filter, aggregate, map, ... methods. It is asynchronous.
If you can go for something less complex but blocking (it depends on your requirements), I'd suggest you use Lodash, which brings methods for collections to chain, map, filter, and aggregate data.
I'm trying to create an off-line data collection app, using AngularJS.
I think, adding Breeze.js should help with saving and querying data to and from the browser local storage:
1) present the user with angular data entry form
2) when the "save" button is clicked - create a new Breeze entity and store it locally
3) the next time this form is used - create a second entity, and add/save it as a part of the same collection
I was wandering if anyone have tried to do something similar and could give me some pointers of how this is done.
I think it's viable and these links should help you to get started:
http://www.breezejs.com/documentation/querying-locally
You also might want to check this Angular sample aswell:
http://www.breezejs.com/samples/todo-angular
One caveat you have to have in mind is that Breeze will need to load the model's metadata from somewhere. Typically you hit a Web API asynchronously and get the metadata from there. However, on your particular scenario you should give a look at trying to load your metadata from a script file. Here's an how-to and discussion about it:
http://www.breezejs.com/documentation/load-metadata-script
Basically I'm writing an app and am using Sails, MongoDB and Node JS for the back end. I'll use Sail's API features and was wondering what would be the best way to make the app realtime.
For instance I could use AJAX to call the API and manipulate the DOM using jQuery and update the DB through $.post then let the model update the db in the backend, however I'm finding this approach quite cumbersome. Not to mention I can see the code could become quite difficult to maintain after a while.
I've been doing some research and - if I understood correctly - it seems I could use either Backbone, Angular or Knockout to manipulate the data/DOM on the front end, however I'm not sure what would be the best approach in my case nor whether any of these would indeed suit my needs:
Being able to get the data dynamically
Update the data and the DOM dynamically as the user interact with the page
Post the updated data dynamically with none or as minimal data transformation on the back end as possible
All the above asynchronously
As I don't want this to become a heated debate on which library is best, so I would like to know only whether any of the aforementioned libraries can do what I need and which is the leanest/simplest/has the lighter learning curve.
I did similar research a while ago and when found AngularJS, just stopped looking any further.
Right to your questions:
Being able to get the data dynamically
It is pure pleasure to do it in Angular. For the very basic functionality you have got $http service which allows you to send http request and register a callback when the data arrives.
For more complicated things there are modules ngResource and Restangular (external).
Update the data and the DOM dynamically as the user interact with the page
For manipulating DOM, Angular introduced concept of directive. It is basically future of the web (Shodow DOM and Web Components) right now. At this time point, there is nothing more elegant out there.
Post the updated data dynamically with none or as minimal data transformation on the back end as possible
Yes. JSON.
All the above asynchronously.
Yes, of course.
SailsJS provides interchangeability of HTTP or socket.io connections. In your case I think sockets would be a better fit than AJAX.
When using Silverlight together with a WCF Services library how do you solve the age old possibility of two different users loading a record, making different changes to that record and then updating. In other words when updating how does the WCF service know that the data it retrieved is the same as the data it fetched before applying an update?
Do you need to check the original loaded values against the values in the database (i.e. recall the original query before updating)?
I was hoping that there would be a more out-of-the-box answer.
Do you mean using EntityFramework? If so, here is the strategy I used :
When retrieving data on the client side you see that the "RowState" property of the entity is gone. What I did is I added the property on the client side using the "partial class" feature. And I manage locally the value of that RowState value.
When the data goes back to the server for update only send what has been modified filtering by the "RowState" property.
On your Update method, call the ApplyCurrentValues() method of the object.
Maybe there is a better solution for that, but that's what I am using on my project; and it works well on my case :)
Good luck
Am using a view file,controller and a helper. am accessing data value through webserver.
Steps:
the controller get value from webserver and set it in the view. the view uses the helper to display the data in some format. But my helper again calls the webserver method to get the inner values. Is it correct the helper accessing webservice method? Is it the correct way of programming in mvc?
Thanks,
IMO, a webservice is just another datasource and should be accessed via the model. If it's me, I handle it by either creating a new model for the service call (if the service call is in support of an existing entity, it may make more sense to make the call in that entity's model itself). My controller calls the model method, sends the data to my view which, in turn, forwards that data on to the helper.
This maintains the MVC separation, but still allows the data you need to make it's way into the helper where you need it.
I will tell you what is written in the Ruby on Rails book. I can not remember the title right now but...
Helpers are usually used for view rendering not for server calls.
Hope it helps.