A common occurrence for JavaScript-based applications is working with data provided by remote web services. This scenario needs to address the same-origin policy enforced by the browser, where scripts running on a page are prevented from accessing DOM elements or other resources that have a URI domain different from the URI domain of the page. A domain is defined by the combination of the URI scheme, hostname, and port number, and the same-origin policy means that a script running on a page hosted at http://example.com/main cannot make an XMLHttpRequest call for the data available at http://anotherexample.com/api/resources. To overcome this policy, there are two main techniques—JSONP (JSON with padding) and Cross-origin Resource Sharing (CORS)—that can be used, and both are supported by AngularJS.

JSONP is a technique where remote data is requested through a <script> element that is usually injected dynamically in the page at application runtime. The...