为什么此代码显示角度注入错误,有人可以帮助我吗?这是错误,请有人看看这个。它显示ngRoute错误。我一直认真对待这个问题。
angular.js:38 Uncaught Error: to[$injector:modulerr] http://errors.angularjs.org/1.4.12/$injector/modulerr?p0=cbApp&p1=Error%3A%…t%3A63342%2FcbApp%2Fbower_components%2Fangular%2Fangular.min.js%3A19%3A463)
码
var cbApp = angular.module('cbApp', ['ngRoute']);
cbApp.config(function(ngRoute, $httpProvider, $routeProvider) {
$httpProvider.interceptors.push('TokenInterceptor');
$routeProvider
.when('/', {
templateUrl: 'partials/login.html',
controller: 'loginCtrl'
})
.when('/', {
templateUrl: 'partials/dashboard.html',
controller: 'dashboardCtrl'
})
.when('/', {
templateUrl: 'partials/newPreAuth.html',
controller: 'newPreAuthCtrl'
})
.when('/', {
templateUrl: 'partials/submitted.html',
controller: 'submittedCtrl'
})
.otherwise({redirectTo:'/'});
});
cbApp.run(function($rootScope, $window, $location, AuthenticationFactory) {
// when the page refreshes, check if the user is already logged in
userAuthorizationToken.check();
$rootScope.$on("$routeChangeStart", function(event, nextRoute, currentRoute) {
if ((nextRoute.access && nextRoute.access.requiredLogin) && !AuthenticationFactory.isLogged) {
$location.path("/login");
} else {
// check if user object exists else fetch it. This is incase of a page refresh
if (!userAuthorizationToken.user) AuthenticationFactory.user = $window.sessionStorage.user;
if (!userAuthorizationToken.userRole) userAuthorizationToken.userRole = $window.sessionStorage.userRole;
}
});
$rootScope.$on('$routeChangeSuccess', function(event, nextRoute, currentRoute) {
$rootScope.showMenu = userAuthorizationToken.isLogged;
$rootScope.role = userAuthorizationToken.userRole;
// if the user is already logged in, take him to the home page
if (userAuthorizationToken.isLogged == true && $location.path() == '/login') {
$location.path('/');
}
});
});
HTML 的
<!DOCTYPE html>
<html lang="en" ng-app="cbApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, shrink-to-fit=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Claim-Book</title>
<!-- Bootstrap -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/helpers.css" rel="stylesheet">
<link href="assets/css/verticaltab.css" rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-controller="mainController">
<div id="header-wrapper" class="fixed t-0">
<header>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<img src="assets/images/aj.jpg" class="img-responsive">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<img src="assets/images/cblogo.png" class="img-responsive pull-right">
</div>
</div>
</div>
</header>
<nav class="navbar navbar-default">
<div class="navbar-header">
<button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Pre-Authorisation</a></li>
<li><a href="#">Claims</a></li>
<li><a href="#">Reports</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a></li>
<li><a href="#" ng-click="logout()"><span class="glyphicon glyphicon-off" aria-hidden="true"></span></a></li>
</ul>
<p class="navbar-text navbar-right" ng-if="currentUser">Welcome, <span>{{ currentUser.username }}</span></p>
</div>
</nav>
</div>
<div class="container">
<ui-view>
</div>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-ui-router.min.js"></script>
<script src="bower_components/ui-bootstrap-tpls-0.11.2.min.js"></script>
<script src="js/app.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
<script src="js/mainController.js"></script>
<!--SERVICES -->
<script src="js/auth/auth.controller.js"></script>
<script src="js/auth/auth.factory.js"></script>
<script src="js/directives.js"></script>
<script src="js/factory.js"></script>
<script src="js/filters.js"></script>
<footer class="footer">
<div class="container-fluid">
<p class="text-muted text-center">© 2016. Claim-Book. Powered by HealthClaim Technologies Pvt Ltd</p>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/jquery.icheck.js"></script>
<script type="text/javascript">
$(function () {
$("input").iCheck({
checkboxClass: 'icheckbox_square-blue',
increaseArea: '20%' // optional
});
$(".dark input").iCheck({
checkboxClass: 'icheckbox_polaris',
increaseArea: '20%' // optional
});
$(".form-control").focus(function () {
$(this).closest(".textbox-wrap").addClass("focused");
}).blur(function () {
$(this).closest(".textbox-wrap").removeClass("focused");
});
});
</script>
<script>$("#mimodal").on('hidden.bs.modal', function () {
$(this).data('bs.modal', null);
});</script>
<script>
$(document).ready(function() {
$("div.bhoechie-tab-menu>div.list-group>a").click(function(e) {
e.preventDefault();
$(this).siblings('a.active').removeClass("active");
$(this).addClass("active");
var index = $(this).index();
$("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active");
$("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active");
});
});
</script>
</body>
</html>
更新代码
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/ui-bootstrap-tpls-0.11.2.min.js"></script>
<script src="js/app.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
<script src="js/mainController.js"></script>
答案 0 :(得分:0)
从注入的参数中删除ngRoute
,它已被定义为模块依赖项,如果您正在缩小代码,请尝试以下操作:
cbApp.config(['$httpProvider', '$routeProvider', function($httpProvider, $routeProvider)
...
]);