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

Question

I've been trying to get my Angular app to populate the controller with data from a database (mongodb) before the page loads. I can't quite get it to work. I'm trying to use the "resolve" property of angular ui-router but it's not working and I can't figure it out!!

Here's the full code for my app:

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

According to the Ui-Router Resolve Documentation :

You can use resolve to provide your controller with content or data that is custom to the state. resolve is an optional map of dependencies which should be injected into the controller.

If any of these dependencies are promises, they will be resolved and converted to a value before the controller is instantiated and the $stateChangeSuccess event is fired.

It looks like you are trying to provide $scope object from your freezerCtrl to your resolve property. This is incorrect.

I would recommend you create a factory like so for your api call.

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

Then inside of your freezer $state deceleration you could do it like this:

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

Then you would pass the freezerPromise object into your freezerCtrl and manipulate the promise after that.