AngularJS $ http.get与解决 [英] AngularJS $http.get with resolve

问题描述

我逐渐了解AngularJS，并且遇到了一个有趣的问题.我逐渐认识了routeProvider，我想我可以像编写表名一样编写我的应用程序，它将更改路由，因此您也可以在url之后编写该表.

I'm getting to know AngularJS and I have an interesting problem. I'm getting to know the routeProvider and I thought I could write my app like if you search a table name, it'll change the route, so you can write the table right after the url, too.

app.js中的详细信息

app.config(function($routeProvider){
    $routeProvider
        .when('/', {
            templateUrl: 'pages/index.html',
            controller: 'homeCtrl'
        })

        .when('/tables/:table', {
            templateUrl: 'pages/about.html',
            controller: 'aboutCtrl',
            resolve: {
                tables: function($http, $routeParams){
                    return $http.get('http://mywebsite.com/doc/ajax/table.php?function=get_table_data&table='+$routeParams.table)
                                .then(function(response){
                                    console.log($routeParams.table);
                                    return response.data;
                                })
                }
            }
        })

        .otherwise({
            templateUrl: 'pages/404.html'
        })
});

控制器

angular
    .module('testApp')
    .controller('aboutCtrl',function($scope, tables){

        $scope.title = "This is the about page!";

        // declare helper variables to not use
        // $scope inside a loop
        var rawFields = [];
        var titleNames = [];

        // load the thead titles (keys)
        angular.forEach(tables[1], function(value, key){
            titleNames.push(key);
        });

        // load table datas without the first object that
        // contains other informations
        for (var i=1; i<tables.length;i++) {
            rawFields.push(tables[i]);
        };

        // set $scope variables to use them in the HTML
        $scope.fields = rawFields;
        $scope.tableName = tables[0].TableName;
        $scope.titles = titleNames;
    });

基本上就是您所需要的，但是如果您愿意，我可以提供更多代码.

Basically that's all you need, but I can include more code if you want.

当我在 $ http.get ...function=get_table_data&table=teszt或...function=get_table_data&table=teszt2(现在这两个都可用)中使用时，一切运行正常，我得到了数据，并且我可以用它们做任何事情

When I use in the $http.get ...function=get_table_data&table=teszt or ...function=get_table_data&table=teszt2 (now these two are available) everything is working perfectly, I get the datas and I can do anything with them

但是，如果我尝试在$http.get('http://mywebsite.com/doc/ajax/table.php?function=get_table_data&table='+$routeParams.table)上面包含的版本，那确实很奇怪.如果我键入...#/tables/teszt我没有得到数据，但是如果我在...#/tables/teszt2之后写，我会得到teszt表的数据，如果我写了之后的东西而不是teszt2，那么我会得到teszt2表的数据.

BUT if I try the version I included above $http.get('http://mywebsite.com/doc/ajax/table.php?function=get_table_data&table='+$routeParams.table), that's working strange. If I type ...#/tables/teszt I don't get the datas, but if I write after ...#/tables/teszt2, I get the teszt table's data and if I write something else after instead of teszt2 then I get the teszt2 table's data.

如何使用URL进行Ajax调用?

如果您以其他方式进行操作，我将不胜感激.

I would appreciate any best practices if you would do it in a different way.

推荐答案

来自 $ routeParams文档:

请注意， $ routeParams仅在路由更改成功完成后才更新.这意味着您不能依赖$ routeParams在路由解析功能中是正确的.相反，您可以使用$ route.current.params访问新路由的参数.

Note that the $routeParams are only updated after a route change completes successfully. This means that you cannot rely on $routeParams being correct in route resolve functions. Instead you can use $route.current.params to access the new route's parameters.

因此只需注入$route而不是$routeParams:

resolve: {
    tables: function($http, $route){
      return $http.get('http://mywebsite.com/doc/ajax/table.php?function=get_table_data&table='+$route.current.params.table)
      .then(function(response){
        return response.data;
      })
    }
}

这篇关于AngularJS $ http.get与解决的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！