Currently, I am utilizing angularJS-1.2.9 and angular-route-1.2.9 to configure routes for my application. Additionally, I have integrated requireJS as the dependency loader to modularize the code. Despite adding the ngRoute dependency into the AngularJS config, I continue to encounter the following error in the chrome console Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:Error: [$injector:unpr] Unknown provider: $routeProvoider
Let's take a look at my code setup
main.js
require.config({
baseUrl: './js',
paths: {
angular: 'libs/angular-1.2.9',
angularRoute: 'libs/angular-route-1.2.9'
},
shim: {
'angularRoute': {
deps: ['angular'],
exports: 'angularRoute'
},
'angular': {
exports: 'angular'
}
}
});
require(['angular', 'angularRoute'], function (angular, angularRoute) {
'use strict';
var app = angular.module('myApp', ['ngRoute']);
angular.element(document).ready(function () {
angular.bootstrap(document, ['myApp']);
});
app.controller('indexController', function ($scope, $http) {
console.log('inside index');
});
app.config(
function ($routeProvoider) {
$routeProvider.
when('/', {
templateUrl: 'index_content.html',
controller: 'indexController'
})
});
});
Additionally, here are the snippets from my html files
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script data-main="js/main.js" src="js/libs/require.js"></script>
</head>
<body>
<div ng-view>
</div>
</body>
</html>
index_content.html
<p>inside Index content</p>
<h1>testing the ang routes
Would appreciate some insights on what might be causing this issue and any suggestions on how to resolve it.