I am utilizing inAppBrowser and understand how to subscribe to event observable such as loadstart, loadstop etc. I am trying to figure out a solution for capturing the request made from within InAppBrowser instance previous to it being sent, similar to Angulars HTTPInterceptor feature when making crafted requests from within the app it's self.
As I understand it, loadstart has already committed to sending the request and all you can capture from this is the URL from within Ionic app.
As a solution I can executescript and utilize its callback to retrieve info about a request direct from the browser but this feels like a awkward solution.
Any alternate solutions or assistance would be greatly appreciated.
Related
I am using angular js for ajax call back and later rendering the response to
View.Sometimes the response not rendering to view and it is reflecting after
page load only which is not my desire scenario.
As per my current observations, we have enabled pagespeed in our NGINX server
and may be that is the case why it fails sometime to render the correct data.
Can anyone please suggest if any option available to disable page speed in
ajaxcallback or if any other solution is there that would be greatly
appreciated.
New to Angular and want to understand more about it. I know Ajax can have real time effect by basically repeatedly sending Http requests to server on short time intervals. Can I achieve similar real-time effect using Angular? If true to previous question, how does Angular achieve the real-time effect? Is it the same as Ajax?
In order to be realtime you would need to have server code that pushes data to applications. Angular, which is client side javascript, will only have the ability to pull.
Hmm, I think you should Google some defination about, Ajax, Realtime, and might be Framework also.
But basiclly, AJAX not is realtime. In a deep, It's only effect which make better experience for user. In addition, it's related to Single Page Application.
Realtime is action interactive with many users. The best example you can see is Facebook, chat or notification. User 1 can send message and User 2 can see instantly, no need to reload. Diffirent for AJAX, User 2 can not see the message if he don't reload browser.
About part 2 of your question, after understanding AJAX, realtime. You can use some third party like Socket, Firebase ... which able to use realtime for your Angular app.
I want to load the YouTube Iframe API ( https://www.youtube.com/iframe_api ) using AngularJS' $http, but it seems that YouTube doesn't allow CORS requests.
The reason I want to load this API using XHR is that I have a fairly complex logic for API loading in my app, and I want to test it using $httpBackend. And if I load the script using a tag created from JS, I can't find any way of mocking it, and also it will actually execute the request each time I run the tests, which is not cool.
My other option is to create a local proxy, but I would like to avoid that at the current moment.
So, does anyone know any way of loading the YouTube Iframe API with XHR? Maybe setting an origin parameter to the request or something. Or maybe it already works but I'm missing something.
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
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.