I did not notice that this should be JSONP, so I did this using the default $ resource method.
Below is an example that does what you want. Do not forget:
- include
angular-resource.min.js file - add
ngResource to the service module - add
motoAdsServices to the application module - enter
Brand into the controller - the rest will do Angular :)
index.html
<!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>
services.js
var motoAdsServices = angular.module('motoAdsServices', ['ngResource']); motoAdsServices.factory('Brand', ['$resource', function($resource) { return $resource('./brands.json', {}, {}); }]);
controllers.js
var motoAdsApp = angular.module('motoAdsApp', ['motoAdsServices']); motoAdsApp.controller('AdvertsController', ['$scope', 'Brand', function($scope, Brand) { $scope.brands = Brand.query(); }]);
brands.json
[ {"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"}]} ]
Plunger example
UPDATE (because there must be JSONP)
To use JSONP , you have to change service.js
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 } }); }]);
and controllers.js
var motoAdsApp = angular.module('motoAdsApp', ['motoAdsServices']); motoAdsApp.controller('AdvertsController', ['$scope', 'Brand', function($scope, Brand) { $scope.brands = Brand.queryjsonp(); }]);
And that will be the work. But the server should return valid jsonp .
There is the same problem: jsonp request with Angular $ resource And he discovered that there is a problem with the server .
UPDATE 2 (because the problem is probably related to CORS on the node.js server)
server.js (node.js)
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')); });
routes / brands.js
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)); }); };
UPDATE 3 (because CORS should be added to web-server.js (node.js) without expression)
You have something like: https://github.com/angular/angular-seed/blob/master/scripts/web-server.js
So you should add ALLOW CORS (see below, I added 2 lines) to the response headers:
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); }); } };
Maybe you have another function with jsonp, so add in res.writeHead(200, CORS headers.
UPDATE 4 - ANGULARJS CALL FACEBOOK by JSONP
THIS DECISION MUST WORK !!!
services.js
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' } }); } ]);
controllers.js
var myApp = angular.module('myApp', ['myServices']); myApp.controller('MyController', ['$scope', 'FacebookFeed', function($scope, FacebookFeed) { $scope.feeds = FacebookFeed.jsonp_query(); console.log() }]);
index.html
<!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>
Plunger example