AngularJS-只有在所有承诺得到解决后才显示路线_Angularjs

AngularJS-只有在所有承诺得到解决后才显示路线

angularjs

AngularJS-只有在所有承诺得到解决后才显示路线,angularjs,Angularjs,只有在承诺得到解决后，我才尝试加载路线 var app = angular.module("thethaoso", ["ngRoute"]); app.config(['$routeProvider', '$locationProvider', function ($routeProvider) { $routeProvider .when('/', { resolve: { message: f

只有在承诺得到解决后，我才尝试加载路线

    var app = angular.module("thethaoso", ["ngRoute"]);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider) {

    $routeProvider

        .when('/', {     
            resolve: {
               message: function (repoService) {
                    return repoService.getMsg();
                }
            }
        });

}]);

app.factory('repoService', function ($http) {
    return {
        getMsg: function () {
            return "hihihi";
        }
    };
});
app.controller('teamLoadCtrl', function ($scope,message) {
    $scope.message= message;

});

视图：


{{message}}

始终获取错误：[$injector:unpr]$injector/unpr？p0=messageProvider%20%3C-%20message%20%3C-%20teamLoadCtrl

完整代码在

我错过什么了吗

谢谢大家。

问题在于您尚未指定模板和控制器来解析邮件对象。如果使用以下语法，它将起作用

.when("/", {
    templateUrl: "yourView.html",
    controller: "yourController",
    resolve: {
        message: function(yourService){
            return yourService.get();
    }
}

下面是一个正在工作的JSFIDLE：

您还可以在控制器中手动解析承诺，如下所示：

repoService.getMsg()
    .then(function (msg) {
        $scope.message = msg;
    }

当承诺像我上面所做的那样解析到范围上时，ui将更新。您可以显示加载栏并使用ng hide使页面在加载时感觉流畅。

解析时，服务必须返回承诺而不是值

下面是示例服务

app.factory('repoService', function ($http, $q) {
    var user = {};
    var q = $q.defer();

    $http.get('https://api.github.com/users/Serhioromano')
        .success(function(json){
          user = json;
          q.resolve();
        }).error(function(){
          q.reject();
        });


    return {
        promise: function() {
          return q.promise;
        },
        get: function() {
          return user;
        }
    };
});

这里的要点是，你只回承诺。您可以处理如何保存结果。然后您可以像在

get（）

中一样使用这个结果。您知道，在调用

get（）

时，

user

变量已经设置，因为promise是

resolve

现在在路由器

app.controller('MainCtrl', function($scope, repoService) {
  $scope.user = repoService.get();
});

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', { 
          templateUrl: '/view.html',
          controller: 'MainCtrl',
          resolve: {
             message: function (repoService) {
                  return repoService.promise();
              }
          }
      })
     .otherwise({ redirectTo: '/' });
});

通过

repoService.promise（）

在controller

repoService中，只有在解决该承诺后才会触发get（）

所以你得到了你的数据

代码中的另一件事是，您使用了

ng controller

。但那个东西并没有绑定到路由器，所以若它被解决或并没有被解决，那个么它就可以避免。您必须删除ng控制器并使用控制器路由器

控制器：'MainCtrl'，

这会影响你的HTML

<body ng-app="myapp">

  <ng-view></ng-view>

  <script type="text/ng-template" id="/view.html">
    <p>Hello {{user.name}}!</p>
  </script>
<body>


你好{{user.name}}

您必须使用

在其中包含子模板，然后在子模板中可以使用控制器的作用域

请参阅。

与您试图从中获得灵感的代码相比，您发布的代码有一些错误

使用

$routeProvider

解析路由时，结果将应用于元素

，而不是您指定的基本元素

。如果没有

元素，则

$routeProvider

无法将正确的控制器绑定到正确的html片段。使用

ng controller

在呈现dom元素时实例化控制器实例，并且不允许像您尝试的那样向控制器传递参数。因此，由于未知的

消息

对象，您的解析错误。实际上，

message

在

$routeProvider

实例之外是不可用的。

您希望如何将消息作为参数传递给控制器？@andrew，我明白了，您没有很好地遵循该示例；该文档对

$routeProvider

而不是

ng controller

使用控制器操作，并将依赖项数组传递到控制器中，而不仅仅是一个简单的参数。这很奇怪，因为实际上在我的项目中，我有控制器和模板。我只是删减了代码，以获得清晰的表达。我会更仔细地看一看。谢谢。我想问题是我把asp.NETMVC母版页和angularjs结合起来了。因此，更新后的Div位于视图（ng视图）的父页面上，这意味着TemplateUrl中的视图是该页面的子视图。我想我需要用指令来代替。

<body ng-app="myapp">

  <ng-view></ng-view>

  <script type="text/ng-template" id="/view.html">
    <p>Hello {{user.name}}!</p>
  </script>
<body>