Question

我是这两个图书馆的首发。以前我使用ng-view来切换视图，现在我正在使用RequireJS迁移到ui-view。

这是我的代码

的index.html

...

<body ng-cloack ui-router-styles>
    <div class="ui-view"></div>
</body>

<script src="components/JS/moment.js"></script>
<script src="components/JS/moment_locale-id.js"></script>
<script src="components/JS/require.js" data-main="main.js"></script>

...

main.js

require.config({
    waitSeconds: 0,
    baseUrl: '',
    paths: {
        'angular': 'components/JS/angular.min',
        'angularAMD': 'components/JS/angularAMD.min',
        'angular-ui-router': 'components/JS/angular-ui-router.min',
        'angular-ui-router-styles': 'components/JS/angular-ui-router-styles',
        'angular-messages': 'components/JS/angular-messages.min',
        'angular-aria': 'components/JS/angular-aria.min',
        'angular-animate': 'components/JS/angular-animate.min',
        'angular-material': 'components/JS/angular-material.min',
        'angular-locale_id-id': 'components/JS/angular-locale_id-id',
        'angular-moment': 'components/JS/angular-moment.min',
        'moment': 'components/JS/moment'
    },
    shim: {
        'angular': {
            exports: 'angular'
        },
        'angularAMD': ['angular'],
        'angular-ui-router': ['angular'],
        'angular-locale_id-id': ['angular'],
        'angular-ui-router-styles': ['angular-ui-router'],
        'angular-aria': ['angular'],
        'angular-messages': ['angular'],
        'angular-animate': ['angular'],
        'angular-material': ['angular', 'angular-animate', 'angular-aria', 'angular-messages'],
        'angular-moment': ['moment']
    },
    deps: ['app']
});

app.js

define([
        'angularAMD',
        'angular-ui-router',
        'angular-ui-router-styles',
        'angular-material',
        'angular-messages',
        'angular-animate',
        'angular-aria',
        'angular-locale_id-id',
        'angular-moment'
    ],
    function (angularAMD, amMoment) {
        'use strict';
        var app = angular.module('com.malasbelanja.app', ['angularMoment', 'ngMaterial', 'ngMessages', 'ngAnimate', 'ui.router', 'uiRouterStyles']);

        app.config(function ($stateProvider, $urlRouterProvider, $mdThemingProvider, $mdGestureProvider, $sceDelegateProvider, $compileProvider, $mdDateLocaleProvider) {
            $stateProvider
                .state('login', angularAMD.route({
                    url: '/login',
                    templateUrl: 'state/views/login.php',
                    data: {
                        css: ['state/styles/login.css']
                    },
                    /*resolve: {
                        loadController: ['$q',
                            function ($q) {
                                var deferred = $q.defer();
                                require(['state/controllers/login'], function () {
                                    deferred.resolve();
                                });
                                return deferred.promise;
                            }
                        ]
                    },*/
                    controller: 'loginController'
                }))
                .state('register', angularAMD.route({
                    url: '/register',
                    templateUrl: 'state/views/register.php',
                    data: {
                        css: ['state/styles/register.css']
                    }
                }));
            $urlRouterProvider.otherwise("login");

            $mdThemingProvider.theme('default')
                .primaryPalette('green', {
                    'default': '900'
                })
                .accentPalette('blue', {
                    'default': '900'
                });
            $mdThemingProvider.theme('dark')
                .primaryPalette('yellow')
                .dark();
            $mdDateLocaleProvider.formatDate = function (date) {
                return moment(date).format('LL');
            };
            $compileProvider.preAssignBindingsEnabled(true);
            $mdGestureProvider.skipClickHijack();
            $sceDelegateProvider.resourceUrlWhitelist(['**']);
        });

        app.controller('loginController', function($scope){
            $scope.login = function(){
                alert('halo');
            };
        });

        app.run(function (amMoment) {
            amMoment.changeLocale('id');
        });

        angularAMD.bootstrap(app);
        return app;

    });

但该页面空白。这是控制台消息：

require.js:5 GET http://bismillah/loginController.js 403 (Forbidden)
require.js:5 Uncaught Error: Script error for "loginController"
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js:5)
    at HTMLScriptElement.onScriptError (require.js:5)

注意：http://bismillah是我自己在XAMPP上构建的虚拟服务器

我计划稍后使用动态控制器文件，并且已经创建了如何提供它们（在注释块上：app.js）。现在我只想实现我在controller中定义的app.js，但我一直在收到错误。你能解决吗？感谢任何帮助，谢谢。

具有RequireJS投掷脚本错误的UI路由器

0 个答案: