Question

我正在使用带有requirejs的angularjs，因为我有多个js文件要配置。我已经成功配置了带角度的require.js，一切正常，但问题是，一旦我登录并打开任何页面，如果我刷新该页面比控制器不会加载到该刷新事件，如果我使用ui调用比它将成功加载。我已附上图像。

刷新前的

页面：

刷新后的

页面：

因为我们可以看到刷新后在页面中找不到控制器文件夹。所以我认为可能存在一些配置问题。

我的Index.html文件如下：

<html lang="en" >

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!-- Meta, title, CSS, favicons, etc. -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Email Tool </title>

        <link href="css/ui-grid/ui-grid.css" rel="stylesheet" type="text/css"/>
        <link href="css/ui-grid/main.css" rel="stylesheet" type="text/css"/>
        <link rel="stylesheet" type="text/css" href="input_tags/jquery.tagsinput.css" />
        <link rel="stylesheet" type="text/css" href="input_tags/jquery-ui.css" />
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="fonts/css/font-awesome.min.css" rel="stylesheet">
        <link href="css/animate.min.css" rel="stylesheet">
        <link href="css/custom.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/maps/jquery-jvectormap-2.0.1.css" />
        <link href="css/icheck/flat/green.css" rel="stylesheet" />
        <link href="css/floatexamples.css" rel="stylesheet" type="text/css" />
        <link href="css/editor/external/google-code-prettify/prettify.css" rel="stylesheet">
        <link href="css/editor/index.css" rel="stylesheet">
        <link href="css/input_tags/jquery.tagsinput.min.css" rel="stylesheet" />   
        <link rel="stylesheet" href="css/switchery/switchery.min.css" />
        <link href="css/toaster/toaster.css" rel="stylesheet" type="text/css"/>
        <link href="css/ng-token/ng-token.css" rel="stylesheet" type="text/css"/>
        <link href="css/select2/select.css" rel="stylesheet" type="text/css"/>
        <link href="css/select2/select2.css" rel="stylesheet" type="text/css"/>
        <link href="css/select2/selectize.default.css" rel="stylesheet" type="text/css"/>
        <link href="css/block-ui/angular-block-ui.min.css" rel="stylesheet" type="text/css"/>
        <link href="css/textAngular/textAngular.css" rel="stylesheet" type="text/css"/>
        <link href="css/textAngular/colorpicker.css" rel="stylesheet" type="text/css"/>
        <link href="css/alertify/alertify.css" rel="stylesheet" type="text/css"/>

    </head>
    <body class="nav-md">

    <div ui-view></div>

    <script src="scripts/require.js" data-main="scripts/main" ></script> 

</body>

</html>

我的main.js如下：

require.config({
    baseUrl: 'scripts',

    paths: {
        'jquery': 'third-party/jquery-2.0.3',
        'angular': 'lib/angular/angular',
        'angular-route': 'lib/angular/angular-route' ,
        'angular-resource': 'lib/angular/angular-resource',
        'angular-touch': 'lib/angular/angular-touch',
        'angular-animate': 'lib/angular/angular-animate',
        'angular-sanitize': 'lib/angular/angular-sanitize',
        'angular-ui-router': 'lib/angular/angular-ui-router.min',
        'angular-cookies': 'lib/angular/angular-cookies',

        'ui-app': 'Mainapp' ,
        'angularAMD': 'angularAMD',

        'config': 'config',
        'ng-tags-input':'third-party/ng-tags-input',
        'csv': 'third-party/csv',
        'pdfmake': 'third-party/pdfmake',
        'vfs_fonts': 'third-party/vfs_fonts',
        'ui-grid':'third-party/ui-grid',
        'bootstrap': 'third-party/bootstrap.min',
        'jquery-nicescroll': 'third-party/jquery.nicescroll.min',
        'toaster' : 'third-party/toaster',
        'alertify' : 'third-party/alertify',
        'ngAlertify' : 'third-party/ngAlertify',
        'select':'third-party/select',
        'angular-block-ui': 'third-party/angular-block-ui.min',
        'showdown': 'third-party/showdown.min',
        'textAngular-rangy': 'third-party/textAngular-rangy.min',
        'textAngular-sanitize': 'third-party/textAngular-sanitize.min',
        'bootstrap-colorpicker-module': 'third-party/bootstrap-colorpicker-module',
        'textAngular': 'third-party/textAngular.min',
        'custom': 'third-party/custom',
        'jquery-ui': 'third-party/jquery-ui.min',

        'composeMailService':'services/composeMailService',
        'groupMasterService':'services/groupMasterService',
        'loginMasterService':'services/loginMasterService',
        'passValueBetweenController':'services/passValueBetweenController',
        'senderMasterService':'services/senderMasterService',
        'templateMasterService':'services/templateMasterService',
        'userService':'services/userService',        
        'directive':'directives/directives'
    },

    shim: {
        'ui-app': ['angular'],  
        'angular':['jquery'],       
        'angularAMD': ['angular'],
        'angular-ui-router': ['angular'],
        'angular-cookies': ['angular'],
        'angular-route': ['angular'],
        'angular-resource':['angular'],
        'angular-touch': ['angular'],
        'angular-animate': ['angular'],
        'angular-sanitize': ['angular'],
        'ng-tags-input':['angular'],
        'ui-grid':['angular'],
        'toaster' : ['angular'],
        'select':['angular'],
        'alertify':['angular'],
        'ngAlertify':['angular'],
        'angular-block-ui':['angular'],
        'textAngular-sanitize':['angular'],
        'textAngular':['angular'],
        'bootstrap-colorpicker-module':['angular'],
        'userService': ['angular'],
        'custom':['jquery','jquery-ui','bootstrap','jquery-nicescroll'],
        'passValueBetweenController':['angular'],
        'jquery-nicescroll':['jquery'],
        'bootstrap': ['jquery'],
        'jquery-ui':['jquery']
    },

    deps: ['jquery','ui-app','userService','custom']
});

MainApp.js如下：

define(['angularAMD','angular-route', 'angular-resource', 'angular-touch', 'angular-animate', 'angular-sanitize', 'angular-ui-router', 'angular-cookies', 'config', 'ng-tags-input', 'csv', 'pdfmake', 'vfs_fonts', 'ui-grid' 

,'bootstrap', 'jquery-nicescroll', 'toaster','alertify','ngAlertify','select', 'angular-block-ui', 'showdown', 'textAngular-rangy', 'textAngular-sanitize', 'bootstrap-colorpicker-module', 'textAngular'], function (angularAMD) 

{
    var app = angular.module("app", [ 'ngRoute','ngCookies', 'ngResource', 'service', 'ui.router', 'ngAnimate', 'toaster', 'ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.exporter', 'ui.grid.resizeColumns', 'ngAlertify', 

'ngTagsInput', 'ngSanitize', 'ui.select', 'blockUI', 'colorpicker.module', 'textAngular']);

    app.config(['$stateProvider', '$urlRouterProvider',  '$httpProvider', function ($stateProvider, $urlRouterProvider, $httpProvider) {

            $urlRouterProvider.otherwise("/login");

            $stateProvider
                    .state('login', angularAMD.route({
                        url: '/login',
                        templateUrl: 'partials/login.html',
                        controller: 'LoginCtrl',
                        controllerUrl:'controllers/loginController'
                    }))
                    .state('register', angularAMD.route({
                        url: '/register',
                        templateUrl: 'partials/register.html'
                    }))
                    .state('main', angularAMD.route({
                        url: '/main',
                        templateUrl: 'partials/main.html'
                    }))
                    .state('main.dashboard', angularAMD.route({
                        url: '/dashboard',
                        templateUrl: 'partials/dashboard.html',
                        controller: 'DashboardCtrl',
                        controllerUrl:'controllers/dashboardController'
                    }))
                    .state('main.createGroup', angularAMD.route({
                        url: '/createGroup',
                        templateUrl: 'partials/createGroup.html',
                        controller: 'createGroupCtrl',
                        controllerUrl:'controllers/groupController'
                    }))
                    .state('main.groupDetails', angularAMD.route({
                        url: '/groupDetails',
                        templateUrl: 'partials/groupDetails.html',
                        controller: 'groupDetailsCtrl',
                        controllerUrl:'controllers/groupController'
                    }));


            }
            );

           }
            );
        }]);

和控制器样本是：

define(['ui-app', 'composeMailService','groupMasterService'], function (app) {

    app.register.controller('DashboardCtrl', ['$rootScope', '$scope', 'ComposeMail', 'GroupMasterService', function ($rootScope, $scope, ComposeMail, GroupMasterService) {

            $scope.username = $rootScope.user.name;

            ComposeMail.noofemailsent(function (res) {
                $scope.totalemailsent = res.emailsent;
            },
                    function () {
                        alert('fail while retriving to emails sent');
                    });

            GroupMasterService.noofgroupcreated(function (res) {
                $scope.totalgroupcreated = res.noofgroupcreated;
            },
                    function () {
                        alert('fail while retriving to no of group sent');
                    });

        }]);

});

Answer 1

在head标签内添加您的require.js链接，如下所示：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Email Tool </title>

    <link href="css/ui-grid/ui-grid.css" rel="stylesheet" type="text/css"/>
    <link href="css/ui-grid/main.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="input_tags/jquery.tagsinput.css" />
    <link rel="stylesheet" type="text/css" href="input_tags/jquery-ui.css" />
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="fonts/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/maps/jquery-jvectormap-2.0.1.css" />
    <link href="css/icheck/flat/green.css" rel="stylesheet" />
    <link href="css/floatexamples.css" rel="stylesheet" type="text/css" />
    <link href="css/editor/external/google-code-prettify/prettify.css" rel="stylesheet">
    <link href="css/editor/index.css" rel="stylesheet">
    <link href="css/input_tags/jquery.tagsinput.min.css" rel="stylesheet" />   
    <link rel="stylesheet" href="css/switchery/switchery.min.css" />
    <link href="css/toaster/toaster.css" rel="stylesheet" type="text/css"/>
    <link href="css/ng-token/ng-token.css" rel="stylesheet" type="text/css"/>
    <link href="css/select2/select.css" rel="stylesheet" type="text/css"/>
    <link href="css/select2/select2.css" rel="stylesheet" type="text/css"/>
    <link href="css/select2/selectize.default.css" rel="stylesheet" type="text/css"/>
    <link href="css/block-ui/angular-block-ui.min.css" rel="stylesheet" type="text/css"/>
    <link href="css/textAngular/textAngular.css" rel="stylesheet" type="text/css"/>
    <link href="css/textAngular/colorpicker.css" rel="stylesheet" type="text/css"/>
    <link href="css/alertify/alertify.css" rel="stylesheet" type="text/css"/>
    <script src="scripts/require.js" data-main="scripts/main" ></script> 
</head>
<body class="nav-md">

<div ui-view></div>
</body>

</html>

angularjs控制器加载问题与requirejs

1 个答案: