I created a GitHub Pages project with AngularJS, the Angular content does not load from the json file, and I am getting a 404 error in the console:
Failed to load resource: the server responded with a status of 404 () birds.json
It is supposed to be just a client-side app. What is going on here? Does it have something to do with html5mode?
Repo
Demo
Related Questions:
Can one host an AngularJS based static blog on github?
AngularJS html5mode support on GitHub Pages
It's because your birds.json lies in the angular-birds directory. Try to change
var promise = $http.get('/birds.json').then(function (response) {
return response.data;
});
to
var promise = $http.get('angular-birds/birds.json').then(function (response) {
return response.data;
});
You may check out this AngularJS repository which I used to build and deploy my own website on github pages. Here is the demo.
Related
I am struggling to get angular-pdfjs-viewer working in my angular app that's written in Typescript.
I am always getting a red error message with the text:
PDF.js v1.7.354 (build: 0f7548ba)
Message: stream must have data
The PDF data is coming from an ASP.NET WebAPI controller, and the architecture of our application has the front facing website and the API both deployed as two independent web applications.
Due to this, I am wanting to download the PDF in the angular controller, and set the PDF source to the data attribute of the directive.
The WebAPI returns the PDF like this:
[HttpGet]
[Route("invoice/{id}/originalpdf")]
public async Task<ActionResult> GetInvoiceSourceImagePdf(string id)
{
var userId = User.Identity.GetMyId();
var bytes = await _serviceThatReturnsByteArray(id);
return File(bytes, System.Net.Mime.MediaTypeNames.Application.Pdf);
}
I don't see an issue with the above. In the browser, if I hit this endpoint, I get the document rendering exactly as expected.
On the front-end side:
We're using the angular-pdfjs-viewer from https://github.com/legalthings/angular-pdfjs-viewer
We're including (via BundleConfig), sources in the order of: pdf.js, then angular.js and then finally angular-pdfjs-viewer.js (with other application required dependencies in between)
I am using the PDF.js dependency that "ships" with angular-pdfjs-viewer.js
The angular controller looks like this:
module MyApp {
class PdfDialogController {
public static $inject = ["$scope", "$window", "$log", "$uibModalInstance", "$http"];
pdfData: Uint8Array;
constructor(/*stuff*/){
this.$http.get(the_url, { responseType: 'arrayBuffer' })
.then((t) => {
this.pdfData = new Uint8Array(<ArrayBuffer>t.data);
});
}
}
}
And in the view, we have:
<div class="modal-body">
<div id="pdf-container">
<pdfjs-viewer data="vm.pdfData"></pdfjs-viewer>
</div>
</div>
Inspecting the network in the browser, the PDF content is downloaded.
t.data in the controller contains data that starts with
%PDF-1.3\n%����\n1 0 obj\n[/PDF /Text]
However, the views shows this:
And the console outputs an error message:
Error: An error occurred while loading the PDF.
What am I doing wrong, and how can I determine what the issue is with the PDF data (if there is one).
Well, it turns out that I was using
{ responseType: 'arrayBuffer' } // camel case
when I should be using
{ responseType: 'arraybuffer' } // all lowercase
Once changed, the code I posted in the question worked perfectly.
I am trying to test out the uber-api products rest endpoint and can't get a successful response using angular. If I paste the $http.get url in the browser it works. However I always get an error response through angularjs. The jsfiddle below is a stripped example of what I'm trying to accomplish.
http://jsfiddle.net/t3kcwc7y/630/
function UberCtrl($scope, $http) {
$http.get('https://sandbox-api.uber.com/v1/products?latitude=37.7759792&longitude=-122.41823&server_token=<token_here>')
.success(function(data) {
console.log('success');
$scope.uberData = data;
})
.error(function(data) {
console.log('error');
$scope.uberData = 'Error: ' + data;
});
}
I was unable to find a existing jsfiddle/plunker example so sorry if this has already been covered. Thanks in advance.
Some side notes, when testing in chrome I get "No 'Access-Control-Allow-Origin' header is present on the requested resource" which appears to be chrome specific CORS error. It works in firefox. My ultimate goal is to execute this from salesforce/force.com and support on any browser. I'm not sure if the CORS error is due to jsfiddle or not.
Please see the example for using the Uber API from the browser with CORS support:
https://developer.uber.com/docs/rides/api-reference
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.uber.com/v1/products?latitude=37.7759792&longitude=-122.41823');
xhr.setRequestHeader("Authorization", "Token YOUR_SERVER_TOKEN");
xhr.send();
I am trying to implement login with Google in an Ionic browser based app. These are the commands I ran to install and create my app:
ionic start tracker sidemenu
cd tracker
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
ionic platform add browser
When I click my login button, the Google auth comes up ok. However when the callback is called I get a 404:
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8100/callback?code=xxxxxx
This OAuth 2 Ionic example gave this code:
var clientId = 'xxxxxx-3rpu226qm-xxxxx.apps.googleusercontent.com';
var scope = 'profile email';
var ref = window.open('https://accounts.google.com/o/oauth2/auth?client_id=' + clientId +
'&redirect_uri=http://localhost:8100/callback&scope=https://www.googleapis.com/auth/urlshortener&approval_prompt=force&response_type=code&access_type=offline',
'_blank', 'location=no');
ref.addEventListener('loadstart', function (event) {
console.log('listener event.url: ' + event.url);
if ((event.url).startsWith("http://localhost:8100/callback")) {
var requestToken = (event.url).split("code=")[1];
console.log('request token from google: ' + requestToken);
ref.close();
}
});
Why isn't the eventListener catching the callback?
Its a known issue of the cordova-plugin-inappbrowser that loadstart and loaderror events are not being fired in the browser.
Source: https://github.com/apache/cordova-plugin-inappbrowser#browser-quirks-1
You might want to look at an other javascript library like hello.js for the browser case (https://adodson.com/hello.js/#hellojs). Or implement it yourself. Here you can find an example for how to do it for google oath2 yourself: https://developers.google.com/identity/protocols/OAuth2UserAgent
I've used this solution to disable web security in Chrome so I can have localhost:8100 served by Ionic and localhost:8000 served by Laravel communicate without XSS issues, but now I'm getting this error in my Chrome console:
POST localhost:8000/api/user net::ERR_UNKNOWN_URL_SCHEME
I found a couple different solutions for this, but they all seem to be related to third-party services being used on mobile devices (ex. OAuth), old Chromium bugs, or a few Chrome apps, but I'm just trying to round trip with my RESTful endpoints using Ionic/AngularJS ngResource and Laravel's RESTful routing in my development environment.
I'm using an interceptor to switch between asset and API requests:
.factory('API', ['ConfigSettings',
function (ConfigSettings) {
var service = {
request: function (config) {
if (config.url.indexOf("/api") > -1) {
config.url = ConfigSettings.host + ':' + ConfigSettings.port + config.url;
}
return config;
}
}
return service;
}])
.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push('API');
}]);
Anyone know what this error means in my case and how to fix it?
$scope.url = "http://localhost/MerchantProgramService.svc/GetMerchantProfile";
myXHRService.getData($scope.url).then(function(data) {
alert(data);
var xhrData = angular.fromJson(data);
// $scope.xhrData = xhrData.data.children;
});
I am trying to access web services with angularjs and i am failed to do it as i am new to angular.
POST http://localhost/MerchantProgramService.svc/GetMerchantProfile 404 (Not Found)
i am getting this error in console. i am using google chorme and using CORS extension to Access cross origin.