Angularjs Error: [$injector:unpr] Unknown Provider:

Asked

Viewed 3,463 times

2

I have the following error for dependency injection in my controller:

Error: [$injector:unpr] Unknown Provider: $routeProviderProvider <- $routeProvider

I’ve imported the angular-route in my HTML: 

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

Already imported in the module:

var module = angular.module('MainModule', ['ui.filters', 'ngRoute']);

I’ve imported into the controller:

module.controller('MainCtrl', ['$scope', '$routeProvider',
function($scope, $routeProvider) {

Could someone help me solve this problem?

Code:

var module = angular.module('MainModule', ['ui.filters', 'ngRoute']);

module.controller('MainCtrl', ['$scope', '$routeProvider',
 function($scope, $routeProvider) {
	
	$routeProvider.when("/", {
        templateUrl : "consult.htm"
    })
    .when("/consult", {
        templateUrl : "consult.htm"
    })
    .when("/register", {
        templateUrl : "register.htm"
    });
	
}]);
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">			
<html>
		<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
		<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
		<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
		
	    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet">
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
		
		<script src="controller/controllerConsult.js"></script>
		<script src="controller/controllerMain.js"></script>
		<script src="provider/streaMusicProvider.js"></script>
		
		<link rel="stylesheet" href="css/main.css">

		<head>
			<title>StreaMusic</title>
		</head>
		<body>
					
			<div class="tabbable" ng-app="MainModule">
				<ul class="nav nav-tabs padding-12 tab-color-blue background-blue" id="myTab">
					<li class="active"><a data-toggle="tab" href="#consult">Consult</a></li>
		
					<li><a data-toggle="tab" href="#register">Register</a></li>
				</ul>
		
				<div class="tab-content"  ng-controller="MainCtrl">
<!-- 					<div id="consult" class="tab-pane in active" ng-include="'consult.html'"  ng-controller="ConsultCtrl"> -->
<!-- 					</div> -->

					<div id="consult" class="tab-pane in active">
					
						<label class="textFilter">Filter by Category:
							<select ng-model="search.category">
								<option value="">Select</option>
								<option ng-repeat="x in musicList | unique:'category'">{{x.category}}</option>
							</select>
						</label>

						<label class="textFilter">Filter by Artist:
							<select ng-model="search.artist">
								<option value="">Select</option>
								<option ng-repeat="x in musicList | unique:'artist'">{{x.artist}}</option>
							</select>
						</label>
					
						<table id="music-table">
			
							<tr>
						       <th>ARTIST</th>
						       <th>MUSIC NAME</th>
						       <th>ALBUM</th>
						       <th>CATEGORY</th>
						    </tr>
			
							<tr ng-repeat="x in musicList | filter:{'artist':  search.artist} | 
							filter:{'category':  search.category} | limitTo:10">
						        <td>{{x.artist}}</td>
						        <td>{{x.music}}</td>
						        <td>{{x.album}}</td>
						        <td>{{x.category}}</td>
						    </tr>
						</table>
					</div>
		
					<div id="register" class="tab-pane">
						<p>TAB REGISTER</p>
					</div>
				</div>
			</div>
		</body>
</html>

angularjs

1 answer

2

A provider is only available in the configuration cycle:

var module = angular.module('MainModule', ['ui.filters', 'ngRoute']);

module.config(function($routeProvider) { // Ciclo de configuração
    $routeProvider.when("/", {
        templateUrl : "consult.htm"
    });
});

To use during the execution cycle, use the service directly:

//Utilize $route, não $routeProvider
module.controller('MainCtrl', function($scope, $route) { 
    $scope.route = $route;
});

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.