Javascript 为每个路由调用http的正确方法AngularJs

我对AngularJs非常新，我正在尝试使用不同的

$http

请求创建多条路由。我的问题开始于路由更改和页面内容稍后显示。 我以某种方式找到了答案，但我认为这不是正确的方法。 希望有人能告诉我是否有更好的方法

注意：AngularJs版本：1.6 |使用ui路由器

main.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'
    })
});

---

谢谢大家!

首先，包装对服务的

$http

调用。接下来，尝试使用

resolve

编辑

好的，示例如下（不包装到服务）：

在控制器中：

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

---

首先，包装对服务的

$http

调用。接下来，尝试使用

resolve

编辑

好的，示例如下（不包装到服务）：

在控制器中：

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

---

简而言之，您的路线必须按以下方式更改：

.state('category', {
    resolve: {
       data : ($stateParams, dataService) => dataService.getData('path', $stateParams, 'category')
    },
    url: '/category/:type/:id',
    templateUrl : 'templates/pages/category.html',
    controller : 'categoryPage'
})

---

而

getData

方法应该重构为服务（

dataService

）

简而言之，您的路由必须这样更改：

.state('category', {
    resolve: {
       data : ($stateParams, dataService) => dataService.getData('path', $stateParams, 'category')
    },
    url: '/category/:type/:id',
    templateUrl : 'templates/pages/category.html',
    controller : 'categoryPage'
})

---

而

getData

方法应该重构为服务（

dataService

）

您应该首先创建一个服务，该服务将负责与服务器/API通信，以便处理数据。您可以在其中包含方法

getPageData

，它返回一个promise对象

服务

app.service('myService', function($http){
   var self = this;
   self.getPageData = function(path, postData){
        return $http.post(path,postData, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' });
        .catch(function(e) {
            new Error('Error: ', e);
            throw e;
    });
});

然后，您可以轻松地利用

ui路由器的
resolve
状态选项，直到您的ajax承诺得到解决

.state('info', {
    url: '/info/:id',
    templateUrl : 'templates/pages/info.html',
    controller : 'singlePage',
    resolve: {
       getData: function(myService) {
          return myService.getPageData('path', {}, 'info')
       }
    }
})

您应该首先创建一个服务，该服务将负责与服务器/API通信，以便处理数据。您可以在其中包含方法
getPageData
，它返回一个promise对象

服务

app.service('myService', function($http){
   var self = this;
   self.getPageData = function(path, postData){
        return $http.post(path,postData, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' });
        .catch(function(e) {
            new Error('Error: ', e);
            throw e;
    });
});

然后，您可以轻松地利用
ui路由器的
resolve
状态选项，直到您的ajax承诺得到解决

.state('info', {
    url: '/info/:id',
    templateUrl : 'templates/pages/info.html',
    controller : 'singlePage',
    resolve: {
       getData: function(myService) {
          return myService.getPageData('path', {}, 'info')
       }
    }
})

角度版本？这看起来也像UI路由器。如果是，请在版本中指定？这看起来也像UI路由器。如果是，请在问题中详细说明。你能给我举个具体的例子吗？我的代码有什么问题？…我尝试过使用解析，但当我添加更多路由状态时，解析变得非常困难。我之所以选择解析，是因为这是正确的方法，您可以而且应该将http调用抽象到angular service/services，然后解析功能会更简单，您也可以有许多“状态路由器”文件。所以不需要一个大文件。移动必须有http承诺才能进行状态解析的好处是，只有当客户端获得所需的所有数据时，才会发生实际的页面更改谢谢！但如果每个州都需要它（我有15个类似的州）？你需要为每个州添加“resolve”，但你可以使用universal service进行请求，请参见@Pankaj Parkar answer。你可以给我一个具体的例子吗？我的代码有什么问题？…我尝试过使用解析，但当我添加更多路由状态时，解析变得非常困难。我之所以选择解析，是因为这是正确的方法，您可以而且应该将http调用抽象到angular service/services，然后解析功能会更简单，您也可以有许多“状态路由器”文件。所以不需要一个大文件。移动必须有http承诺才能进行状态解析的好处是，只有当客户端获得所需的所有数据时，才会发生实际的页面更改谢谢！但如果每个州都需要它（我有15个看起来相似的不同州）？您需要为每个州添加“解析”，但您可以使用通用服务请求，请参阅@Pankaj Parkar answer.OP using
$stateParameters
，它可以使用
$stateParameters
通过Angle DIOP传递到解析函数，可以通过角度DI传递给解析函数