I started to remodel my AngularJS (fully working) page to modular version.
I grouped my files to 4 modules:
-band
-user
-layout
-core
And main app.js with:
(function () {
angular.module('zt', [
// shared modules
'zt.core',
'zt.user',
'zt.band',
'zt.layout'
// other modules will be lazy-loaded from router
]);
})();
Each module has it own controllers, services etc. and own module config file:
(function() {
'use strict';
angular.module('zt.user', []);
})();
And own route file:
(function () {
'use strict';
angular.module('zt.user')
.config(function ($stateProvider, $urlRouterProvider, $locationProvider, AccessLevels) {
$stateProvider
.state('app.user', {
abstract: true,
template: '<ui-view/>',
data: {
access: AccessLevels.user
}
})
AccessLevels
is inside zt.core module and it is simple constant:
(function() {
"use strict";
angular.module('zt.core')
.constant('AccessLevels', {
anon: 0,
user: 1,
mode: 2,
admn: 3,
suad: 4
})
...
When I try to load page I've got an error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module zt due to: Error: [$injector:modulerr] Failed to instantiate module zt.user due to: Error: [$injector:unpr] Unknown provider: AccessLevels
All files are included ok
(also the same error in zt.band module) All typing and including are ok.
When I add AccessLevels manual to zt.band and zt.user route configs another strange errors appears:
Error: [$injector:unpr] Unknown provider: ztPlayerProvider <- ztPlayer <- soundManagerDirective
and:
Error: [$injector:unpr] Unknown provider: AuthServiceProvider <- AuthService <- ApplicationControler
ztPlayer is service in the same module zt.layout with soundManagerDirective !
and AuthService is inside shared zt.core module so it should be availiable inside ApplicationController inside zt.layouts module.
My include paths near end of the body tag:
<script src="/dist/js/core/core.module.js"></script>
<script src="/dist/js/core/core.routes.js"></script>
<script src="/dist/js/core/config.js"></script>
<script src="/dist/js/core/config.lazyload.js"></script>
<script src="/dist/js/core/services/auth.services.js"></script>
<script src="/dist/js/core/services/storage.services.js"></script>
<script src="/dist/js/core/services/ui-load.js"></script>
<script src="/dist/js/core/controllers/auth.controller.js"></script>
<script src="/dist/js/core/controllers/scroll.controller.js"></script>
<script src="/dist/js/core/directives/auth.directives.js"></script>
<script src="/dist/js/core/directives/main.directives.js"></script>
<script src="/dist/js/core/directives/ui.directives.js"></script>
<script src="/dist/js/core/directives/upload.directives.js"></script>
<!-- /core module -->
<!-- widget module -->
<script src="/dist/js/widget/widget.module.js"></script>
<!-- /widget module -->
<!-- user module -->
<script src="/dist/js/user/user.module.js"></script>
<script src="/dist/js/user/user.routes.js"></script>
<script src="/dist/js/user/services/user.services.js"></script>
<script src="/dist/js/user/controllers/dashboard.controller.js"></script>
<script src="/dist/js/user/controllers/profile.controller.js"></script>
<!-- /user module -->
<!-- band module -->
<script src="/dist/js/band/band.module.js"></script>
<script src="/dist/js/band/band.routes.js"></script>
<script src="/dist/js/band/controllers/band.controller.js"></script>
<script src="/dist/js/band/controllers/track.controller.js"></script>
<script src="/dist/js/band/services/band.services.js"></script>
<script src="/dist/js/band/services/song.services.js"></script>
<script src="/dist/js/band/services/track.services.js"></script>
<!-- /band module -->
<!-- layout module -->
<script src="/dist/js/layout/layout.module.js"></script>
<script src="/dist/js/layout/services/player.services.js"></script>
<script src="/dist/js/layout/controllers/application.controller.js"></script>
<script src="/dist/js/layout/controllers/header.controller.js"></script>
<script src="/dist/js/layout/controllers/message.controller.js"></script>
<script src="/dist/js/layout/directives/player.directives.js"></script>
<script src="/dist/js/layout/directives/setnganimate.directives.js"></script>
<!-- /layout module -->
<!-- other -->
<script src="/dist/js/translate/translate.js"></script>
<script src="/dist/js/filters/fromNow.js"></script>
I've tried a lot of things but nothing worked! I can't figure what is the problem of this.
Thanks!
app.js
file at the end after loading all the modules..Rule of thumb before using module.it should initialize at-least