基于AngularJS的城市天气查询、经纬度获取及数据持久化问题求解

一、经纬度显示功能修复 #

问题原因：1. OpenWeatherMap接口返回值的coord字段本身包含经纬度，原service层没有把该字段返回给控制器；2. 页面绑定的经纬度变量未定义，也没有绑定到控制器实例vm上。

1. 修改weatherService.js返回值 #

找到sendResponseData方法中的return逻辑，新增经纬度字段返回：

return {
  // 原有字段保留
  City: data.name,
  Temperatures: GetTemperatures(data.main),
  Temperatures1: GetTemperatures(data.main),
  // 新增经纬度字段
  lat: data.coord.lat,
  lon: data.coord.lon
}

2. 修改script.js查询回调 #

两个查询方法SearchC和SearchF的成功回调中，新增经纬度赋值，同时加入后续持久化需要的存储逻辑：
以SearchC为例，SearchF同步修改即可：

weatherService.GetWeather(vm.query)
  .then(function(data) {
    // 原有赋值保留
    vm.City = data.City;
    vm.Temperatures = data.Temperatures;
    // 新增经纬度赋值
    vm.lat = data.lat;
    vm.lon = data.lon;
    // 新增数据持久化存储
    localStorage.setItem('weatherData', JSON.stringify({
      query: vm.query,
      City: vm.City,
      Temperatures: vm.Temperatures,
      Temperatures1: vm.Temperatures1 || [],
      lat: vm.lat,
      lon: vm.lon,
      ValidDataLoaded: true
    }));
    vm.ValidDataLoaded = true;
  })

3. 修改index.html绑定逻辑 #

首先删掉会导致页面循环加载的无效代码<div ng-include="'index.html'" ng-show="vm.ValidDataLoaded"></div>，再修改经纬度的绑定变量：

City: <span>{{vm.query}}</span>  <br>
<span>Latitude: {{vm.lat}}</span><br>
<span>Longitude: {{vm.lon}}</span><br>

二、页面刷新数据持久化实现 #

使用原生localStorage实现，无需引入额外依赖，在控制器初始化时读取本地存储的已有数据，有数据直接渲染无需重新查询：
在script.js控制器逻辑最开头新增初始化读取逻辑：

var vm = this;
// 新增：初始化读取本地存储数据
var localData = localStorage.getItem('weatherData');
if (localData) {
  var parseData = JSON.parse(localData);
  vm.query = parseData.query;
  vm.City = parseData.City;
  vm.Temperatures = parseData.Temperatures;
  vm.Temperatures1 = parseData.Temperatures1;
  vm.lat = parseData.lat;
  vm.lon = parseData.lon;
  vm.ValidDataLoaded = parseData.ValidDataLoaded;
}
// 后面保留原有的SearchC、SearchF方法

三、其他小问题修复 #

现有index.html中Enter city:前面有一个多余的</form>闭合标签，直接删除即可，避免表单逻辑异常。

内容的提问来源于stack exchange，提问作者Nancy