I've recently completed a Slip PHP API build which interacts beautifully with my Android application. I'm now building a web front-end and for the life of me I can't understand how to request information via GET using ngResource's query function.
My index.html file is:
<!doctype html>
<html ng-app="discussApp">
<head>
</head>
<body>
<div ng-controller="topicsController">
<div>{{ topics }}</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-resource.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
My app.js file:
var app = angular.module('discussApp', ['ngResource']);
app.controller("topicsController", function($scope, $resource, $http) {
var Topics = $resource("http://api.discussorama.com/v1/topics");
$scope.topics = Topics.query();
});
And the information I'm trying to read (I've successfully done this both from Chrome's Advanced REST Client, the browser, and my Android app) is at http://api.discussorama.com/v1/topics (Note: I've temporarily disabled my authentication middleware in Slim PHP to test with Angularjs). The endpoint returns a json response but I'm not seeing anything in Angular besides "[]". The link to the Angular app is http://hwaelapps.com/discuss/web if anyone would like to see exactly what is happening. Thanks in advance for the help. Note: I've tried several ngResource config options including urlencode but it's still not receiving the data so I stripped all that and all the code is directly as is in the question.
The answer was in the console log all along. The error I was receiving was:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
The solution was simply to add
header("Access-Control-Allow-Origin: *");
to my Slim API's index.php file. I guess my shared host isn't configured for CORS.
Related
I have just started learning Ionic and Angular.
After reading basic documentation related to Angular and Ionic, I was following the tutorial from this site to develop the sample application myself.
I am able to load the application and see the data related to playlists, but after integrating 'Angular ngResource', to fetch the live data, related to sessions - by calling Rest API mentioned in the tutorial, I am not able to load the application in the browser (Blank white screen appears).
You can refer the application code with my changes here:
https://github.com/bhushanbaviskar/Angular-Ionic.git
Thanks.
You are missing at least inclusion of the ngResource and starter.services to your app in your app.js like this:
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngResource'])
Then in your index.html you have a lot of typos, you should replace these parts with the code below:
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- Angular ngReource-->
<script src="lib/ionic/js/angular/angular-resource.min.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
There was ngResource <script type=""> should be src="" and also the services.js had a typo servcies.js which should be services.js. Services.js also was declared as type and need to be changed to src.
I'm starting out with ReactJS and I'm following the simple example in the "Gettind Started".
This is my HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="js/reactjs/react.min.js"></script>
<script src="js/reactjs/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel" src="js/main.js"></script>
</head>
<body>
<div id="example"></div>
</body>
</html>
It works. But if I watch the network traffic with Fiddler, I see that main.js is pulled twice from the server. Is that on purpose? bug?
As soon as browser encounters following lines
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel" src="js/main.js"></script>
browser issues http requests for both files. But since js/main.js is of 'text/babel' type for browser it won't be given to JavaScript engine to parse/execute. Rightly so, because the 'main.js' might have ES6 code which browser won't understand as it now. Once babel's browser.min.js loads and executes, it searches for script tag in DOM with type 'text/babel' and then issue XHR request to load that file. After that browser.min.js compiles the code in 'main.js' transform it into ES5 and then executes it. This is the way it works.
Since browser already has 'js/main.js' in its cache from earlier request, the XHR request issued by babel's browser.min.js for 'js/main.js' is served from the cache itself, so there won't be any additional external http request.
I am trying to run the google-cdn plugin via Gulp (gulp-google-cdn) to covert bower references in my HTML file into the CDN equivalent. Gulp-google-cdn does not do anything, and enabling the DEBUG, shows: google-cdn Could not find satisfying version for angular-material ^1.0.5
My task (I use a subdirectory with tasks per file):
gulp.task('HTML:Release', function() {
return gulp.src('../src/*.html')
.pipe(googleCdn(require('../bower.json')))
.pipe(gulp.dest('../dist/') )
;
});
HTML:
<!DOCTYPE html>
<html ng-app="OntarioDarts" ng-cloak lang="en">
<head>
</head>
<body layout="row" ng-cloak>
<div layout="column" class="relative" layout-fill role="main">
<md-content flex md-scroll-y>
<ng-view></ng-view>
</md-content>
</div>
</body>
<!-- Load JavaScript Last for Speed. Load from CDN for cache speed -->
<!-- Angular JS -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-material/angular-material.min.js"></script>
<script src="bower_components/angular-material-icons/angular-material-icons.min.js"></script>
The distribution file does not point Angular to the CDN, but still tries to use the bower_components, even though it did not complain that the files were not found.
One problem I found is that I have Angular set at ^1.5.0 in my bower.json. However, I was only using the default Google CDN, which does not currently have the 1.5.0 available. I changed the version in the bower.json file to be ^1.4.0, and then the file was changed to use the CDN with version 1.4.7.
The problem though is that the reference did not get changed to HTTPS://, but was left simply as src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"
Gulp-google-cdn does not do anything, and enabling the DEBUG, shows: google-cdn Could not find satisfying version for angular-material ^1.0.5
That's because the newest version available from the Google CDN is 1.0.4.
The problem though is that the reference did not get changed to HTTPS://, but was left simply as src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"
That's not necessarily a problem. That's a protocol-relative URL. If your page is served over HTTP, angular.min.js is fetched over HTTP. If your page is served over HTTPS, angular.min.js is fetched over HTTPS.
Unless you absolutely need angular.min.js to always be fetched over HTTPS you can just leave it like that.
EDIT: ... except for when you're trying to open a local HTML file in a browser. Then your protocol is file:// and the protocol relative URL will refer to your local file system. Which of course leads nowhere.
One way of fixing this would be to serve your html files through a locally running webserver (e.g. with gulp-webserver). When your HTML pages come from e.g. http://localhost:8000/ all the protocol relative URLs will be served over http:// as well.
If you just want all the CDN URLs to be prefixed with https:// instead, here's a way to wrap the google-cdn-data object to achieve this:
var gulp = require('gulp');
var googleCdn = require('gulp-google-cdn');
var jp = require('jsonpath');
function protocol(proto, cdn) {
jp.apply(cdn, '$.*.url', function(url) {
return function(version) {
return proto + url(version);
};
});
return cdn;
}
gulp.task('HTML:Release', function() {
return gulp.src('../src/*.html')
.pipe(googleCdn(require('./bower.json'), {
cdn: protocol('https:', require('google-cdn-data'))
}))
.pipe(gulp.dest('../dist/') );
});
You'll need to run npm install --save-dev google-cdn-data jsonpath for this to work.
I've set up a REST service, using Spring framework. The service, simply reads some info from database, and represents it in JSON format. The service works properly when accessing it directly via browser (i.e: http://localhost:8080/infractions/get?no=2 works just fine.) But, when I try to access it using angularJS, it doesn't show anything! I've followed this tutorial provided by Spring official website, and here's how my code looks like:
index.html file:
<!doctype html>
<html ng-app>
<head>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="get.js"></script>
</head>
<body>
<div ng-controller="getFractionByID">
<p>Fraction Type is: {{get.name}}</p>
</div>
</body>
</html>
get.js file:
function getFractionByID($scope, $http) {
$http.get('http://localhost:8080/infractions/get?no=2').
success(function(data) {
$scope.get = data;
});
}
I'm really new to non-academic programming and I'm rather inexperience, so please help me find out where should I start finding the problem?
Update: Error message:
XMLHttpRequest cannot load http://localhost:8080/infractions/get?no=2. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
I took a freshly-cloned copy of the Boomerang library and ran make to produce the default boomerang.js script.
I copied that file, along with the following HTML document into a directory.
<html>
<head>
<script src="/boomerang.js" type="text/javascript"></script>
<script type="text/javascript">
BOOMR.init({
user_ip: "127.12.34.56",
beacon_url: "http://127.0.0.1:8008/beacon",
beacon_type: "POST"
});
</script>
</head>
<body>
<h1>Hello RUM</h1>
</body>
</html>
I then served that out of host running on port 8008 and viewed the html file. When I check the access log, I see
127.0.0.1 - - [17/May/2016:15:13:31 +0200] "GET /beacon?u=http%3A%2%2F127.0.0.1%3A8008%2Frum.html&v=0.9&...
That is, the Boomerang library is issuing a GET instead of POST and at a quick glance I can't figure out why. (The /beacon endpoint doesn't actually exist, so it throws a 404, but that is (I hope) beside the point). I'll take a closer look with dev tools, but has anyone experienced this before?