title: Why is my directive not being seen in my AngularJS app?
body: <p>I have just created a directive in a file called <code>helloWorldz.js</code> file which looks like this :</p>
  
  <pre><code>'use strict';
  
  angular.module('components')
    .directive('helloWorld', function () {
      return {
        restrict : 'E',
        template : '&lt;span&gt;Hello World&lt;/span&gt;'
      };
  });     
  </code></pre>
  
  <p>my <code>app.js</code> file which contains my routes looks like this :</p>
  
  <pre><code>'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: '/'
        });
    });    
  </code></pre>
  
  <p>my controller <code>main.js</code> which is not done looks like this :</p>
  
  <pre><code>'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" },
      ];
    });
  </code></pre>
  
  <p>Chrome Dev Tools tells me that <code>helloWorldz.js</code> is being successfully loaded. See below</p>
  
  <p><img src="https://i.stack.imgur.com/fKMUm.png" alt="enter image description here"></p>
  
  <p>I should mention that if I place my directive code in my <code>main.js</code> after my controller, and pass in <code>['components']</code> as the argument after <code>mmApp</code> I will see my directive code work. Here is the altered <code>main.js</code> controller : </p>
  
  <pre><code>'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 : '&lt;span&gt;Hello World&lt;/span&gt;'
      }
  });  
  </code></pre>
  
  <p>How come <code>app.js</code> is not successfully calling in the <code>components</code> module which contains my <code>helloWorld</code> directive? Is this an possible issue with <code>app.js</code> not being able to connect to <code>helloWorldz.js</code>?</p>
  
  <p>I should also mention that I am using grunt to compile everything. </p>