Why is my directive not being seen in my AngularJS app?

Question

I have just created a directive in a file called helloWorldz.js file which looks like this :

'use strict';

angular.module('components')
  .directive('helloWorld', function () {
    return {
      restrict : 'E',
      template : '<span>Hello World</span>'
    };
});     

my app.js file which contains my routes looks like this :

'use strict';

angular.module('mmApp', ['components'])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/designs', {
        templateUrl: 'views/designs.html',
        controller: 'MainCtrl'
      })
      .when('/blog', {
        templateUrl: 'views/blog.html',
        controller: 'MainCtrl'
      })   
      .otherwise({
        redirectTo: '/'
      });
  });    

my controller main.js which is not done looks like this :

'use strict';

angular.module('mmApp', [])
  .controller('MainCtrl', function ($scope) {
    $scope.designTiles = [
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
    ];
  });

Chrome Dev Tools tells me that helloWorldz.js is being successfully loaded. See below

I should mention that if I place my directive code in my main.js after my controller, and pass in ['components'] as the argument after mmApp I will see my directive code work. Here is the altered main.js controller :

'use strict';

angular.module('mmApp', ['components'])
  .controller('MainCtrl', function ($scope) {
    $scope.designTiles = [
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
    ];
  });

angular.module('components', [])
  .directive('helloWorld', function () {
    return {
      restrict : 'E',
      template : '<span>Hello World</span>'
    }
});  

How come app.js is not successfully calling in the components module which contains my helloWorld directive? Is this an possible issue with app.js not being able to connect to helloWorldz.js?

I should also mention that I am using grunt to compile everything.

Answer 1

It looks like the directive code is slightly different in the standalone version. There is:

angular.module('components')

instead of

angular.module('components',[])

Fixing that (by adding the argument to the standalone version) should fix the problem. I think a bunch of people have run into this because the top comment on AngularJS's module page is:

This documentation should warn that "angular.module('myModule', [])" always creates a new module, but "angular.module('myModule')" always retrieves an existing reference.