Why isn't this function executing on page load?

Question

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

can you create a fiddle for the same? – Pratik May 10 '15 at 19:27 — Pratik, May 10 '15 at 19:27

Erik Honn · Accepted Answer · 2015-05-10T19:40:09.493

3

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.

edited May 10 '15 at 19:40

answered May 10 '15 at 19:32

Erik Honn

7,576
5
33
42

I've rewritten my code this way, and the problem still remains. Just to be sure, I've put the new code into the original question to reflect my changes. In my console window (that is running the Node server, not the browser console window), I am not seeing any requests to the API router. – h3xc0ntr0l May 10 '15 at 20:21
It works for me when I tested it in a fiddle. Can you create a fiddle or bin so we can see how it is structured? Also, check out UncleDaves answer. He has a point, you should almost never need to use document ready in Angular. – Erik Honn May 10 '15 at 20:45
Sorry! I figured out my error. I'll select it as the right so this doesn't show up as an unanswered question anymore. Any comments about the way I'm doing it now? All are appreciated! – h3xc0ntr0l May 10 '15 at 20:48
Doing $scope = $rootScope; is a bit strange. Try to avoid littering rootScope with things, keep stuff contained in the controller that is supposed to use it, and share it via a service if you need to send data between controllers (http://stackoverflow.com/questions/21919962/angular-share-data-between-controllers). Other than that, I think it looks pretty good! – Erik Honn May 10 '15 at 20:52
Thank you very much! I'd give you 10 thumbs up if I could, but unfortunately SO's algorithms are too good for that ;) – h3xc0ntr0l May 10 '15 at 20:55

score 2 · Answer 2 · answered May 10 '15 at 20:26

2

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.

answered May 10 '15 at 20:26

UncleDave

6,872
1
26
44

score 0 · Answer 3 · answered May 10 '15 at 20:33

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!

Why isn't this function executing on page load?

3 Answers3