Error: [$injector:unpr] Unknown provider: $scope in angular Js when routing

Question

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


myWebsite.config(['$scope', '$routeProvider', function($routeProvider) {
    $routeProvider
    .when("/home", {
        templateUrl : "index.html",
    })
    .when("/about", {
        templateUrl : "views/about-view.html",
    })
    .otherwise({
        redirectTo : "/home"
    });
}]);

myWebsite.controller('myWebsiteCtrl', ['$scope', function($scope){
    console.log("angular is initialised");
}]);

myWebsite.controller('aboutCtrl', ['$scope', function($scope){
    console.log("about controller is initialised");
}]);

This code is giving error Error: [$injector:unpr] Unknown provider: $scope. i am using these lines at header

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.js">`enter code here`</script>

<script src="https://code.angularjs.org/1.6.3/angular-route.js"></script>

Answer 1

$scope isn't injectable inside config block. You can avail $scope dependency injected on controller only. Technically it is not(never) possible to inject $scope in config phase, as config block will allow to inject providers only. additionally config phase happens at time of application bootstrap(specifically before run phase).

myWebsite.config(['$routeProvider', function($routeProvider) {

Note: Make sure you have angular-route.js referenced on page