javascript - AngularJS：在控制器接收到所有数据后加载templateUrl

Question

我想在加载来自我的服务器的数据时显示我的模板。

我创建了一个名为 Services 的模块，其中包含一些服务来加载我的数据，我使用 HomeService 作为示例。

var app = angular.module('MyApp', ['Services']);

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/', 
        {
            templateUrl: 'home.html',
            controller: 'Home_Ctrl',
            resolve: {
                loadData: //??
            }
        });
}]);

app.controller('Home_Ctrl', ['$scope', 'HomeService', function($scope, HomeService) {

    $scope.data = HomeService.getData();

}

我想我需要做出一个承诺来做到这一点。是否可以将此功能放在我的控制器中？

我的意思是，我不想要这样的东西：

var ctrl = app.controller('Home_Ctrl', ['$scope', 'HomeService', function($scope, HomeService) {
    //Do something
}

//Promise
ctrl.fct = function($q) {
}

我想要这样的东西：

app.controller('Home_Ctrl', ['$scope', '$q', 'HomeService', function($scope, $q, HomeService) {

    //Do something

    //Promise
    this.fct = function() {}
}

任何想法？

谢谢。

Answer 1

您可以使用控制器的解析属性。您可以创建一个对象，该对象将返回承诺并分配给控制器解析函数并在控制器定义中注入相同的内容，请参见非常简单的示例

$routeProvider.when('/ExitPoll', {
        templateUrl: '/partials/ExitPoll.html', controller: exitpollController, resolve: {
            responseData: ['$http', function ($http) {
                return $http.get('/Candidate/GetExitPolls/hissar').then(function (response) {
                    return response.data;
                });
            }],

        }
    });


var exitpollController = ['$scope', '$http','responseData','$rootScope',
function ($scope, $http, responseData, $rootScope) {
}];