angular js Error: [$injector:unpr]

Question

https://i.sstatic.net/u8QL3.jpg is a picture of my error.

dicym.js

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

// setup the routing
app.config(function ($routeProvider) {

    $routeProvider
    .when('/home', {
        templateUrl: 'views/home.html',
        controller: 'homeController',
        title: 'Home'
    })
    .when('/projects', {
        templateUrl: 'views/projects.html',
        controller: 'homeController',
        title: 'Projects'
    })
    .when('/singleProject', {
        templateUrl: 'views/singleProject.html',
        controller: 'homeController',
        title: 'Project Details'
    });

    $routeProvider.otherwise({ redirectTo: "/home" });

});

// Controls the rootscope
app.run(function ($rootScope, $route) {
    $rootScope.$on("$routeChangeSuccess", function (currentRoute, previousRoute) {
        //Change page title, based on Route information
        $rootScope.title = $route.current.title;
    });
});

homeController.js

app.controller('homeController', function ($scope, $http) {
    $scope.message = 'Everyone come and look!';
});

sidebarController.js

app.controller('sidebarController', function ($scope, $location) {
    $scope.isActive = function (viewLocation) {
        return viewLocation === $location.path();
    };
});

index.html

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js" type="text/javascript"></script>
<script src="https://code.angularjs.org/1.4.5/angular-route.js" type="text/javascript"></script>
<script src="js/diycm.js"></script>
<script src="js/angular-local-storage.min.js"></script>
<script src="js/controllers/sidebarController.js"></script>
<script src="js/controllers/homeController.js"></script>

Does anyone have any idea what could be causing this error? New to angular and the documentation / past questions haven't been much help.

You are not injecting the dependencies in your controller. You should inject the dependencies and then run the code again. — Abdul Mannan - Data Engineer
– Abdul Mannan - Data Engineer, Commented Mar 27, 2016 at 6:21

Abdul Mannan - Data Engineer · Accepted Answer · 2016-03-31 10:26:56Z

2

Inject dependencies for each controller.

1)

app.controller('homeController', ['$scope','$http',function ($scope, $http) {
    $scope.message = 'Everyone come and look!';
}]);

and

app.controller('sidebarController',['$scope','$location',function ($scope, $location) {
    $scope.isActive = function (viewLocation) {
       return viewLocation === $location.path();
    };
}]);

2)

app.controller('homeController',homeController); 
homeController.$inject = ['$scope','$http'];
function homeController($scope, $http) {
    $scope.message = 'Everyone come and look!';
}]);

and

app.controller('sidebarController',sidebarController);
sidebarController.$inject = ['$scope','$location'];
function sidebarController($scope, $location) {
    $scope.isActive = function (viewLocation) {
       return viewLocation === $location.path();
    };
}]);

edited Mar 31, 2016 at 10:26

answered Mar 27, 2016 at 6:23

Abdul Mannan - Data Engineer

1,11212 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

angular js Error: [$injector:unpr]

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related