Question

我正在使用ASP.NET MVC5和angularJS，我刚刚开始学习角度，我对最佳实践不太确定。我到目前为止归档的是好的但是不确定是否最好的方法，我的所有后端代码都已完成并且我将结果作为json返回到控制器（mvc）

关于angularJS我有以下代码，这是怎么做的？还是有更好的东西？我之所以使用ng-click调用所有方法的原因是我将选择-ui并传递params来检索新数据。

注意：我已经删除了很多部分内容，主仪表板大约有20个......

main.js

var mainModule = angular.module("mainModule", []);

mainModule.factory("appService", ["$http", "$q", function ($http, $q) {

        function getBookingData() {
            var deferred = $q.defer(),
                httpPromise = $http({ method: "GET", url: "/Main/BookingData" });

            httpPromise.then(function(response) {
                deferred.resolve(response);
            }, function(error) {
                console.error(error);
            });

            return deferred.promise;
        }

        function getCommissionData() {
            var deferred = $q.defer(),
                httpPromise = $http({ method: "GET", url: "/Main/CommissionsData" });

            httpPromise.then(function(response) {
                deferred.resolve(response);
            }, function(error) {
                console.error(error);
            });

            return deferred.promise;
        }

        return {
            getBookingData: getBookingData,
            getCommissionData: getCommissionData
        };
    }
]);

mainModule.controller("mainController", [
    "$scope", "$q", "appService", function($scope, $q, appService) {
        $scope.getObjects = function() {
            appService.getBookingData()
                .then(function(response) {
                    $scope.bookingArray = response.data;
                    console.log(response);
                }, function(error) {
                    console.error(error);
                });

            appService.getCommissionData()
                .then(function(response) {
                    $scope.commissionArray = response.data;
                    console.log(response);
                }, function(error) {
                    console.error(error);
                });
        };
        $scope.getObjects();
    }
]);

index.cshtml

@{
    ViewBag.Title = "Main";
}

<div class="wrapper wrapper-content" ng-app="mainModule" ng-controller="mainController">

    <div class="row">
            <button type="button" class="btn btn-warning" ng-click="getObjects()">Apply</button>
    </div>

    <div class="row">
        <div class="col-lg-3 col-sm-6">
            <div>@Html.Partial("_Booking")</div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div>@Html.Partial("_Commission")</div>
        </div>
    </div>

</div>

@section Scripts {
    @Scripts.Render("~/scripts/main")
}

Answer 1

您的appService代码可以更清晰。 $ http已经从其调用中返回promise，因此您不需要任何显式的$ q调用。

function getBookingData() {
    return $http({ method: "GET", url: "/Main/BookingData" })
           .catch(function (error) { console.error(error); });
}

相当于你的功能。最好回顾一下promise API的工作原理，并试验一些测试项目。

看起来你没有对$ scope.bookingArray和$ scope.commissionArray做任何事情，但也许它在你省略的部分中？

Answer 2

首先，Albert Liu关于承诺的回答是正确的。我认为您可以使用$http快捷方式将工厂代码减少到此：

mainModule.factory("appService", ["$http", function ($http) { // no need to inject $q

        function getBookingData() {
            return $http.get("/Main/BookingData"); // $http.get shortcut methods returns a promise
        }

        function getCommissionData() {
            return $http.get("/Main/CommissionsData"); // $http.get shortcut methods returns a promise
        }

        return {
            getBookingData: getBookingData,
            getCommissionData: getCommissionData
        };
    }
]);

使用angularJS在部分视图中加载多个资源

2 个答案: