CODEWITHSUNDEEP
javascriptangularjssmart-table
shumana chowdhury
shumana chowdhury

Reputation: 1882

Using angularJS smart table

I would like to use AngularJS smart table for my site. I have gone through the documentation(smart table). Having hard time to understand how does the app.factory works here. I want to know how to implement createRandomItem function for the data I have in the database(mongodb).

app.factory('Resource', ['$q', '$filter', '$timeout', function ($q, $filter, $timeout) {

    //this would be the service to call your server, a standard bridge between your model an $http

    // the database (normally on your server)
    var randomsItems = [];

    function createRandomItem(id) {
        var heroes = ['Batman', 'Superman', 'Robin', 'Thor', 'Hulk', 'Niki Larson', 'Stark', 'Bob Leponge'];
        return {
            id: id,
            name: heroes[Math.floor(Math.random() * 7)],
            age: Math.floor(Math.random() * 1000),
            saved: Math.floor(Math.random() * 10000)
        };

    }

    for (var i = 0; i < 1000; i++) {
        randomsItems.push(createRandomItem(i));
    }


    //fake call to the server, normally this service would serialize table state to send it to the server (with query parameters for example) and parse the response
    //in our case, it actually performs the logic which would happened in the server
    function getPage(start, number, params) {

        var deferred = $q.defer();

        var filtered = params.search.predicateObject ? $filter('filter')(randomsItems, params.search.predicateObject) : randomsItems;
if (params.sort.predicate) {
            filtered = $filter('orderBy')(filtered, params.sort.predicate, params.sort.reverse);
        }

        var result = filtered.slice(start, start + number);

        $timeout(function () {
            //note, the server passes the information about the data set size
            deferred.resolve({
                data: result,
                numberOfPages: Math.ceil(filtered.length / number)
            });
        }, 1500);


        return deferred.promise;
    }

    return {
        getPage: getPage
    };

}]);

Upvotes: 2

Views: 472

Answers (1)

Minato
Minato

Reputation: 4533

Ok... My Time to Shine.. :D.... Just kidding.. you answer is bellow..

Well this a fairly straight forward example, if you are familiar with angular factory.

when you use a factory service it executes the code inside the factory's definition and return whatever you would just like calling a function.

So what the above code is doing is when you use this factory service simply generates a list of random items(Avengers) into the array randomItems that step is fairly simple. if you look at the createRandomItem(id) and the for loop after it.

the trick however is in getPage() and what the Resource factory is returning. So lets go on a journey.

in the code where Resource factory is used when you call Resourse.getPage() it'll return a promise object on which you can call other JS functions. and inside getPage() as you can see it has set a timeout to call resolve with an object that has variables data and numberOfPages in it, on the deffered object which triggers doneCallback on the promise of that deffered object.

so when you service like

Resourse.getPage(1,2,3) // please see the use of these arguments inside the  getPage function
.done(function(result){
   result.data; //the fake server data from the factory
   result.numberOfPages; //this is computed in factory as well
});

When 1500ms pass the function/callback passed to done gets trigerred.

Summary and Answer

Note: Please read above first it took me hell of a time to write that.

Now to address your problem. what you can do is modify this

app.factory('Resource', ['$q', '$filter', '$timeout', function ($q, $filter, $timeout)

to

app.factory('Resource', ['$http', '$q', '$filter', '$timeout', function ($http, $q, $filter, $timeout)

an use $http to retrieve data from the server or mongodb and fill in an array with your data from server.

$http.get(server_url).success(function(response){
    //....do something with the response from the server like filtering etc.. 
    //finally..
    deferred.resolve({
       data: response
    });
});

an finally when using service

Resourse.getPage(1,2,3) //what ever you want to pass its not necessory to pass the same as above
  .done(function(response){
     //do what ever you want to do with response from your factory.. PHEW...
   });

P.S.0. its the longest answer I've provided to date.. PHEW :P

P.S.1. Please feel free to ask any question in the comments

Upvotes: 3

Related Questions