在angularjs中对ui.router的解析执行$ http get请求是否可以?

时间:2015-07-22 12:07:36

标签: javascript angularjs http resolve

我有以下代码(下面),它们对我和我至少需要的东西都很有效。但我对此持怀疑态度,我感觉它太好了,不可能。由于我正在努力解决$http的异步行为,这对我在控制器上全局使用$http请求中的响应对象有很大帮助。

我只是想知道它是正确的方式还是至少是可接受的方式,或者我应该使用传统方式使用$http得到AngularJS' Documentation上的方式,然后继续我的项目。答案对我很有帮助。谢谢。

$ stateProvider

$stateProvider
    .state('test', {
        url: '/test',
        templateUrl: 'partial.template.html',
        resolve : {
            foo : function($http) {
                return $http({
                    method: 'GET',
                    url: '/api/something'
                });
            },
            bar : function($http) {
                return $http({
                    method: 'GET',
                    url: '/api/something'
                });
            },
        },
        controller: 'mainController',
    })

控制器

.controller('mainController',['$scope', 'foo', 'bar', function($scope, foo, bar){
    $scope.fooObj = foo;
    $scope.barObj = bar;
}])

1 个答案:

答案 0 :(得分:7)

我认为这可能是ui-router解决方案的最佳用途。

无论如何,我更喜欢将我的http呼叫包装到服务中并将此服务调用到解决方案中,而不是直接使用$ http。

这可能如下所示:

app.service('FooService',function($http){
  var service={}; 
  service.getFoo = function(){
      return $http({
                method: 'GET',
                url: '/api/something'
             });
  }
  return service;
});

多亏了你可以在你的应用程序周围调用这个方法(并在同一时间集中它)。

在控制器中:

app.controller('MyController', function($scope, FooService) {
    $scope.controllerName = "MyController";
    FooService.getFoo().success(function(foo){
        $scope.foo = foo
    });
});

决心:

$stateProvider
.state('test', {
    url: '/test',
    templateUrl: 'partial.template.html',
    resolve : {
        foo : function(FooService) {
            return FooService.getFoo();
        },
    },
    controller: 'MyController',
})

继续采用这种方法,你的方法很好。

希望它有所帮助。

编辑:构建一个plunker来添加这些方法的具体例子。