Создание приложения погоды с использованием AngularJS и OpenWeather

0

Моя задача - отобразить прогноз погоды из API.

У меня есть следующий код, но я не могу получить данные для показа. Я только начал изучать AngularJS и использовать API сегодня, поэтому любая помощь была бы высоко оценена! В частности, что не так с моим кодом, что данные о погоде не будут отображаться?

Это API, который мне нужно использовать:

 http://api.openweathermap.org/data/2.5/forecast/daily?q=KansasCity&mode=json&units=imperial&cnt=7&appid=bd82977b86bf27fb59a04b61b657fb6f

 angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.controller('OpenWeather', function($scope, $http, $log) {
    $scope.city = "Kansas City";
    $scope.units = 'imperial';

    $scope.change = function() {
        var url = 'http://api.openweathermap.org/data/2.5/forecast/daily?q=KansasCity&mode=json&units=imperial&cnt=7&appid=bd82977b86bf27fb59a04b61b657fb6f';
        $http.jsonp(url)
        .success(function(data, status, headers, config) {
            $scope.main = data.main;
            $scope.wind = data.wind;
            $scope.description = data.weather[0].description;
        })
        .error(function(data, status, headers, config) {
            $log.error('Could not retrieve data');
        });
    };

    $scope.change();
});

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Weather App</title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter" ng-controller="OpenWeather">
    <ion-pane>
      <ion-header-bar class="bar-positive">
        <h1 class="title">Kansas City Weather</h1>
      </ion-header-bar>
      <ion-content>
          <div class="list card">
              <div class="item item-avatar">
                <img src="img/ionic.png">
                <h2>10 Day Forecast</h2>
                <p>Kansas City, MO</p>
              </div>
              <div class="item item-avatar">
                  <h3>{{data.name}}</h3>
                  <p>Temp: {{main.temp}}</p>
                  <p>
              </div>
              </div>
      </ion-content>
    </ion-pane>
  </body>
</html>

Обновить

Решила проблему. Спасибо всем

  • 3
    какой у Вас вопрос? Вы опубликовали описание своего проекта, ссылку на API и кучу кода, но без постановки проблемы .
  • 0
    Кроме того, я сомневаюсь, что ваш вопрос связан с наукой и теориями, стоящими за программированием, поэтому тег по компьютерной науке, вероятно, неуместен.
Показать ещё 7 комментариев
Теги:
ionic-framework

2 ответа

1
Лучший ответ

Вы используете $ http неправильно. Лучше и чище создавать объект запроса и размещать там параметры. Пожалуйста, ознакомьтесь с официальными документами: https://docs.angularjs.org/api/ng/service/ $ http # use

И здесь JSBIN: http://jsbin.com/doqeselile/edit?html,css,js,output

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

app.controller('DemoCtrl', function($http) {
  
  var vm = this;
  
  var URL = 'http://api.openweathermap.org/data/2.5/forecast/daily';
  
  var request = {
    method: 'GET',
    url: URL,
    params: {
       q: 'KansasCity',
      mode: 'json',
      units: 'imperial',
      cnt: '7',
      appid: 'bd82977b86bf27fb59a04b61b657fb6f'
    }
  };
  
  $http(request)
    .then(function(response) {
      vm.data = response.data;
    }).
    catch(function(response) {
      vm.data = response.data;
    });
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angular JS</title>
</head>
<body ng-app="jsbin">
  <div ng-controller="DemoCtrl as vm">
    <h1>{{ vm.data | json }}</h1>
  </div>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
</body>
</html>
Поделиться
  • 0
    В настоящее время я обновляю свои навыки работы с интерфейсом (я являюсь внутренним разработчиком) - я действительно ценю, что вы показали «лучший» способ получения данных API в AngularJS.
2

Вы можете использовать фабрику или службу для получения информации, а затем передать информацию контроллеру.

.factory('weatherService', ['$http', '$q', function ($http, $q){
function getWeather () {
    var deferred = $q.defer();
    $http.get('http://api.openweathermap.org/data/2.5/forecast/daily?q=KansasCity&mode=json&units=imperial&cnt=7&appid=bd82977b86bf27fb59a04b61b657fb6f')
      .success(function(data){
        deferred.resolve(data);
      })
      .error(function(err){
        deferred.reject(err);
      });
    return deferred.promise
  }

  return {
    getWeather: getWeather,
  };
}
}])

Затем в вашем контроллере

.controller('OpenWeather', ['$scope', 'weatherService', function($scope, weatherService) {
weatherService.getWeather().then(function(data) {
      $scope.city = data;
})

С помощью этого вы можете получить доступ к любым данным из json файла и отобразить их в своем представлении.

 <div class="item item-avatar">
    <h3>{{city.name}}</h3>
    <p>Temp: {{city.temp}}</p>
    <p>
</div>
Поделиться
  • 0
    Пожалуйста, прекратите давать обещания там, где они вам не нужны, люди учатся неправильно.
  • 0
    @LeandroZubrezki, почему создание обещания здесь не требуется?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню