fkkcloud fkkcloud - 2 months ago 10
AngularJS Question

routeProvider is unknown?

I've found similar post but it seems like its a different case, I think for mine, angular module is not binding to html somehow.

Here are my code and error from console.

Please note that I am using gulp to combine all the ng .js file into /app.js

and the order of combining is [module.js , other*.js]
so

angular.module('app', ['ngRoute'])


is always first to be defined.

Error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:unpr] Unknown provider: $routeProvider
http://errors.angularjs.org/1.2.18/$injector/unpr?p0=%24routeProvider
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js:78:12
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js:3741:19
at getService (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js:3869:39)
at Object.invoke (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js:3896:13)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js:3824:37
at Array.forEach (native)
at forEach (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js:320:11)
at loadModules (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js:3811:5)
at createInjector (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js:3751:11)
at doBootstrap (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js:1410:20)


routes.js

app.config(function($routeProvider){
$routeProvider
.when('/', {
controller : 'PostsCtrl',
templateUrl : 'posts.html'
})
.when('/register', {
controller : 'RegisterCtrl',
templateUrl : 'register.html'
})
.when('/login', {
controller: 'LoginCtrl',
templateUrl : 'login.hrml'
})
})


app.html

<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='/app.css'>
</head>
<body ng-app='app'>
<div ng-view></div>
<script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.js'></script>
<script src='/app.js'></script>
</body>
</html>


module.js

angular.module('app', ['ngRoute'])

Answer

If your code is minified then you need to use the array injector. Angular looks at how you named the variable to determine what dependency to pass to your application.

I've also changed how you started your app as I don't see module.js being loaded in the HTML

app.html

<!DOCTYPE html>
<html>
  <head>
    <link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
    <link rel='stylesheet' href='/app.css'>
  </head>
  <body ng-app='app'>
    <div ng-view></div>
    <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.js'></script>
    <script src='/app.js'></script>
  </body>
</html>

app.js

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


app.config(['$routeProvider', function($routeProvider){
    $routeProvider
    .when('/', {
        controller : 'PostsCtrl',
        templateUrl : 'posts.html'
    })
    .when('/register', {
        controller : 'RegisterCtrl',
        templateUrl : 'register.html'
    })
    .when('/login', {
        controller: 'LoginCtrl',
        templateUrl : 'login.hrml'
    })
}]);