Javascript angularjs控制器加载问题与requirejs
我将angularjs与requirejs一起使用，因为我要配置多个js文件。 我已经用angular成功地配置了require.js，一切正常，但问题是，一旦我登录并打开任何页面，如果我刷新该页面，控制器将不会在该刷新事件中加载，如果我使用ui调用，则它将成功加载。我在此处附加了带有的图像 刷新前的页面： 刷新后的页面： 我们可以看到刷新后在页面中找不到控制器文件夹。所以我认为可能存在一些配置问题 我的Index.html文件如下所示：Javascript angularjs控制器加载问题与requirejs,javascript,angularjs,requirejs,Javascript,Angularjs,Requirejs,我将angularjs与requirejs一起使用，因为我要配置多个js文件。 我已经用angular成功地配置了require.js，一切正常，但问题是，一旦我登录并打开任何页面，如果我刷新该页面，控制器将不会在该刷新事件中加载，如果我使用ui调用，则它将成功加载。我在此处附加了带有的图像 刷新前的页面： 刷新后的页面： 我们可以看到刷新后在页面中找不到控制器文件夹。所以我认为可能存在一些配置问题 我的Index.html文件如下所示： <html lang="en" >
<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>
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']
});
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'
}));
}
);
}
);
}]);
<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>
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']
});
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');
});
}]);
});
在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>
电子邮件工具