CODEWITHSUNDEEP
angularjsangular-ui-router
n00n
n00n

Reputation: 664

Angular route implementation fails

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

Upvotes: 0

Views: 274

Answers (1)

Maciej Szpyra
Maciej Szpyra

Reputation: 312

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

Upvotes: 1

Related Questions