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.
Related
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.
I am working on an Ionic phone app using AngualrJs as the framework. Now I faced an issue. I don't want my app to send an HTTP request to my backend(which use Ruby on Rails) API to do a manual test.
So I'm wondering what's the best practice to pass a mock JSON data as a response when I want to call the API.
I'm not familiar with Angular and Ionic, I can find some tutorials on both sides but I don't know what's is the best practice if use them together.
You can either store the data in localStorage after the first hit and read the data from localStorage every-time whenever you need.
https://medium.com/#petehouston/awesome-local-storage-for-ionic-with-ngstorage-c11c0284d658
Or you can use
$httpBackend
https://docs.angularjs.org/api/ngMock/service/$httpBackend
by saving json files locally and injecting them back when the application tries to hit the network . One limitation here, you cannot update the json file later after the user have installed the application.
So, localStorage is preferred if you want to cache the data you have received from network.
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/
How to setup maintenance page when my application runing in production and value should be in Boolean so that we switch modes from maintenance to normal and vice versa in angular js
Using route concept
We did it this way:
I created a normal HTML page and changed my gruntfile, that this file will not be minified.
After that, we did the configurations for showing this Error or Maintanance sites via Load Balancer.
A other possible solution for that, is to create a interceptor like shown here
https://docs.angularjs.org/api/ng/service/$http#interceptors
At this interceptor you could call the Maintanance Page if a specific statuscode is sent by the server. If you create a http interceptor, each request to the backend will go through it.
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.