$HTTP.Get is Canceled

Question

I'm very new to Angular and am try to make a simple "Hello World" webservice call to a simple Rest web service that I've verified returns "Hello World" when you hit it.

I have 3 alerts in the method. I see the "In method" alert and then don't see any of the other alerts. I've attached fiddler and the web service request is never made. I've got to be overlooking something basic here I would think....any ideas on what am I may be missing?

Fiddler shows that the web service call is successful and I can see the results from the Web Service I expect but using Chrome's developer tools shows me that the call to the service is being cancelled by something inside of Angular.

Thanks in advance to any help provided.

            (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;
    };

});

})(); UPDATE:

Right now I'm clicking the submit button on a login form and just attempting to get back a string so I can verify basic communication with the web service. My goal is to pass the username/password in and get a token back. Here's the form:

                    <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

I found that the service I was hitting was returning a "No 'Access-Control-Allow-Origin' " message which would allow the service to complete but would cause Angular to short circuit. I fixed this by adding an "Access-Control-Allow-Origin" to the Response header in the service.

Links:

Cross Origin Resource Sharing for c# WCF Restful web service hosted as Windows service

"Access-Control-Allow-Origin:*" has no influence in REST Web Service