Using Tastypie and AngularJS $resource I would like to perform a set of update, create and delete operations.
Currently, I broadcast an event:
$rootScope.$broadcast('save');
That event is captured by each controller responsible for creating, updating and deleting using the $resource service:
ResourceService.update({id:$scope.id}, $scope.element).$promise.then(function(element) {
$scope.$emit('saved');
});
Now, this cause some race conditions both at client side and on server side.
What would be the simplest way to perform this set of operations as a batch in the REST way?
I recently played around with Angular HTTP Batcher
however if you want a more generic JS only async helper you can use Async
I think those are mostly what you are looking for, the blog post from the Angular HTTP Batcher is a good read.
Related
I am working on one web application which is Single Page Application.
In that my front end will be on server and back end will be on other server.
So for each add/edit/delete/fetch operation , i need to call an Ajax request to the Back End.
There are plenty of ajax requests till now.So is there any way to handle them. I mean in angular js is there any way to do so?
FYI. I am bit new in the Angular Js.
Thanks.
You can create factories using ngResource https://docs.angularjs.org/api/ngResource or individually using make individual requests using $http service provider https://docs.angularjs.org/api/ng/service/$http. I would recommend to go for factories method. You will find this link useful if you are looking for ward to experiment it https://www.sitepoint.com/creating-crud-app-minutes-angulars-resource/
I am using with ui-route by the way
But I want to create something useful for all the site
That every time there is a request to the server
the icon will appear
You can do this a number of ways. Write an angular service that you call inside every request that sets a variable to true when a request goes out, and false when the response comes back. Then attach an ng-show to an element with the icon set to the variable.
Also you can look into the $http interceptors, which might prove useful as then you would not have to call the service for every request manually. Downside, it would trigger on every request which may not be the desired effect.
Background
I am trying to make a single page real-time application that uses a PHP , MYSQL back end and AngularJS frontend
My back end is using CakePHP framework which serves a JSON API and the front uses ngResource in AngularJS to access this API.
I have got 'Ratchet WebSockets for PHP' working, which can trigger a response to the browser via websockets when something updates in the back end.
My Incomplete Solutions
Solution 1: Use the response via the websocket to update the AngularJS $scope object through some kind of $scope.model.push(websocket.data) method?
Solution 2: Use the response via the websocket to trigger Refresh on the ngResource which would refresh the $scope object completely?
Question
Are my solutions viable? and how could I achieve it ?
You just need to read events from the WS and populate them using $emit and $broadcast, then your controllers can subscribe to whichever events are relevant to them.
Take a look at:
angular websocket factory
AngularJS and WebSockets beyond
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.
I would like to know what is the proper way to get data from backend when I want to use angularJs (or similar) in my web app?
The only way I see is to render html (static html with js scripts - e.g. angularjs) with no data from backend and then download data via ajax requests from my backend API. But I think this solution is not good because of many HTTP requests:
For example I have blog website, I want to show a post, comments, and the related posts on the sidebar. So probably I need to make at least 3 HTTP requests to get the data unless I will prepare API to get all I need in one request.
I can also imagine websites that could have much more HTTP requests. Is it a proper way to do this? Doesn't it overload a server? Or my way of thinking is so wrong?
It is either websockets or HTTP requests. Preparing API to get all in one request is one option. Another two options are XMLHttpRequest/iframe streaming which is a method of a technique known as Comet.
I would go with websockets since it is supposed to solve the problem that was previously solved with weird applications like iframe streaming. There are libraries that properly handles fallbacks if the browser does not support websockets:
web-socket-js ( this needs a websocket server )
Socket.IO ( this has a node.js module and also implements a kind of unnecessary protocol on top of websocket protocol )
If you choose the old methods there will be many problems waiting for you on the road like XmlHttpRequest.responseText while loading (readyState==3) in Chrome
I think you have to distinguish two cases:
You render the page for the first time.
You update parts of your page when something changes
Of course in the second case it makes sense to fetch only parts of the page via individual HTTP requests. However, in the first case you can simply serialize your complete model as one JSON object and embed it in the page like this:
<script type="text/javascript">
var myCompleteModel = { /* Here goes your model */ };
<script>
The controllers of the components on your page can then access this global variable to extract the parts being relevant for them. You can also wrap access to the initial model in a service to avoid accessing a global variable in all your controllers.