CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scopeionic-framework
user944513
user944513

Reputation: 12729

how to load data before controller load?

How to get data from service before loading the view and controller. I do like that 

resolve: {
            getAlbum: function(albumService){
                return albumService.getAlbums();

        },getAtum: function(albumService){
                return albumService.getAtum();

        }

    }

I have one service this 

.factory('albumService', ['$http', '$q'],
    function albumService($http, $q) {
        // interface
        var service = {
            albums: [],
            getAlbums: getAlbums,
            getAtum:getAtum
        };
        return service;

        // implementation
        function getAlbums() {
            var def = $q.defer();

            $http.get("data.json")
                .success(function(data) {
                    service.albums = data;
                    def.resolve(data);
                })
                .error(function() {
                    def.reject("Failed to get albums");
                });
            return def.promise;
        }

             function getAtum() {
            var def = $q.defer();

            $http.get("data.json")
                .success(function(data) {
                    service.albums = data;
                    def.resolve(data);
                })
                .error(function() {
                    def.reject("Failed to get albums");
                });
            return def.promise;
        }
    })

I need to get data from service before loading this controller and view .

.controller('PlaylistsCtrl', function($scope) {
  $scope.playlists = [{
    title: 'Reggae',
    id: 1
  }, {
    title: 'Chill',
    id: 2
  }, {
    title: 'Dubstep',
    id: 3
  }, {
    title: 'Indie',
    id: 4
  }, {
    title: 'Rap',
    id: 5
  }, {
    title: 'Cowbell',
    id: 6
  }];
})

I am getting data from two service .I need to show loader till I get data from both service.I am using this to show loader

http://ionicframework.com/docs/api/service/$ionicLoading/

Plunker http://plnkr.co/edit/4k7fliaYQx3teVH326cD?p=info

Upvotes: 1

Views: 135

Answers (2)

Anjum....
Anjum....

Reputation: 4204

If you want to show loading spinner on page until its resolve. you can do something like below.

  resolve: {
        apiData: "albumService",
        itemDetailsData: function($q, apiData) {
          console.log("Spinner on :")
          var item = apiData.getAlbums();
          if (item) {
            console.log("Spinner Off :")
            return $q.when(item);
          } else {
            return $q.reject();
          }
        }
      }

In your controller you can inject itemDetailsData as a dependency.

Hope this helps

Upvotes: 0

Roy Miloh
Roy Miloh

Reputation: 3411

The resolve properties are injected automatically by ui-router right after they get resolved.

.controller('PlaylistsCtrl', function(getAlbum, getAtum) {
    // getAlbum and getAtum are resolved and ready to use
})
  1. I would use albums and atum instead of getAlbum and getAtum as it is the data itself.

  2. You use defer wrongly. $http.get is a promise itself. also, success and error are deprecated, use then instead.

    return $http.get().then();

Simplest jsbin.

Upvotes: 4

Related Questions