Angular route implementation fails

Question

trying to learn angluar route constructs but I fail on implementing ngRoute

The Definition of my app

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

The configuration

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.otherwise({redirectTo: '/'});
}]);

My directive to use the router

app.directive("applicationDirective", function($router) {

    return {
        restrict : "E",
        templateUrl: 'app/templates/application.html',
        controller: 'applicationController'
    };

});

And my implemention in HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-messages.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.js"></script>

        <script src="app/app.js"></script>

Seems to be OK; but Fails... With:

angular.js:14525 Error: [$injector:unpr] Unknown provider: $routerProvider <- $router <- applicationDirectiveDirective
http://errors.angularjs.org/1.6.4/$injector/unpr?p0=%24routerProvider%20%3C-%20%24router%20%3C-%20applicationDirectiveDirective
    at angular.js:66
    at angular.js:4789
    at Object.getService [as get] (angular.js:4944)
    at angular.js:4794
    at getService (angular.js:4944)
    at injectionArgs (angular.js:4969)
    at Object.invoke (angular.js:4995)
    at angular.js:8110
    at forEach (angular.js:403)
    at Object.<anonymous> (angular.js:8108)

Has anybody got a hint how to solve it.

regards n00n

Maciej Szpyra · Accepted Answer · 2017-04-25 10:53:10Z

1

You need to set routing in your config function. This directive is not needed and it doesn't work like this. Check this out: https://www.w3schools.com/angular/angular_routing.asp

answered Apr 25, 2017 at 10:53

Maciej Szpyra

3121 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user7912069 Over a year ago

declare ng-app and directive in html body

n00n Over a year ago

In your example each route has its own html template? I would like to switch between several templates within the body....

n00n Over a year ago

Why should I declare "ng-app" in the body?

Maciej Szpyra Over a year ago

Yes. Each route has it's own template. You can use ui-router if you want to have nested views. docs.angularjs.org/api/ng/directive/ngApp setting ng-app bootstraps yours angular application.

Collectives™ on Stack Overflow

Angular route implementation fails

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related