Почему моя директива не отображается в моем приложении AngularJS?

Question

Я только что создал директиву в файле с именем helloWorldz.js файла, который выглядит следующим образом:

'use strict'; 

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

моего app.js файл, который содержит мои маршруты выглядит следующим образом:

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

моего контроллер main.js, который не является сделано так:

'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 сообщает мне, что helloWorldz.js успешно загружен. Ниже

Следует отметить, что, если я помещаю свою директиву код в моем main.js после моего контроллера, и передать в ['components'] в качестве аргумента после mmApp я буду видеть мою директиву код работать. Вот измененный main.js контроллер:

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

app.js Каким образом успешно не вызывая в components модуль, который содержит мою helloWorld директиву? Это возможная проблема с app.js невозможностью подключения к helloWorldz.js?

Следует также упомянуть, что я использую хрюкать, чтобы скомпилировать все.

Answer 1

Похоже, что код директивы немного отличается в автономной версии. Существует:

angular.module('components') 

вместо

angular.module('components',[]) 

Закрепление что (путем добавления аргумента в автономной версии) должны решить эту проблему. Я думаю, что группа людей впали в это, потому что верхний комментарий AngularJS's module page является:

Эта документация должна предупредить, что «angular.module („MyModule“, [])» всегда создает новый модуль, но "angular.module ('myModule')" всегда извлекает существующую ссылку.