Is it possible to update an AngularJS expression via an API call through a Service? - angularjs

I'm looking for a way (and not even sure if this is possible) to update an Angular expression on my HTML page when data is sent to an API.
For example, say I have $scope.message on my .html page. Is there a way I can send a message to an API (e.g. http://...?message=foo) and have my page update with the message sent?
Also, I need the $scope.message to be updated in an Angular Service so it is available to multiple pages within my website.
I am wanting this to be a live update, but if not, I am happy with some code executing on a timer or something similar.
Any suggestions appreciated.
UPDATE
I'm guessing it may not be possible, but just in case I haven't explained it correctly, I'll try and simplify it.
I can only find information about using AngularJS to send GET commands OUT to a URL and receive data back. I need to send a JSON string TO my Angular site to update a variable. So basically as a field updates in my database, I want another server application to send an alert to my Angular site to update the status of this value live. I don't really want to run a constant check of the database if I don't have to.
I am open to any other suggestions on how to achieve this.

if you don't care about old school browsers, you can try using WebSocket, it is similar to a TCP socket, which allows you to push from server to client. I would create a service that manages the websocket connection, and update scope when receiving message. Hope this help. More info here: https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API

Related

Display realtime data in reactjs

I'm sending data from my backend every 10 seconds and I wanted to display that data in reactjs. I've searched on the net to use socket.io to display real-time data. Is there a better way to use it?
If you're dead set on updating your data every 10 seconds, it would make more sense to make a request from the client to the server, as HTTP requests can only be opened from client to server. By using HTTP requests, you won't need to use socket.io, but socket.io is an easy alternative if you need much faster requests.
Depending on how you are generating the data being sent from your backend, specifically if you are using a database, there is most likely a way to subscribe to changes in the database. This would actually update the data in realtime, without a 10 second delay.
If you want a more detailed answer, you'll have to provide more detail regarding your question: what data are you sending? where is it coming from or how are you generating it?
I'm working on an autodialer feature, in which an agent will get a call when I trigger the button from the frontend (using react js language), and then automatically all the leads in the agent assigned portal will get back-to-back calls from agent number. However, because this process is automatic, the agent won't know who the agent has called, so I want to establish a real-time connection so that I can show a popup on the frontend that contains information about the lead who was called.

Handling/Pushing File Updates to User Browsers?

When I make a change to my Backbone web application code on my server, how can I make user's browsers update so they see those changes.
Being a SPA the page rarely if ever refreshes. So even if place hashes/timestamps on my script tags it still wont be adequate enough, ie, this isn't ideal IMO:
...
<script src="js/main.js?t=SOME_HASH"></script>
Does Backbone have a way to handle this?
Backbone being a JS framework that merely gives structure to your applications, it doesn't handle stuff like this. This is something that involves configuration of server and you need to tackle it yourself.
Since you said you have an SPA that rarely refreshes - Your app is probably contacting the server via lots of AJAX requests. You can add an interceptor to these requests on the server that checks if stuff changed on server and sends a shouldReload: true with the response.
You should also have an AJAX interceptor client side that checks for this in response and reloads the page/lets users know about updates on server and give option to reload/restart.
Another option is to implement websockets/polling so that server can push notification about changes to clients. socket.io is a plugin that uses web sockets and falls back to polling.
P.S: You also need to bust the cache as you mentioned in question

Integrate Payment Gateway with IONIC

Don't mark question as duplicate or already asked. If know please answer.
I am trying to integrate payumoney payment gateway in my hybrid app. I went through some tutorials and finally reached to plugin cordovaInAppBrowser and using its events, loadstart, loadstop but not able to send and get parameters.Since last One Week I stucked and so finally posting here. Thanks, in advance
Finally I succeed in integrating the payment gateway in ionic. Its very easy, jsut follow the following steps,
add the cordovaInAppBrowser plugin and Inject the dependency.
make all the fields you get that to send to that Gateway with all validations.
now you needed some 3 files as success.php, failure.php and paymentfile.html.
$cordovaInAppBrowser.open("filename?"+params, '_blank',options)
make note that success and faliure php file are in server and access them through server
get the response in the php file than to controller, based on the response traverse the path and its done.
Most important you need to serialize the data while sending as its should be global and assign it to window object.
Also we have to use the cordovaInAppBrowser events loadstop() and all the stuff i had done in this event and later i call the close() function when its done.
Its Done.

How to receive postback using Express and Angular?

I have a server written in Express that interfaces with an application written in Angular on the client.
My Express server is receiving a post from a third-party service to a route which will perform business logic, and then here is where I am a little uncertain about the best path forward.
After receiving the post variables, I want to redirect the request to an Angular route, but I want to make those received post variables available to the route as well.
Somehow, I want to be able to mix the res.json() and res.redirect() method, but I'm pretty sure they both end the response.
What would be a logical way to structure this?
Update: To expand on the issue, imagine I have a route called /receivetransaction which receives some postback variables, including transaction ID, amount etc. I want to perform business logic (save to a database), and then redirect the user to /thankyou (an angular route) but have them be able to access that data that was just received in the postback.
It looks like maybe my best option would be to save to the database, and then send the transaction-id as JSON to the angular view, which will then hit the database and pull the info. A little inefficient though (not really a big deal) but I would hope there would be another way around it.
What I've decided to do is the following:
After the express route receives the postback variables, it performs the business logic (specifically saving the data to the database), and redirects the request to the angular route with a query var indicating the id of the transaction.
The angular controller uses $location.search() to pull the transaction id from the query var, and from there it performs a get request to the express API, which performs authentication and loads the relevant information into $scope variables to be passed to the view.

Laravel: Making a Real Time Application using Angular

I am starting to work with angular and am fascinated by the bi-directional data-binding capabilities and by its $http method, which lets me save changes in to my mysql database, without refreshing the page.
Another thing I am currently fascinated by is the real time capability across multiple clients using firebase. Here all clients are updated in REAL TIME, when the database receives any changes. I'd probably like to use firebase, but I would have to drop Laravel and MySql as a persistence layer entirely, which I would like to keep for the moment, since my application is already working in Laravel, just not in real time.
How would I go about having a Real Time application, which updates every client, without refreshing the view, in Laravel using MySQL and Angular?
If I am not mistaken, Pusher and PubNub, are providing this necessary open connection with the server using websockets, so when the server has something to share, angular will now and render it.
Since I would like to use Laravel and MySQL as a persistence layer, I am not sure, what the best way would be. I am not even sure, if I understood everything correctly, which I wrote above, since I am new to angular and real-time applications.
What would be the next necessary steps, to get some Real-Time capability into a PHP/MySQL application?
The solution for your problem is:
1º - open websocket connection with the websocket-server and subscribe a channel, after this send the data to your serve using ajax
tutorial angular pusher
2º - In server side, you get the data, saves to your database and send a 'PUBLISH' to the respective channel into websocket server
lib useful for this
3º - Through the subscribe gets the data in real time
Pusher.subscribe('channel', 'event', function (item) {
// code
});
I had a similar problem recently and I finally ended up using Redis publish/subscribe Redis. You can store data in the channel and then subscribe to any changes. When something changes you can send it to Pusher which will send it then to the clients.
I also recommend considering Node.js and Socket.io since you can achieve very good performance without third party service, and even if you don't have experience with node you can find very good examples on Socket.IO how to write an application.
For Redis there is a good library for PHP called Predis and there is Redis Node client as well, so you can mix it all together.

Resources