StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I did not notice that it takes to be a JSONP, so I did it with default $resource method.</p> <p>Below is an example that does what you want. Please remember to:</p> <ul> <li>include a file <code>angular-resource.min.js</code></li> <li>inject <code>ngResource</code> to services module</li> <li>inject <code>motoAdsServices</code> to app module</li> <li>inject <code>Brand</code> to controller</li> <li>the rest will do Angular :)</li> </ul> <p>index.html</p> <pre><code><!DOCTYPE html> <html ng-app="motoAdsApp"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.min.js"></script> <script type="text/javascript" src="controllers.js"></script> <script type="text/javascript" src="services.js"></script> </head> <body> <div ng-controller="AdvertsController"> <label>Brand</label> <select name="brand" ng-model="brand" ng-options="b.name for b in brands"> <option value=""></option> </select> </div> </body> </html> </code></pre> <p>services.js</p> <pre><code>var motoAdsServices = angular.module('motoAdsServices', ['ngResource']); motoAdsServices.factory('Brand', ['$resource', function($resource) { return $resource('./brands.json', {}, {}); }]); </code></pre> <p>controllers.js</p> <pre><code>var motoAdsApp = angular.module('motoAdsApp', ['motoAdsServices']); motoAdsApp.controller('AdvertsController', ['$scope', 'Brand', function($scope, Brand) { $scope.brands = Brand.query(); }]); </code></pre> <p>brands.json</p> <pre><code>[ {"name": "Audi", "models": [{"name": "A1"}, {"name": "A3"}, {"name": "A4"}]}, {"name": "BMW", "models": [{"name": "Series 3"}, {"name": "Series 5"}, {"name": "Series 7"}]}, {"name": "Citroen", "models": [{"name": "C1"}, {"name": "C2"}, {"name": "C3"}]}, {"name": "Dacia", "models": [{"name": "Duster"}, {"name": "Logan"}, {"name": "Sandero"}]} ] </code></pre> <p><a href="http://plnkr.co/edit/BjpQzv?p=preview" rel="nofollow noreferrer">Plunker example</a></p> <p><strong>UPDATE</strong> <em>(because should be JSONP)</em></p> <p>To use <strong>JSONP</strong> you should only change services.js</p> <pre><code>var motoAdsServices = angular.module('motoAdsServices', ['ngResource']); motoAdsServices.factory('Brand', ['$resource', function($resource) { return $resource('./brands.json', {}, { jsonpquery: { method: 'JSONP', params: {callback: 'JSON_CALLBACK'}, isArray: true } }); }]); </code></pre> <p>and controllers.js</p> <pre><code>var motoAdsApp = angular.module('motoAdsApp', ['motoAdsServices']); motoAdsApp.controller('AdvertsController', ['$scope', 'Brand', function($scope, Brand) { $scope.brands = Brand.queryjsonp(); }]); </code></pre> <p>And it shoould be work. But <strong>server should return valid jsonp</strong>.</p> <p>There is the same problem: <a href="https://stackoverflow.com/questions/13234546/jsonp-request-with-angular-resource">jsonp request with angular $resource</a> And he found that there was a <strong>problem with server</strong>.</p> <p><strong>UPDATE 2</strong> <em>(because the problem is probably with CORS in node.js server)</em></p> <p>server.js (node.js)</p> <pre><code>var express = require('express'); var path = require('path'); var http = require('http'); var brands = require('./routes/brands'); var countries = require('./routes/countries'); var adverts = require('./routes/adverts'); var app = express(); // ALLOW CORS!!! var allowCrossDomain = function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); next(); }; app.configure(function() { app.set('port', process.env.PORT || 3000); app.use(express.logger('dev')); /* 'default', 'short', 'tiny', 'dev' */ app.use(express.bodyParser()), app.use(allowCrossDomain); app.use(express.static(path.join(__dirname, 'public'))); }); app.get('/api/brands', brands.findAll); app.get('/api/countries', countries.findAll); app.get('/api/adverts', adverts.findAll); http.createServer(app).listen(app.get('port'), function() { console.log("Express server listening on port " + app.get('port')); }); </code></pre> <p>routes/brands.js</p> <pre><code>exports.findAll = function(req, res) { var fs = require('fs'); var file = './server/data/brands.json'; fs.readFile(file, 'utf8', function(err, data) { if (err) { throw err; } res.send(JSON.parse(data)); }); }; </code></pre> <p><strong>UPDATE 3</strong> <em>(because CORS should be added to web-server.js (node.js) without express)</em></p> <p>You have something like: <a href="https://github.com/angular/angular-seed/blob/master/scripts/web-server.js" rel="nofollow noreferrer">https://github.com/angular/angular-seed/blob/master/scripts/web-server.js</a></p> <p>So you have to add ALLOW CORS (look below I added 2 lines) to response headers:</p> <pre><code>StaticServlet.prototype.sendFile_ = function(req, res, path) { var self = this; var file = fs.createReadStream(path); res.writeHead(200, { 'Content-Type': StaticServlet. MimeMap[path.split('.').pop()] || 'text/plain', // ALLOW CORS - line 1 !!! 'Access-Control-Allow-Origin' : '*', // ALLOW CORS - line 2 !!! 'Access-Control-Allow-Headers': 'X-Requested-With' }); if (req.method === 'HEAD') { res.end(); } else { file.on('data', res.write.bind(res)); file.on('close', function() { res.end(); }); file.on('error', function(error) { self.sendError_(req, res, error); }); } }; </code></pre> <p>Maybe you have other function with jsonp, so add to <code>res.writeHead(200,</code> CORS headers too.</p> <p><strong>UPDATE 4 - ANGULARJS CALL FACEBOOK BY JSONP</strong></p> <p><strong>THIS SOLUTION SHOULD BE WORK !!!</strong></p> <p>services.js</p> <pre><code>var myServices = angular.module('myServices', ['ngResource']); myServices.factory('FacebookFeed', ['$resource', function($resource) { return $resource('https://graph.facebook.com/cocacola?callback=JSON_CALLBACK', {}, { jsonp_query: { method: 'JSONP' } }); } ]); </code></pre> <p>controllers.js</p> <pre><code>var myApp = angular.module('myApp', ['myServices']); myApp.controller('MyController', ['$scope', 'FacebookFeed', function($scope, FacebookFeed) { $scope.feeds = FacebookFeed.jsonp_query(); console.log() }]); </code></pre> <p>index.html</p> <pre><code><!DOCTYPE html> <html ng-app="myApp"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.min.js"></script> <script type="text/javascript" src="controllers.js"></script> <script type="text/javascript" src="services.js"></script> </head> <body> <div ng-controller="MyController"> <label>Facebook feeds</label></label> <pre>{{feeds}}</pre> </div> </body> </html> </code></pre> <p><a href="http://plnkr.co/edit/PYtQNm?p=preview" rel="nofollow noreferrer"><strong>Plunker example</strong></a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload