Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS $http.get with resolve

Tags:

angularjs

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.

Details from 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'
        })
});

The controller

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.

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

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.

How could I use urls to make ajax calls?

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

like image 243
ThePianist Avatar asked Jan 23 '14 13:01

ThePianist


People also ask

How do we pass data and get data using http in angular?

Use the HttpClient.get() method to fetch data from a server. The asynchronous method sends an HTTP request, and returns an Observable that emits the requested data when the response is received. The return type varies based on the observe and responseType values that you pass to the call.

Which object does the http GET () function return?

HttpClient.get() returns response datalink HttpClient.get() returns the body of the response as an untyped JSON object by default.

How would you write code to modify the response from an http GET?

catch( (error: Response) => { return Observable. throw(error); } );

What is $resource in AngularJS?

Overview. A factory which creates a resource object that lets you interact with RESTful server-side data sources. The returned resource object has action methods which provide high-level behaviors without the need to interact with the low level $http service. Requires the ngResource module to be installed.


1 Answers

From $routeParams docs:

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.

So just inject $route instead of $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;
      })
    }
}
like image 158
Ilan Frumer Avatar answered Nov 15 '22 22:11

Ilan Frumer