Understanding the concept of Angular factories in Javascript

Question

Understanding the concept of Angular factories in Javascript

app.service('WeatherService', function($http) {
   var service = {};

   service.getLocation = function() {
      return $http.jsonp("http://ipinfo.io/json?callback=JSON_CALLBACK");
   };

   service.getCurrentWeather = function(city) {
      var api = "http://api.openweathermap.org/data/2.5/weather?q=";
      var units = "&units=metric";
      var appid = "&APPID=061f24cf3cde2f60644a8240302983f2"
      var callback = "&callback=JSON_CALLBACK";

      return $http.jsonp(api + city + units + appid + callback);
   };
   return service;
});

Could someone provide an explanation of the functionality within this block of code? I'm unclear on the purpose of each variable. What does the getLocation function do? Does it define a function? Are all these variables combined to form a URL at the end, with the JSON retrieving data from the webpage being accessed?

javascript angularjs

Answer 1

Answer №1

This code snippet demonstrates how to define a reusable service within your application.

Here's an example of how to use it:

var app = angular.module('app', []);

app.factory('WeatherApi', function($http) {
  var obj = {};

  obj.getLoc = function() {
    return $http.jsonp("http://ipinfo.io/json?callback=JSON_CALLBACK");
  };

  obj.getCurrent = function(city) {
    var api = "http://api.openweathermap.org/data/2.5/weather?q=";
    var units = "&units=metric";
    var appid = "&APPID=061f24cf3cde2f60644a8240302983f2"
    var cb = "&callback=JSON_CALLBACK";

    return $http.jsonp(api + city + units + appid + cb);
  };
  return obj
});

app.controller('someCtrl', function(WeatherApi) {
  var vm = this;
  WeatherApi.getLoc().then(function(response) {
    vm.location = response.data;
    console.log('Your location:' + JSON.stringify(vm.location));
  })
  WeatherApi.getCurrent('nyc').then(function(response) {
    vm.nycWeather = response.data;
    console.log('Weather in NYC:' + JSON.stringify(vm.nycWeather));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="someCtrl as vm">
</div>

Answer 2

This code snippet demonstrates how to define a reusable service within your application.

Here's an example of how to use it:

var app = angular.module('app', []);

app.factory('WeatherApi', function($http) {
  var obj = {};

  obj.getLoc = function() {
    return $http.jsonp("http://ipinfo.io/json?callback=JSON_CALLBACK");
  };

  obj.getCurrent = function(city) {
    var api = "http://api.openweathermap.org/data/2.5/weather?q=";
    var units = "&units=metric";
    var appid = "&APPID=061f24cf3cde2f60644a8240302983f2"
    var cb = "&callback=JSON_CALLBACK";

    return $http.jsonp(api + city + units + appid + cb);
  };
  return obj
});

app.controller('someCtrl', function(WeatherApi) {
  var vm = this;
  WeatherApi.getLoc().then(function(response) {
    vm.location = response.data;
    console.log('Your location:' + JSON.stringify(vm.location));
  })
  WeatherApi.getCurrent('nyc').then(function(response) {
    vm.nycWeather = response.data;
    console.log('Weather in NYC:' + JSON.stringify(vm.nycWeather));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="someCtrl as vm">
</div>

Understanding the concept of Angular factories in Javascript

Answer №1

Similar questions

Troubleshooting issue: AngularJS NVD3 line chart directive does not refresh after data update (not updating in real time)

Configuring select options using API data

Having trouble retrieving prices using an npm package

When using selenium-python, every attempt to click a button consistently results in an error message

Styling material-ui textfield: Tips and tricks

Is it possible for XSS attacks to exploit the HREF attribute when used with jQuery?

Calculate the total duration between two times and, if the difference is more than 10 minutes,

The issue with Lodash isEqual arises from the constructor specified by Angular

The most effective method for transitioning an application from AngularJS to React-Typescript Micro Frontend

Determine if two arrays share the same keys

Scraping the Web with Python: Harnessing the Power of Selenium and

Update DataTable 1.9 while preserving existing rows

How to show dates in AngularJS using local formatting

What are some solutions for troubleshooting a rapid-moving Selenium web driver?

Changes made to the data are not reflected in the user interface, but they are visible in the console

What is the proper way to initialize static variables in a JavaScript static class?

Add a JQuery function to the button element in the HTML code

Tips for showing error messages in response to exceptions

Definition of union types in JavaScript using Typescript

Tips on choosing and showcasing information from jQuery date and time picker