Created
May 19, 2016 16:33
-
-
Save queerviolet/ba5e238cf3df9d4277383328285c9ca5 to your computer and use it in GitHub Desktop.
Angular Factories Example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html ng-app=WeatherApp> | |
| <head> | |
| <title>You could just go outside</title> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> | |
| <script src="angular-factory-demo.js"></script> | |
| </head> | |
| <body ng-controller=CurrentWeatherCtrl> | |
| <h1>The current temperature is {{ forecast.currently.apparentTemperature }}</h1> | |
| <p>At {{ address }} ({{ forecast.latitude }}lat, {{ forecast.longitude }}lng)</p> | |
| <h2>Today</h2> | |
| <p ng-controller=CurrentHourlySummaryCtrl>{{ hourlySummary }}</p> | |
| <h2>This week</h2> | |
| <p>{{ forecast.daily.summary }}</p> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "use strict" | |
| var weather = angular.module('WeatherApp', []); | |
| // We're using the DarkSky API to get the forecast | |
| // (DarkSky is such a cool name for an API) | |
| // (This URL is a tunnel to DarkSky.) | |
| var FORECAST_URL = 'https://tonicdev.io/queerviolet/573cd68b00710d1500c1002e/branches/master' | |
| // We're using Google's Geocoding API to find your address | |
| var GOOGLE_API_KEY = 'AIzaSyCUWTRai4UeGfmk7dre9VYue22AcuSDdIw' | |
| var GOOGLE_GEOCODE_URL = `https://maps.googleapis.com/maps/api/geocode/json?key=${GOOGLE_API_KEY}` | |
| weather.factory('Geolocation', function() { | |
| return { | |
| getCurrentPosition: function getCurrentPosition() { | |
| return new Promise(function(resolve, reject) { | |
| navigator.geolocation.getCurrentPosition(resolve) | |
| }) | |
| } | |
| } | |
| }) | |
| weather.factory('Forecast', function($http) { | |
| // cache: Map<LatLng : Promise<a forecast>> | |
| var cache = {} | |
| return { | |
| getForecast: function(position) { | |
| var latlng = `${position.coords.latitude},${position.coords.longitude}` | |
| if (latlng in cache) { | |
| console.log('Cache hit', latlng) | |
| return cache[latlng] | |
| } | |
| // Get the forecast at that location | |
| var url = `${FORECAST_URL}?location=${latlng}` | |
| console.log('Fetching forecast from', url) | |
| return cache[latlng] = $http.get(url) | |
| .then(function(response) { | |
| console.log('Forecast acquired:', response.data) | |
| return response.data | |
| }) | |
| } | |
| } | |
| }) | |
| weather.factory('Geocoding', function($http) { | |
| return { | |
| geocode: function(position) { | |
| // Also, get the street address | |
| var latlng = `${position.coords.latitude},${position.coords.longitude}` | |
| return $http.get(`${GOOGLE_GEOCODE_URL}&latlng=${latlng}`) | |
| .then(function(response) { | |
| return response.data | |
| }) | |
| } | |
| } | |
| }) | |
| weather.controller('CurrentWeatherCtrl', function ($scope, $http, Geolocation, Forecast, Geocoding) { | |
| // Ask the browser for the user's current position on Earth | |
| // (n.b. does not work if the user is not on Earth). | |
| Geolocation.getCurrentPosition() | |
| .then(function(position) { | |
| console.log('Position acquired:', position) | |
| Forecast.getForecast(position) | |
| .then(function(forecast) { | |
| // Set the forecast on the scope | |
| $scope.forecast = forecast | |
| }) | |
| Geocoding.geocode(position) | |
| .then(function(decoded) { | |
| console.log('Geocoding results:', decoded) | |
| var bestMatch = decoded.results[0] | |
| // Set the street address on the scope | |
| $scope.address = bestMatch && bestMatch.formatted_address || "(Couldn't acquire a street address.)" | |
| }) | |
| }) | |
| }) | |
| weather.controller('CurrentHourlySummaryCtrl', function ($scope, $http, Geolocation, Forecast, Geocoding) { | |
| Geolocation.getCurrentPosition() | |
| .then(function(position) { | |
| Forecast.getForecast(position) | |
| .then(function(forecast) { $scope.hourlySummary = forecast.hourly.summary }) | |
| }) | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment