集成ASP.NET Webforms,WebAPI和AngularJS

我创建了一个空白的,新的ASP.NET 4.5.1 webforms应用程序,并将WebAPI包含在其中.我为我的客户列表创建了一个示例页面,以及一个基于EF6的标准WebAPI CustomerController：ApiController以及所有常用的CRUD方法.我使用Fiddler测试了那个WebAPI,并且看得很低 – 我从我的数据库中恢复了我的8个客户.

然而,进入AngularJS有点不成功和非常令人沮丧的经历….

我从NuGet中包含了AngularJS,这似乎有效 – 没有显示任何错误或任何东西,一堆角度* .js文件被转储到我的Scripts文件夹中.

我基于母版页创建了一个基本的CustomerList.aspx页面,其中包含< html lang =“en”ng-app =“TestAngular”>标签.

为了从WebAPI服务获取数据,我创建了我的Angular模块,并在$scope内创建了一个模型,并创建了一个服务来从WebAPI获取数据：

在app.js里面：

var testModule = angular.module('TestAngular',[ ]);

testModule.controller('clientController',function ($scope,clientService) {
    $scope.model = [];
    clientService.getAllClients(function(results) {
        $scope.model.clients = results;
    });

    $scope.model.clientCount = $scope.model.clients.count;
});

testModule.factory('clientService',function ($http) {
    var srv = {};
    srv._baseUrl = 'http://localhost:56313';

    // Public API
    return {
        getAllClients: function(callback) {
            return $http.get(srv._baseUrl + '/api/Customer').success(callback);
        }
    };
});

从我有限的Javascript理解,这应该定义一个调用我的WebAPI URL的clientService(testModule.factory()调用),获取JSON,然后回调函数将检索到的客户填充到$scope.model.clients中属性,还应计算$scope.model.clientCount.

我的ASPX页面看起来像这样：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CustomerList.aspx.cs" Inherits="TestAngular.CustomerList" MasterPageFile="~/Site.Master"  %>

<asp:Content runat="server" ID="content" ContentPlaceHolderID="MainContent">
    <h2>My customers</h2>

    <div class="panel panel-default" data-ng-controller="clientController">
        We have a total of {{ model.clientCount }} clients in our database table ...

        <div class="list-group" data-ng-repeat="client in model.clients">
            <div class="list-group-item">
                <span>{{ client.Name }}</span><br/>
                <span>{{ client.Name2 }}</span><br/>
            </div>     
        </div>
    </div>
</asp:Content>

所以< div>使用data-ng-controller应该将DIV与AngularJS控制器“连接”,应该从WebAPI调用加载客户,并将它们包含在模型中,然后使用数据绑定语法将其呈现到ASPX页面({ {client.Name}}等)

问题是：调用WebAPI并返回正确的8个客户,但是,当我调试Javascript代码时,clientCount总是未定义的,而ASPX页面只显示两个空行,这些行可能对应于已经存在的客户检索 – 但为什么只有2,而不是8？

我完全迷失了 – 有人能看出我做错了什么,我在这里缺少什么？