Блог

Мне нужно добавить элемент управления 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>
  

и, наконец, bundle:

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

Я могу предположить, что Bundle попытается переименовать ваш http-провайдер $. Поэтому попробуйте .controller(«GetProductsCtrl», [«$scope», «$ http», функция ($scope, $ http){ }] вместо этого.