CODEWITHSUNDEEP
angularjs
h3xc0ntr0l
h3xc0ntr0l

Reputation: 399

Why isn't this function executing on page load?

I have a sidebar that contains a feed from various social medias, along with a service in AngularJS that queries my API for the data. Below is the controller, along with the service (in that order). Why isn't it being executed on page load, and how should I rewrite my code to make it load the data when the page is rendered to the client?

angular.module('HomeCtrl', ['MediaServ']).controller('HomeController', [
'$scope',
'MediaServ',
'$rootScope',
function($scope, $rootScope, MediaServ){
    if ($rootScope){
        $scope = $rootScope;
    }
    function handleRes(response){
        console.log('hello!');
    }
    angular.element(document).ready(function () {
        $scope.SocialMedia = function(){
            MediaServ.feed()
              .then(handleRes, handleRes);
        }
    });

}]);

angular.module('MediaServ', []).service('MediaServ', [
'$http',
function($http){
  this.feed = function(){
    return $http.get('/api/social/feed');
  }
}]);

Upvotes: 0

Views: 62

Answers (3)

h3xc0ntr0l
h3xc0ntr0l

Reputation: 399

So, UncleDave and Erik Honns' responses both led me to realize what was wrong (on top of having a typo in handleRes). Here is my new code:

angular.module('HomeCtrl', ['MediaServ']).controller('HomeController', [
'$scope',
'$rootScope',
'MediaServ',
function($scope, $rootScope, MediaServ){
    if ($rootScope){
        $scope = $rootScope;
    }
    function handleRes(response){
        if (response.data.tweets){
            $scope.SocialMedia = response.data.tweets;
        }
    }
    MediaServ.feed()
      .then(handleRes, handleRes);
}]);

It is now working. Thank you everybody for your help. I won't pick a best answer, and instead will let others vote. Feel free to flag this question to be deleted, as the errors were more on my side (kind of being lazy about reading through my code, but I thought that this was one of those Angular things you just kind of have to learn).

Thanks everyone for your help!

Upvotes: 0

UncleDave
UncleDave

Reputation: 7188

You shouldn't need to wrap your code in angular.element(document).ready(function () { });

The controller will execute on page load automatically, provided it is reference in the page.

Upvotes: 2

Erik Honn
Erik Honn

Reputation: 7576

You can only use things (be it services, factories, filters, etc) from another module if you have first injected that module into your current one. As the code above is written your modules don't know about each other, and so you can't inject MediaServ into HomeController.

To fix it, inject the MediaServ module into the HomeCtrl module like this:

angular.module('HomeCtrl', ['MediaServ'])...

I will also suggest not shortening names (minifiers should shorten things, developers should not) and not using the same name for services and apps. The last one in particular can cause a lot of confusion in a large project. Personally I prefer to name modules things like "media.services" and services "MediaService" but that is personal taste, just keep a clear naming convention so that you always know what is what.

Upvotes: 3

Related Questions