我开始将我的AngularJS(完全正常工作)页面重新编译为模块化版本。
我将文件分组为4个模块:
-band
-user
-layout
-core
主app.js:
(function () {
angular.module('zt', [
// shared modules
'zt.core',
'zt.user',
'zt.band',
'zt.layout'
// other modules will be lazy-loaded from router
]);
})();
每个模块都有自己的控制器,服务等和自己的模块配置文件:
(function() {
'use strict';
angular.module('zt.user', []);
})();
自己的路线档案:
(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
位于 zt.core 模块内,它很简单常量:
(function() {
"use strict";
angular.module('zt.core')
.constant('AccessLevels', {
anon: 0,
user: 1,
mode: 2,
admn: 3,
suad: 4
})
...
当我尝试加载页面时,我遇到了错误:
未捕获错误:[$ injector:modulerr]无法实例化模块zt 由于:错误:[$ injector:modulerr]无法实例化模块 zt.user 由于:错误:[$ injector:unpr]未知提供商:访问级别
所有文件都包含在内
(zt.band模块中的错误也一样) 所有打字和包括都可以。
当我向zt.band和zt.user路由配置添加AccessLevels手册时,会出现另一个奇怪的错误:
错误:[$ injector:unpr]未知提供者:ztPlayerProvider&lt; - ztPlayer &lt; - soundManagerDirective
和
错误:[$ injector:unpr]未知提供者:AuthServiceProvider&lt; - AuthService&lt; - ApplicationControler
ztPlayer 是使用soundManagerDirective 在同一模块zt.layout中服务!
和 AuthService 位于共享的 zt.core 模块中,因此应该可以在 zt.layouts 模块内的ApplicationController中使用。
我在身体标记末尾附近的包含路径:
<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>
我尝试过很多东西,但没有任何效果!我无法弄清楚这是什么问题。
谢谢!