AngularJS $routeProvider injection fails in directive - angularjs

Question

I am currently trying to get in touch with AngularJS. Since I plan to build a rather complex web application I searched for an alternative to the ngView/$routeProvider combination to be found in the ng docs as I find them quite dissatisfying for a complex application with several navigation levels.
So what I tried is to write a custom directive called ngRoute that could be used like this:
<div ng-route="users">
<div ng-route=":id"></div>
<div ng-route></div><!-- default -->
</div>
What I currently have is the following directive definition:
angular.module('app').directive('ngRoute', function($routeProvider) {
var getRoute = function($el) {
var parts = [];
var $curEl = $el;
while($curEl.length > 0) {
parts.unshift($curEl.attr('ng-route'));
$curEl = $curEl.parent().closest('*[ng-route]');
}
return parts.join('/');
}
var directiveDef = {
link: function(scope, $el, iAttrs, controller) {
var route = getRoute($el);
// Register route observer dependant on calculated route...
}
};
return directiveDef;
});
Unfortunately, I get an error due to the DI of the $routeProvider which I need for the registration of the route observation:
Error: Unknown provider: appProvider <- app <- ngRouteDirective
Did I miss something here? Also, feel free to critisize my approach (maybe someone already found a better solution for my problem).

Answer 1

Yeah, I'm not too clear about the approach but shouldn't the dependancy injection be:
angular.module('app')
.directive('ngRoute',['$routeProvider, function($routeProvider) {
// etc,etc...
};
]);

Answer 2

I ended up using the router of the angular-ui project (http://github.com/angular-ui/ui-router)
I find it to be quite satsifying
Unfortunately, I still have no clue why my DI did not work properly

Answer 3

I just ran into this as well using Angular version 1.2.7 (latest as of posting date).
Jumping over to ui-router is tempting but I thought I would offer a work around (albeit a little hacky) that I have working and is stable.
First set up routes as usual, but add $routeProvider to your application:
app.config(function($routeProvider) {
$routeProvider.
when('/a/route/here', {action:"someAction"}).
otherwise({redirectTo:'index'});
app.routeProvider = $routeProvider;
});
Then in the directive add additional routes as needed using:
app.routeProvider.when(...);
Angular adds the new routes and processes them fine when you navigate to them.