javascript - 在 Controller 中保持代码干燥的 Angular 方法

Question

所以我正在构建一个 Ionic 应用程序只是为了熟悉它，这是我第一次使用 Angular，而且我还不太了解 Angular 的思维方式。

我有两项服务，一项返回位置，另一项返回该位置的天气。我将数据组织在服务中并将其发送到 Controller ，在 Controller 中我使用 Controller 中的服务函数为要在 View 中使用的每个数据点设置 $scope 变量。我想在 Controller 中集成“拉动刷新”功能，现在我只是复制了最初位于 Controller 中的代码并将其包装在 ion.Refresher 指令中。保持代码干燥的最佳方法是什么。

谢谢!

服务.js

angular.module('weather.services', [])

.service('getLocation', function($http){
  this.getData = function(lat, long) {
    var promise = $http({
      method: 'GET',
      url: 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + lat + ',' + long
    }).success(function(data) {
      data.location = data.results[3].address_components[0].long_name;
      return data.location;
  });
  return promise;
 }
})

.service('getWeather', function($http){
  this.getData = function(lat, long) {
    var promise = $http({
        method: 'jsonp',
        url:  'https://api.forecast.io/forecast/api-key/' + lat + ',' + long + '?callback=JSON_CALLBACK'
    }).success(function(data) {
      data.currentTemperature = parseInt(data.currently.temperature);
      data.summary = data.currently.summary;
      data.icon = data.currently.icon;

      var timestamp = moment.unix(data.currently.time);
      var formattedDate = moment(timestamp, "YYYY-MM-DD HH:mm:ss")
      data.todaysDate = formattedDate.format('dddd Do MMMM');

      var daily_data = data.daily.data;
      var days = []
      angular.forEach(daily_data, function(value, key) {
        this.push(value);
      }, days);
      data.dailyWeather = days;

      // hourly weather for side scroll
      var hourly_data = data.hourly.data;
      var hours = []
      angular.forEach(hourly_data, function(value, key) {
       this.push(value);
      }, hours);
      data.hourlyWeather = hours;

      return data;
    });
    return promise;
   }
 })

Controller .js

angular.module('weather.controllers', [])

.controller('HomeCtrl', function($scope, $http, getLocation, getWeather, $cordovaGeolocation) {

  $cordovaGeolocation
    .getCurrentPosition()
    .then(function (data) {
      $scope.latitude = data.coords.latitude;
      $scope.longitude = data.coords.longitude;

      // Gets location and city you are in
      getLocation.getData($scope.latitude, $scope.longitude).then(function(data){
        $scope.location = data.data.location;
      })

      // Gets the weather data for the city you are in
      getWeather.getData($scope.latitude, $scope.longitude).then(function(weather){
        $scope.weather = weather.data;
        $scope.today = weather.data.todaysDate;
        $scope.weather.currentTemp = weather.data.currentTemperature;
        $scope.weather.summary = weather.data.summary;
        $scope.weather.icon = weather.data.icon;
        $scope.weather.daily = weather.data.dailyWeather;
        $scope.weather.hourly = weather.data.hourlyWeather;
      })
    }, function(err) {
      console.debug(err);
    });

    // see the repeated code
    $scope.doRefresh = function() {
      console.log('currently refreshing data')
      $cordovaGeolocation
        .getCurrentPosition()
        .then(function (data) {
          $scope.latitude = data.coords.latitude;
          $scope.longitude = data.coords.longitude;

          // Gets location and city you are in
          getLocation.getData($scope.latitude, $scope.longitude).then(function(data){
            $scope.location = data.data.location;
          })

          // Gets the weather data for the city you are in
          getWeather.getData($scope.latitude, $scope.longitude).then(function(weather){
            $scope.weather = weather.data;
            $scope.today = weather.data.todaysDate;
            $scope.weather.currentTemp = weather.data.currentTemperature;
            $scope.weather.summary = weather.data.summary;
            $scope.weather.icon = weather.data.icon;
            $scope.weather.daily = weather.data.dailyWeather;
            $scope.weather.hourly = weather.data.hourlyWeather;
          })

          $scope.$broadcast('scroll.refreshComplete');
        }, function(err) {
          console.debug(err);
        });
    }
});

Answer 1

你可以这样做来保持你的代码干燥，它和其他的一样:

.controller('HomeCtrl', function($scope, $http, getLocation, getWeather, $cordovaGeolocation) {

  $scope.loadData = function(isRefreshing) {
     ...// your code to load location and weather data here.
     //// 
     if (isRefreshing) {
        // broadcast your event
     }
  }

  $scope.loadData(); // load data for the first time
  $scope.doRefresh = function() {
     $scope.loadData(true); // load data on refreshing
  }