CODEWITHSUNDEEP
javascriptangularjs
Stephan Ng
Stephan Ng

Reputation: 311

Angular's ng-view routing not displaying (injector modulerr error)

I seem to be having an issue with Angular routing. My current index.html file is only displaying the header div that is in the index.html file but not the ng-view aspect of the code which should display a new page located at views/login.html.

var app = angular.module('Bandit', ['ngRoute']);

app.config(['$routeProvider', 'locationProvider', function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
	$routeProvider

        //login feedback page
        .when('/feedback', {
            templateUrl: 'views/loginfeedback.html',
            controller: 'loginFeedbackController'
        })


        // home page
        .when('/', {
            templateUrl: 'views/login.html',
            controller: 'loginController'
        })

        //Catch all
        .otherwise({ 
            redirectTo: '/'
        });
    }
]);
<!DOCTYPE html>
<html lang="ENG">



	<head>

		<title>Band-it</title>
  		<meta charset="utf-8">
	  	<meta name="viewport" content="width=device-width, initial-scale=1">

	  	<!--Imported Style-->
	  	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

	  	<!--Custome Stylesheets-->
	  	<link rel="stylesheet" type="text/css" href="css/universal.css">
	  	<link rel="stylesheet" type="text/css" href="css/login.css">

	  	<!--Imported JS Libraries-->
	    <script src="libs/angular/angular.min.js"></script>
	    <script src="libs/angular-route/angular-route.min.js"></script>
	  	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	  	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

		<!--Custom-->
		<script type="text/javascript" src="js/appRoutes.js"></script>
		<script type="text/javascript" src="js/app.js"></script>
		<script type="text/javascript" src="js/controllers/loginController.js"></script>

	</head>




	<body ng-app="Bandit">
		<div class='header'>
			<h1 id='symbol'>B</h1>
		</div>


		<!--Angular Dynamic View-->
		<div ng-view></div>


	</body>
</html>

The error message from the console that I am getting is:

angular.js:38 Uncaught Error: [$injector:modulerr] [http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=Bandit&p1=Error%3A%…Fbandit%2FBanditMask%2Fpublic%2Flibs%2Fangular%2Fangular.min.js%3A39%3A222]1

Any help would be much appreciated!

Upvotes: 1

Views: 111

Answers (1)

htoniv
htoniv

Reputation: 1668

Use $locationProvider instead of using locationProvider in app.config. and not sure please share the link.

Upvotes: 1

Related Questions