如何使用AngularJs，Ui-Router和MongoDB查询数据库并填充控制器？

Question

我一直在试图让我的Angular应用程序在页面加载之前用来自数据库（mongodb）的数据填充控制器。我无法完成它的工作。我试图使用角度ui路由器的“解决”属性，但它不工作，我不知道！

下面是我的应用程序的完整代码：

var freezerApp = angular.module('freezerApp', ['ui.router']); 



    freezerApp.config([ 
    '$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider) { 

    $stateProvider 
    .state('home', { 
     url: '/home', 
     templateUrl: '/partials/home.html', 
     controller: 'freezerCtrl', 


    }); 




    $stateProvider 
    .state('freezer', { 
     url: '/freezers', 
     templateUrl: 'partials/freezers.html', 
     controller: 'freezerCtrl', 
     //not working: 


     resolve: { 
     freezerPromise: function($scope){ 
     return $scope.getAll(); 

     } 
    }; 
    }); 


    $urlRouterProvider.otherwise('home'); 
}]); 







freezerApp.controller('freezerCtrl', ['$scope', '$http', function ($scope,$http) { 

    $scope.freezer = 
    {'freezername':'Freezer Name', 
    'building':'Building', 
    'floor':'Floor', 
    'room':'Room', 
    'shelves': 0, 
    'racks': 0 


    }; 

    $scope.add_freezer = function() { 




    $scope.freezers.push(

    {'freezername': $scope.freezer.freezername, 
    'building':$scope.freezer.building, 
    'floor':$scope.freezer.floor, 
    'room':$scope.freezer.room, 
    'shelves': $scope.freezer.shelves, 
    'racks': $scope.freezer.racks 


    } 




     ); 



}; 

    $scope.freezers = [ 
    { 
    } 


    ]; 



    $scope.default_freezer = $scope.freezers[0]; 

    $scope.getAll = function() { 
    return $http.get('/freezers').success(function(data){ 
     angular.copy(data, $scope.freezers); 
    }); 
    }; 




}]); 

Answer 1

按照Ui-Router Resolve Documentation：

您可以使用决心向用户提供的内容或数据控制器是自定义的状态。 resolve是应该注入控制器的依赖关系的可选映射。

如果这些依赖关系都承诺，他们将得到解决和控制前会转换为数值被实例化和$ stateChangeSuccess事件。

它看起来像你想从你的freezerCtrl到你的决心财产提供$scope对象。这是不正确的。

我会建议你为你的API调用创建一个类似的工厂。

angular.module.('freezerApp').factory('freezerFact',function($http){ 
    return { 
    getAll: $http.get('/freezers') 
    } 
}); 

然后你的冰箱$state减速的内部，你可以做这样的：

$stateProvider 
    .state('freezer', { 
     url: '/freezers', 
     templateUrl: 'partials/freezers.html', 
     controller: 'freezerCtrl', 
     resolve: { 
     freezerPromise: function(freezerFact){ 
       return freezerFact.getAll; 
     } 
    }; 
}); 

然后，你会通过freezerPromise对象插入到freezerCtrl和操作之后的承诺。