无法在 angularjs 中执行 $http 方法答案

【问题标题】：not able to execute $http method in angularjs无法在 angularjs 中执行 $http 方法
【发布时间】：2017-04-22 00:46:57
【问题描述】：

我正在尝试从 web-api 获取数据。在单个 html 页面上运行时，我会用数据返回响应，但如果这个脚本是单独编写的（在 html 页面之外），我将无法获取数据。

这是第一个成功接收数据的情况。

<body ng-app="MyApp">
<div ng-controller="PostsCtrl">
<button type="submit" class="btn" ng-click="login()">Get Data</button>
    <table border="1">
        <tr>
            <td>{{post}}</td>
            <td>{{post.Name}}</td>
            <td>{{post.Price}}</td>
            <td>{{post.Category}}</td>
        </tr>

    </table>
</div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"</script>
<script>    
     var app = angular.module("MyApp", []);

     app.controller("PostsCtrl", function ($scope, $http) {
     $http.get('http://localhost:35456/api/customer/Dipti123/dipti').
     success(function (data, status, headers, config) {
          $scope.posts = data;
          alert("recived data");
          //alert(data.data.ID);
      }).
      error(function (data, status, headers, config) {
          // log error
          alert("error");
      });
});
</script>

这是我遇到错误的另一种情况。

controller.js

var app = angular.module("angularApp");

app.controller("loginController", function ($scope, $http) {

    $scope.login = function () {
        $http.get('http://localhost:35456/api/customer/Dipti123/dipti').
            success(function (data, status, headers, config) {
            $scope.posts = data;
            alert("recived data");
            //alert(data.data.ID);
        }).
        error(function (data, status, headers, config) {
            // log error
            alert("error");
        });
    };        
});

home.html

<div class="container-fluid" style="padding-top: 10px; position: relative; color:darkorange">
<table border="1">
        <tr>
            <td>{{post}}</td>
            <td>{{post.Name}}</td>
            <td>{{post.Price}}</td>
            <td>{{post.Category}}</td>
        </tr>

    </table>
</div>

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="angularApp">
<head>
<title>Ebank</title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="lib/routing.js"></script>
<script src="lib/Controller.js"></script>
</head>
<body style="background-color:#333">
<div ng-view></div>
</body>
</html>

路由.js

(function () {

var app = angular.module("angularApp", ["ngRoute"]);

app.config(function ($routeProvider) {
    $routeProvider            
        .when("/login", {
            templateUrl: "/views/login.html",
            controller: "Controller"
        })
        .when("/info", {
            templateUrl: "/views/info.html",
            controller: "infoController"
        })
        .otherwise({ redirectTo: "/home" });
});

}());

你能说说这里犯的错误吗？

【问题讨论】：

您已将 home.html 重定向为 HomeController。但是在controller.js 中有loginController
我已经更改了该部分，但与错误 405 无关。@SankarRaj

标签： javascript html angularjs json angularjs-scope

【解决方案1】：

这就是您没有在 html 中获取数据的原因请参阅下面的这个 controller.js

$scope.posts 行已被注释。

$scope.login 被声明为 function，未被调用。

app.controller("loginController", function ($scope, $http) {
   /***************************************************/
       $scope.login();
   /***************************************************/
    $scope.login = function () {
        $http.get('http://localhost:35456/api/customer/Dipti123/dipti').
            success(function (data, status, headers, config) {
            /***************************************************/
            $scope.posts = data;
            /***************************************************/
            alert("recived data");
            //alert(data.data.ID);
        }).
        error(function (data, status, headers, config) {
            // log error
            alert("error");
        });
    };        
});

更新 1：

在控制器中您使用的是 $scope.posts 但在 HTML 中您使用的是 post 将其更改为 posts 如下 HTML

<button type="submit" class="btn" ng-click="login()">Get Data</button>
    <table border="1">
        <tr>
            <td>{{posts}}</td>
            <td>{{posts.Name}}</td>
            <td>{{posts.Price}}</td>
            <td>{{posts.Category}}</td>
        </tr>

    </table>
</div>

【讨论】：

但我收到警报作为错误而不是收到数据警报@Aravind
用 F12 检查你的控制台有什么错误？
@abhishek 我也更新了我的答案。检查它并告诉我你得到了 json 吗？如果是这样，在控制台中打印。并分享控制台截图，
收到数据后我收到与“帖子”无关的错误 405，然后我将收到帖子@Aravind 的错误
@abhishek 35456 是您拥有 api 的端口，但在您的屏幕截图中可以看到端口号。