Question

我尝试制作天气应用

var Weather = angular.module('Weather', []);
var faren;
var cel;
var wed;
var temp;
var loc;
var wind;
var ktemp;

Weather.controller("locat", function($scope, $http) {
  var url = "http://ip-api.com/json";
  $http.get("url").then(function(response) {
    $scope.location = response.data;
    $scope.locationtwo = response.data.country;
  });
});


Weather.controller("lat&long", function($http, $rootscope) {
  $http.get("http://api.openweathermap.org/data/2.5/weather?lat=23&lon=55&appid=822eb616acf86279db40fadfbddf1b9d").then(function(response) {
    $scope.today = response.data.main.temp;
  });
});

Weather.controller("chgdg", function($scope) {
  $scope.mycf = function(response) {
    var faren = Math.round(today) * (9 / 5) - 459.67;
    var cel = Math.round(today - 273);

    if (cel === true) {
      $scope.today = response.faren;
    } else {
      $scope.today = response.cel;
    }

  }

});

<!DOCTYPE html>
<html ng-app="Weather">

<head>
  <title>Know your weather</title>
</head>

<body class="back">
  <div ng-controller="lat&long">
    //Actual weather// {{today}}
  </div>
  <div ng-controller="locat">
    {{location}} {{locationtwo}}
  </div>
  <div ng-controller="chgdeg">
    <button ng-click="mycf()">C/F</button>
  </div>
  <div class="info">
    <div class="develop">Developed by = S.S</div>
    <div class="langs">Created by: HTML,CSS,ANGULARJS</div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
  </script>
</body>

</html>

你能告诉我它有什么问题吗？我努力了，但我没有想出任何东西我还是初学者，所以我肯定不确定是什么问题它似乎只显示了html 我的angularjs似乎没有任何作用请告诉我我的angularjs有什么错误

更新：我把我的角度js代码放在3个在线语法验证器中。除了一些不必要的错误外，所有人都已经批准它在症状上是正确的。但我的应用程序仍然不起作用。请您阅读我的代码并告诉我有什么需要改变的。甚至尝试检查代码是否适合您。

Answer 1

您的控制器写得有点不对劲。你必须将一个数组作为第二个参数传递给你的.controller方法，然后在将它们传递给函数之前包含它们的提供者，如下所示：

angular
  .module('moduleName')
  .controller("ControllerName", [parameters, function(parameters) {
    // Controller's code here
})];

以下是您的第一个控制器的示例：

Weather.controller("locat", ["$scope", "$http", function($scope, $http) {
    var url = "http://ip-api.com/json";
    $http.get("url").then(function(response) {
        $scope.location = response.data;
        $scope.locationtwo = response.data.country;
    });
})];

只需将此模式用于所有控制器。

或者，如果您愿意，可以使用以下结构：

Weather.controller("locat", ["$scope", "$http", LocatCtrl]);

function LocatCtrl($scope, $http)
    var url = "http://ip-api.com/json";
    $http.get("url").then(function(response) {
        $scope.location = response.data;
        $scope.locationtwo = response.data.country;
    });
};

我更喜欢第二种方式，因为代码看起来更具可读性。

第二个控制器中$rootScope出现错误，应该是camelCase。

在你的JS代码中，第三个控制器名称为chgdg，但在HTML中你拼写错误，它是HTML中的chgdeg。＆＃34; chgdg！== chgdeg＆＃34;。

有关详细信息：https://docs.angularjs.org/guide/controller

感谢@Hadi的评论帮助！

请告诉我我的天气应用程序（初学者）的错误是什么

1 个答案: