Kann Angular Service nicht ausführen

Question

Ich versuche, ein Beispiel von LinkedIn zu folgen, aber mit den folgenden Problemen: 1. Ich versuche, localhost: Portname/Werte/GetStates aufzurufen, aber anstatt die Seite zu laden fordert es mich auf, die herunterzuladen JSON-Datei. 2. Als ich F12 verwendete, zeigte es mir nicht Angular und andere Referenzen, die ich meinem Projekt hinzufügte, kann nicht verstehen, warum es so ist? Ich habe versucht, mit Quellenangaben am oberen Rand der Seite wie folgt aus:

<script src="~/Scripts/angular.js"></script> 
<script src="~/Scripts/Controllers/AngularController.js"></script> 
<script src="~/Scripts/Services/AngularService.js"></script> 
<link href="~/Content/bootstrap.css" rel="stylesheet" /> 

und mit:

bundles.Add(new ScriptBundle("~/Scripts/angularscripts").Include(
      "~/Scripts/angular.js", 
      "~/Scripts/AngularController.js", 
      "~/Scripts/AngularService.js")); 

und dann einschließlich des Bündels Referenz wie folgt aus:

@section Scripts 
{ 
    @Scripts.Render("~/Scripts/angularscripts") 

} 

aber didn‘ t arbeiten entweder.

Mein Code ist einfach:

public class ValuesController : ApiController 
{ 
    [HttpGet] 
    public string GetStates() 
    { 
     List<States> states = new List<States>(); 
     var state = new States(); 

     state.Id = 1; 
     state.Name = "NSW"; 
     states.Add(state); 

     state.Id = 2; 
     state.Name = "QLD"; 
     states.Add(state); 

     state.Id = 3; 
     state.Name = "VIC"; 
     states.Add(state); 

     state.Id = 4; 
     state.Name = "WA"; 
     states.Add(state); 

     var result = JsonConvert.SerializeObject(states); 
     return result; 
    } 

    [HttpPost] 
    public string GetResult(States state) 
    { 
     var result = "State name is " + state.Name; 
     result = JsonConvert.SerializeObject(result); 
     return result; 

    } 

} 

und Angular-Code ist: AngularService.js

AngularModule.service('ApiCall', ['$http', function ($http) { 
var result; 

this.GetApiCall = function (controllerName, methodName) { 
    result = $http.get('api/' + controllerName + '/' + methodName).success(function (data, status) { 
     result = (data); 
    }).error(function() { 
     alert("Some problem in calling the service"); 
    }); 
    return result; 
}; 

this.PostApiCall = function (controllerName, methodName, obj) { 
    $http.post('api/' + controllerName + '/' + methodName).success(function (data, status) { 
     result = (data); 
    }).error(function() { 
     alert("Some problem in calling the service"); 
    }); 
    return result; 
}; 

}]);

AngularController.js

var AngularModule = angular.module('App', []); 

AngularModule.controller('AppController', function ($scope, $http, ApiCall)  { 
    $scope.message = "This is a test"; 
    alert('App Controller'); 

    var result = ApiCall.GetApiCall("Values", "GetStates").success(function (data) { 
     alert('data'); 
     var result = $.parseJSON(JSON.parse(data)); 
     $scope.StateList = result; 
    }); 

    $scope.btnPostCall = function() { 
     var obj = { 
      'Name': 'NSW' 
     }; 

     var result = ApiCall.PostApiCall("Values", "GetResult", obj).success(function (data) { 
      var result = $.parseJSON(JSON.parse(data)); 
      $scope.message = result; 
     }); 

    } 

}); 

AngularService.js

AngularModule.service('ApiCall', ['$http', function ($http) { 
var result; 

this.GetApiCall = function (controllerName, methodName) { 
    result = $http.get('api/' + controllerName + '/' + methodName).success(function (data, status) { 
     result = (data); 
    }).error(function() { 
     alert("Some problem in calling the service"); 
    }); 
    return result; 
}; 

this.PostApiCall = function (controllerName, methodName, obj) { 
    $http.post('api/' + controllerName + '/' + methodName).success(function (data, status) { 
     result = (data); 
    }).error(function() { 
     alert("Some problem in calling the service"); 
    }); 
    return result; 
}; 

}]);

Ich führe dieses Projekt durch Anhängen von 'api/values ​​/ getstates' an localhost. Irgendwelche Ideen ???

} 
} 

Answer 1

ich konfrontiert ähnliches Problem, wenn ich AngularJS Anwendung im Internet Explorer Browser ausgeführt wird, funktioniert aber in anderen Browsern wie Firefox und Chrome in Ordnung. In meinem Fall war das Problem, dass die Registrierungseinstellung von Internet Explorer nicht für die Anzeige von json eingestellt war. Daher wurde der Stream wie jede andere Datei zum Herunterladen bereitgestellt.

Bitte beachten Sie die Einstellungen im folgenden Link, wenn das auch für Sie funktioniert.

How can I convince IE to simply display application/json rather than offer to download it?

Answer 2

Hallo, ist dieses voll Beispiel können Sie herausfinden, wie Service in Ihrer Anwendung zu verwenden.

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

 
app.controller("controller", ["$scope","ApiCall", function ($scope, apiCall) { 
 
      var root = 'http://jsonplaceholder.typicode.com'; 
 

 
      apiCall.GetApiCall(root + "/posts").then(function(data) { 
 
       $scope.posts = data; 
 
      }); 
 

 
      $scope.post = function() { 
 
       var command = { 
 
        title: 'maher', 
 
        body: 'test', 
 
        userId: 1 
 
       } 
 
       apiCall.PostApiCall(root + "/posts", command).then(function (response) { 
 
        console.log(response) 
 
        $scope.posts.push(response); 
 
       }); 
 
      } 
 

 
     }]); 
 

 
     app.service("ApiCall", ["$http", "$q", function ($http, $q) { 
 
      this.GetApiCall = function (api) { 
 
       var deferred = $q.defer(); 
 

 
       $http({ 
 
        method: "GET", 
 
        async: true, 
 
        url: api 
 
       }).success(function (response) { 
 
        deferred.resolve(response); 
 
       }) 
 
        .error(function (error) { 
 
         console.error("HttpRestApp error:", error); 
 
         deferred.reject(error); 
 
        }); 
 
       return deferred.promise; 
 
      }; 
 

 
      this.PostApiCall = function (api, data) { 
 
       var deferred = $q.defer(); 
 

 
       $http({ 
 
        method: "POST", 
 
        async: true, 
 
        data: data, 
 
        url: api 
 
       }).success(function (response) { 
 
        deferred.resolve(response); 
 
       }) 
 
        .error(function (error) { 
 
         console.error("HttpRestApp error:", error); 
 
         deferred.reject(error); 
 
        }); 
 
       return deferred.promise; 
 
      }; 
 
     }]);

<!DOCTYPE html> 
 
<html ng-app="app" ng-controller="controller as ctrl"> 
 
<head> 
 
    <title></title> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h1>POST</h1> 
 

 
    <button ng-click="post()">post</button> 
 
    <small>check your console: check last record it will be post</small> 
 

 
    <div class="clearfix"></div> 
 
    <h1>GET</h1> 
 
    <table class="table table-bordred"> 
 
     <tr ng-repeat="post in posts"> 
 
      <td>{{post.title}}</td> 
 
     </tr> 
 
    </table> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
</body> 
 
</html>