$ HTTP.Get被取消

Question

我是Angular的新手，我尝试对经过验证的简单Rest Web服务进行简单的“ Hello World” Web服务调用，当您单击它时，它将返回“ Hello World”。

我在该方法中有3个警报。 我看到“方法中”警报，然后看不到其他任何警报。 我已经附加了提琴手，并且从未提出过Web服务请求。 我必须在这里忽略一些基本的东西。...关于我可能缺少的任何想法？

Fiddler显示Web服务调用成功，并且可以看到预期的Web Service结果，但是使用Chrome的开发人员工具显示，对Angular内部的某些调用取消了对该服务的调用。

在此先感谢您提供的任何帮助。

            (function () {

var app = angular.module("loginApp", ['ngResource'])
    .config(function ($httpProvider) {
        // Enable CORS
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
    });

app.controller('LoginController', function ($scope, $http) {
    this.loginImage = "images/ActiveView_ContentMgm_140x40.png";

    this.loginUser = function () {
        var token = "";
        var loginUrl = "http://ten1.com/services/rest/demoservice.svc/Login";

        delete $http.defaults.headers.common['X-Requested-With'];
        var result = $http({ method: 'GET', url: loginUrl, params: { userName: this.userName, passWord: this.passWord } })
        .success(function (data, status) {
            $scope.status = status;
            $scope.data = data;
        })
        .error(function (data, status) {
            $scope.data = data || "Request failed";
            $scope.status = status;
        });

        token = data.Token;
    };

});

}）（）; 更新：

现在，我单击登录表单上的“提交”按钮，只是尝试取回字符串，以便可以验证与Web服务的基本通信。 我的目标是传入用户名/密码并获得令牌。 形式如下：

                    <form ng-submit="loginCtrl.loginUser()" novalidate>
                        <div class="form-group">
                            <label for="exampleInputEmail1">Username</label>
                            <input type="text" class="form-control" style="border-radius:0px" ng-model="loginCtrl.loginForm.userName" placeholder="Enter username">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">Password </label>
                            <input type="password" class="form-control" style="border-radius:0px" ng-model="loginCtrl.loginForm.passWord" placeholder="Password">
                        </div>
                        <button type="submit" class="btn btn-sm btn-default">Log in</button>

Answer 1

将$ scope和$ http注入您的控制器，而不是您的loginUser()函数：

 app.controller('LoginController', function ($scope, $http) {

Answer 2

我发现我要命中的服务返回“ No'Access-Control-Allow-Origin'”消息，该消息将允许该服务完成，但会导致Angular短路。 我通过在服务的Response标头中添加“ Access-Control-Allow-Origin”来解决此问题。

链接：

作为Windows服务托管的C＃WCF Restful Web服务的跨源资源共享

“ Access-Control-Allow-Origin：*”在REST Web服务中不起作用