javascript - AngularJs每条路由调用http的正确方法

Question

我对 AngularJs 非常陌生，我正在尝试使用不同的 $http 请求创建多个路由。当路线更改并且页面内容稍后显示时，我的问题就开始了。我以某种方式弄清楚了，但我认为这不是正确的方式。希望有人告诉我是否有更好的方法。

注意: AngularJs 版本:1.6 |使用用户界面路由器

ma​​in.js

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

asTwl.controller('generals', function($scope, $http, $timeout){

    $scope.pageLoader = false;

    $scope.getPageData = function(path, postData, obj){
        $scope.pageLoader = true; 
        $http({
            method: 'post',
            url: path,
            data: postData,
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        })
        .then(function(response) {
            if (response.data) {
                $scope.data[obj] = JSON.parse(response.data);
                $timeout(function(){
                    $scope.pageLoader = false;
                }, 100)
             }
        })
        .catch(function(e) {
            new Error('Error: ', e);
            throw e;
        })
    }
});

asTwl.controller('homePage', function($scope, $http){   
    var postData = {
      //data...
    }
    $scope.getPageData('path', postData, 'home')
})

asTwl.controller('singlePage', function($scope, $http, $stateParams){   
    var postData = $stateParams;
    $scope.getPageData('path', postData, 'page')
})

asTwl.controller('categoryPage', function($scope, $http, $stateParams){   
    var postData = $stateParams;
    $scope.getPageData('path', postData, 'category')
})

asTwl.config(function($stateProvider, $urlRouterProvider, $locationProvider){

    $urlRouterProvider.otherwise('/');

    $stateProvider
    .state('home', {
        url: '/',
        templateUrl : 'templates/pages/home.html',
        controller : 'homePage'
    })
    .state('info', {
        url: '/info/:id',
        templateUrl : 'templates/pages/info.html',
        controller : 'singlePage'
    })
    .state('category', {
        url: '/category/:type/:id',
        templateUrl : 'templates/pages/category.html',
        controller : 'categoryPage'
    })
});

谢谢!

Answer 1

首先，将您的 $http 调用包装到服务中。接下来，尝试使用 resolve https://github.com/angular-ui/ui-router/wiki#resolve

编辑

好的，示例在这里(没有包装到服务):

$stateProvider
.state('home', {
    url: '/',
    templateUrl : 'templates/pages/home.html',
    controller : 'homePage',
    resolve: {
       routeData:  function($http){
        return $http({
        method: 'post',
        url: 'path',
        data: postData /* your POST data - i don't know what is it for your code*/,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded'               }
        })
     }
    }
})
.state('info', {
    url: '/info/:id',
    templateUrl : 'templates/pages/info.html',
    controller : 'singlePage'
})
.state('category', {
    url: '/category/:type/:id',
    templateUrl : 'templates/pages/category.html',
    controller : 'categoryPage'
})

在 Controller 中:

asTwl.controller('homePage', function($scope, routeData){   
      $scope.someData = routeData;
})