cshtmlでweb apiを呼び出すためにangleを使用することはできません

Question

AngularJsコントロールをプロジェクトのcshtmlファイルに追加する必要がありますが、動作させることができないため、単純なテストアプリケーションを作成しようとしましたこの単純なアプリ（アプリケーションモジュールとコントローラのみを含む）は動作していません！

app.js

(function() { 
    angular.module('testApp', []); 
}); 

GetProductsCtrl.js

angular.module('testApp.controllers', []); //this is supposed to go in a separate file 
angular.module('testApp.controllers') 
    .controller("GetProductsCtrl", function ($scope, $http) { 
     $scope.greetings = "hi"; 
     $http({ 
      method: 'GET', 
      url: "http://localhost:54327/api/products" 
     }) 
     .success(function (data) { 
      $scope.products = data; 
     }); 
    }); 

ProductsController.cs

public class ProductsController : ApiController 
{//inside the web api project and running on http://localhost:54327/ 
    Product[] products = new Product[] 
    { 
     new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, 
     new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, 
     new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M } 
    }; 
    public IEnumerable<Product> GetAllProducts() 
    { 
     return products; 
    } 

    public IHttpActionResult GetProduct(int id) 
    { 
     var product = products.FirstOrDefault(p => p.Id == id); 
     if (product == null) 
      return NotFound(); 
     return Ok(product); 
    } 
} 

使い方

<script src="~/Scripts/angular/common/GetProductsCtrl.js"></script> 
<div class="row" ng-app="testApp"> 
    <div> 
     Here I want to add the control. 
     {{1+1}} @*even this is not evaluated by angular!(it was working)*@ 
     <ul ng-controller="GetProductsCtrl"> 
      <li ng-repeat="product in products"> 
       {{product.Name}} : $ {{product.Price}} 
      </li> 
     </ul> 
    </div> 
</div> 

、最終的にはバンドル：

bundles.Add(new ScriptBundle("~/bundles/angular").Include(
       "~/Scripts/angular.min.js", 
       "~/Scripts/angular/app.js" 
       )); 

Answer 1

私が推測することができ、何がバンドルが$ HTTPプロバイダの名前を変更しようとするということです。 代わりに.controller（ "GetProductsCtrl"、 "" $ scope "、" $ http "、function（$ scope、$ http）{ }]を試してみてください。