CODEWITHSUNDEEP
javascriptjsonangularjsjavascript-frameworkangularjs-resource
AndreaNobili
AndreaNobili

Reputation: 42957

How exactly means this $resource web service connection configuration in AngularJS?

I am absolutly new in AngularJS and I am studying a tutorial that show how to access to this external weather forecast API: http://openweathermap.org/forecast to retrieve and use weather information.

So, into my application, I have a controller like this:

weatherApp.controller('forecastController', ['$scope', '$resource', '$routeParams', 'cityService', function($scope, $resource, $routeParams, cityService) {
    // It contain the city selected in the view:
    $scope.city = cityService.city;

    $scope.days = $routeParams.days || 2;

    $scope.weatherAPI = $resource("http://api.openweathermap.org/data/2.5/forecast/daily", 
                                  { APPID: 'MY_PERSONAL_KEY',
                                   callback: "JSON_CALLBACK",
                                   cnt: 5
                                  }, 


                                  { get: { method: "JSONP" }});

    $scope.weatherResult = $scope.weatherAPI.get({ q: $scope.city, cnt: $scope.days });

    $scope.convertToFahrenheit = function(degK) {

        return Math.round((1.8 * (degK - 273)) + 32);

    }

    $scope.convertToDate = function(dt) { 

        return new Date(dt * 1000);

    };

}]);

And I am finding some difficulties tho understand how exactly the service is called and the informations are required.

So from what I have understand (but I am absolutly not sure about it so correct me if I do wrong assertion) I have the following situation:

1) Into the controller I inject the $resource service provided by Angular that from what I have understand is an object that I can use for a user friendly RESTful web service interaction.

So by this line:

$scope.city = cityService.city;

I put a city (inserted by the user in the view) into the city property of the $scope of this controller and it will be user as one of the parameter used for the webservice query.

Then I create the weatherAPI property on the $scope object that I think should represent the way to access to this resource

    $scope.weatherAPI = $resource("http://api.openweathermap.org/data/2.5/forecast/daily", 
                                  { APPID: 'MY_PERSONAL_KEY',
                                   callback: "JSON_CALLBACK"
                                  }, 


                                  { get: { method: "JSONP" }});

So I think that weatherAPI is a resource object creted by the $resource service (or am I missing something?).

On this I set the web service URL (http://api.openweathermap.org/data/2.5/forecast/daily) and a couple of JSON objects, these:

{ 
    APPID: 'MY_PERSONAL_KEY',
    callback: "JSON_CALLBACK"
},

in which I declare the APPID field that is my personal key to use the key and the callback: "JSON_CALLBACK" field. What exactly represent this callback field?

And this second object:

{ get: { method: "JSONP" }}

Ok, the roole of these 2 objects for me are pretty obscure.

What exactly define? It seems to me that are something related to the security of my application but I am absolutly not sure about it

Finnally it retrieve data from the web service by:

$scope.weatherResult = $scope.weatherAPI.get({ q: $scope.city, cnt: $scope.days });

where I thonk that I am simply passing the 2 parameter (that are something like ?q=value&?cnt=value of a classic HTTPrequest)

Upvotes: 0

Views: 155

Answers (1)

GwynBleidD
GwynBleidD

Reputation: 20539

So I think that weatherAPI is a resource object creted by the $resource service (or am I missing something?).

No, you're not missing anything. weatherAPI is exactly what you're think it should be.

in which I declare the APPID field that is my personal key to use the key and the callback: "JSON_CALLBACK" field. What exactly represent this callback field?

callback field is just an default GET parameter passed to API on each request. It is set here, so you don't have to pass it each time requesting something from API.

What exactly define? It seems to me that are something related to the security of my application but I am absolutly not sure about it

Third parameter passed into $resource call is an definition of available methods on your API.

In outer object, key is name of method. It is just name on which that method will be available. value is an object of settings for that method, in that case it is only specifying type of your method, which is "JSONP".

JSONP is an special type of request, it can be only an "GET" request, browsers won't allow "POST" here. JSONP must return simple function call, passing one parameter into it, JSON with result data. This function will be called on your JavaScript.

JSONP is just an workaround for making cross site calls.

Upvotes: 0

Related Questions