Question

我试图启动并运行我的第一个ASP.NET Webforms和AngularJS应用程序，但我正在努力......

我创建了一个空白的，新的ASP.NET 4.5.1 webforms应用程序，并将WebAPI包含在其中。我为我的客户列表创建了一个示例页面，并使用所有常用的CRUD方法创建了基于EF6的标准WebAPI CustomerController : ApiController。我使用Fiddler对WebAPI进行了测试，并且看得很低 - 我从我的数据库中找回了8位客户。

将此问题纳入AngularJS却是一种不成功且非常令人沮丧的经历....

我在NuGet中添加了AngularJS，这似乎有效 - 没有显示任何错误或任何内容，一堆angular*.js个文件被转储到我的Scripts文件夹中。

我根据包含CustomerList.aspx标记的母版页创建了一个基本的<html lang="en" ng-app="TestAngular">页面。

为了从WebAPI服务获取数据，我创建了我的Angular模块，并在model内创建了一个$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理解，这应该定义一个clientService（testModule.factory()调用）调用我的WebAPI URL，获取JSON，然后回调函数填充检索到的客户<{1}}属性，还应计算$scope.model.clients。

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

$scope.model.clientCount

因此<%@ 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>应该＆＃34;连接＆＃34;具有AngularJS控制器的DIV应该从WebAPI调用加载客户，并将它们包含在模型中，然后使用数据绑定语法（data-ng-controller等）将其呈现到ASPX页面。

麻烦：发生对WebAPI的调用并返回正确的8个客户，但是，当我调试Javascript代码时，{{ client.Name }}始终为clientCount且ASPX页面仅显示两个空行可能对应于已检索的客户 - 但为什么只有2，而不是8？

我完全迷失了 - 有人能看出我做错了什么，我在这里失踪了什么？

Answer 1

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

您应该return承诺，然后数据将链接到控制器：

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

您可能还想看一下计数行：

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

在解决promise之前（并且调用了回调），$scope.model.clients将为undefined。所以，我希望这条线路失败。另外，要获取数组的 count ，您需要length。

您应该在回调中设置clientCount：

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

修改

通常，最好使用$http返回的承诺。因此，控制器会略微改为：

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; });

success展开响应并仅将正文发送到回调。

集成ASP.NET Webforms，WebAPI和AngularJS

1 个答案: