从ngRoute传递数据解析到控制器

Question

我有一个应用程序，我使用ngRoute生成SPA。在完成从数据库中获取数据之前，我不想加载视图。以下工作，但我无法将返回数据传递给我的控制器。

Angular Service：

angular.module('routeService',[])

.factory('dataFetch', function($http, $q){

var deferred = $q.defer();
var factory = {}

factory.getProposals = function(){


    return $http.get('urlHere')
        .then(function(response){
            //promise is fulfilled
            deferred.resolve(response.data);

            console.log("readched the bio service!" + response.data);

            //promise is returned
           // return deferred.promise;
            return response.data;

        }, function(response){
            deferred.reject(response);

            //promise is returned
            return deferred.promise;
        });};


      return factory;

   });

角度控制器：

var login = angular.module('login', ['ngRoute', 'routeService'])

 // configure our routes
login.config(function($routeProvider,$locationProvider) {
    $routeProvider

        // route for the home page

        .when('/', {
            templateUrl: '/overview.html',
            controller: 'login',
            resolve: {
                myDta: function(dataFetch){
                    return dataFetch.getProposals();
                }
            }

        })

});

login.controller('login', function($scope, myDta){

   $scope.prop = myDta

}) 

我收到以下错误：

Unknown provider: myDtaProvider <- myDta <- login

Answer 1

错误使用ng-controller='login'

  

我收到以下错误：

Unknown provider: myDtaProvider <- myDta <- login

错误消息表示login控制器正在某处ng-controller指令实例化。当ngRoute服务实例化控制器时，它会将解析注入为本地。 ng-controller指令无法从路由器访问结算。

来自另一个StackOverflow答案： ¹

  

ngRoute支持将已解析的变量注入控制器，这对于应用程序的横切关注非常有用，例如应用程序的身份验证或配置。

     

缺点是控制器只能通过可注入的这些参数进行实例化，这意味着您可以手动实例化控制器（使用$controller），几乎从不实例化，或使用{{1有决心。你不能用这样的控制器做什么用ngRoute实例化它，或者在注入参数不可用的任何其他位置实例化。

     

此错误表示除了在路径上定义了控制器之外，您还在路径模板中将控制器定义为ng-controller。控制器的第二次实例化失败了。

- StackOver: How to inject dependency from resolve routeProvider

延迟反模式 ²

ng-controller服务错误地实现了经典deferred anti-pattern。 dataFetch服务已经返回一个承诺。没有必要使用$http制定承诺。而是链并从$q.defer()承诺返回。

$http

有关详细信息，请参阅StackOverflow: Is this a “Deferred Antipattern”?

Answer 2

您可以使用$route服务按照here说明访问已解决的值。 你的工厂还有很烦人的事情。您正在使用全局承诺并在出现错误时返回承诺。那是完全错误的。使用诺言的正确方法是

angular.module('routeService',[])
   .factory('dataFetch', function($http, $q) {
       var factory = {}
       factory.getProposals = function() {

          var deferred = $q.defer();
          $http.get('urlHere')
             .then(function(response) {
                 // Do what else you want to do
                 deferred.resolve(response.data);
             }, function(response) {
                 // Do what else you want to do
                 deferred.reject(response);
             });

          return deferred.promise;
       };

       return factory;
   });

添加依赖关系来解析像这样的路径中的数据

 $routeProvider

    // route for the home page

    .when('/', {
        templateUrl: '/overview.html',
        controller: 'login',
        resolve: {
            myDta: function(dataFetch){
                return dataFetch.getProposals();
            }
        }

    })

您可以访问myDep控制器中的login，如下所示：

 login.controller('login', function($scope, $route) {
    $scope.myDta = $route.current.locals.myDta;
 });

以下是工作示例：http://plnkr.co/edit/WSJk8dhXv1Fvv4yaGf5n?p=preview