Question

我的旧结构是app / controllers，app / services，app / directives等，其中包含控制器目录中的所有控制器等等。

现在我正在尝试利用模块化，但我遇到了麻烦。我应该一个接一个地完成它们，但现在我已经完成了它们而没有测试任何：D

这是我的错误，为每个模块重复同样的事情：

angular.js：68未捕获错误：[$ injector：nomod]模块'app.login'不可用！您要么错误拼写了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

有人可以解释一下我错过了什么/误解/做错了吗？

我目前的结构是：

app 
   login
      login.controller.js
      login.js
      login.html
   signup
      signup.controller.js
      signup.js
      signup.html
   common
      services
         auth.service.js
      filters
      directives
   app.js

......等等。

在app.js中，我有：

(function () {

    'use strict';

    angular
        .module('app', [
            // Third Party Plugins
            'ui.router', 'permission', 'satellizer', 'angular-loading-bar',

            // Auth Modules
            'app.login', 'app.signup', 'app.logout', 'app.passwordForgot', 'app.passwordReset'
        ])

        // rest of code....

})();

在我的所有模块中，我都有类似的结构。这是login.js：

(function() {

    'use strict';

    angular
        .module('app.login')
        .config(['$stateProvider', Config]);

    function Config($stateProvider) {
        $stateProvider
            .state('login', {
                url: '/login',
                data: {
                    permissions: {
                        except: ['isLoggedIn'],
                        redirectTo: 'dashboard.home'
                    }
                },
                templateUrl: 'app/login/login.html',
                controller: 'LoginController as login'
            });
    }

})();

在我的index.blade.php中（使用Laravel作为后端）我有：

<script type="text/javascript" src="{{ asset('bower_components/angular/angular.js') }}"></script>
<script type="text/javascript" src="{{ asset('bower_components/angular-ui-router/release/angular-ui-router.js') }}"></script>
<script type="text/javascript" src="{{ asset('bower_components/satellizer/satellizer.js') }}"></script>
<script type="text/javascript" src="{{ asset('bower_components/angular-permission/dist/angular-permission.js') }}"></script>
<script type="text/javascript" src="{{ asset('bower_components/angular-jwt/dist/angular-jwt.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('bower_components/angular-loading-bar/build/loading-bar.min.js') }}"></script>

<script type="text/javascript" src="{{ asset('app/app.js') }}"></script>

<!-- Common -->
<script type="text/javascript" src="{{ asset('app/common/services/authService.js') }}"></script>

<!-- Login -->
<script type="text/javascript" src="{{ asset('app/login/login.js') }}"></script>
<script type="text/javascript" src="{{ asset('app/login/login.controller.js') }}"></script>

<!-- Signup -->
<script type="text/javascript" src="{{ asset('app/signup/signup.js') }}"></script>
<script type="text/javascript" src="{{ asset('app/signup/signup.controller.js') }}"></script>

<!-- Logout -->
<script type="text/javascript" src="{{ asset('app/logout/logout.js') }}"></script>
<script type="text/javascript" src="{{ asset('app/logout/logout.controller.js') }}"></script>

<!-- Password Forgot -->
<script type="text/javascript" src="{{ asset('app/passwordForgot/passwordForgot.js') }}"></script>
<script type="text/javascript" src="{{ asset('app/passwordForgot/passwordForgot.controller.js') }}"></script>

<!-- Password Reset -->
<script type="text/javascript" src="{{ asset('app/passwordReset/passwordReset.js') }}"></script>
<script type="text/javascript" src="{{ asset('app/passwordReset/passwordReset.controller.js') }}"></script>

Answer 1

您忘记了模块方法调用中的[]（在您尝试获取模块而不是创建模块的情况下）

angular
        .module('app.login', [])
        .config(['$stateProvider', Config]);

AngularJS模块化 - 我的模块无法找到，我做错了什么？

1 个答案: