我正在尝试启动和运行我的第一个ASP.NET Webforms和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？

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

解决方法

你肯定是在正确的轨道上.目前,问题在于clientService getAllClients方法.

您应该返回承诺,然后数据将链接到控制器：

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

您可能还想查看计数行：

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

在解析promise之前(并且调用了回调),$scope.model.clients将是未定义的.所以,我希望这条线路失败.另外,要获得数组的计数,您需要长度.

您应该在回调中设置clientCount：

clientService.getAllClients(function(results) {
    $scope.model.clients = results;
    $scope.model.clientCount = $scope.model.clients.length;
});

编辑：

通常,使用$http返回的promise是有利的.因此,控制器会略微改为：

clientService.getAllClients().then(function(response) {
    $scope.model.clients = response.results;
    $scope.model.clientCount = response.results.length;
});

然后服务将变为：

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

Angular使用$q而不是回调的承诺(对于大多数apis).它们使链接和异常处理变得更加容易.

此外,因为在这种情况下,您知道您正在处理$http的承诺,您也可以使用控制器中的success方法：

clientService.getAllClients().success(function(results) {
    $scope.model.clients = results;
    $scope.model.clientCount = results.length;
});

成功展开响应并仅将正文发送到回调.