AngularJS Error: [$injector:unpr] encountered in the application

https://i.sstatic.net/u8QL3.jpg shows the error that I'm encountering.

dicym.js

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

// Routing setup
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" });

});

// Manages 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>

Any suggestions on what might be causing this issue? I am new to angular and have not found much help in the documentation or previous questions.

Answer №1

Ensure dependencies are properly injected into each controller.

1)

app.controller('landingPageController', ['$scope','$http',function ($scope, $http) {
    $scope.welcomeMessage = 'Welcome to our site!';
}]);

and

app.controller('navigationController',['$scope','$location',function ($scope, $location) {
    $scope.isSelected = function (navLocation) {
       return navLocation === $location.path();
    };
}]);

2)

app.controller('landingPageController',landingPageController); 
landingPageController.$inject = ['$scope','$http'];
function landingPageController($scope, $http) {
    $scope.welcomeMessage = 'Welcome to our site!';
}]);

and

app.controller('navigationController',navigationController);
navigationController.$inject = ['$scope','$location'];
function navigationController($scope, $location) {
    $scope.isSelected = function (navLocation) {
       return navLocation === $location.path();
    };
}]);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The lack of definition for the props value poses an issue in React.js Hooks

I'm currently developing a notepad web application that utilizes React Hooks for managing state variables. In order to fetch data from an API, I am using the axios library. The retrieved data consists of objects with fields such as _id, title, status, ...

Utilizing ng-switch for handling null values or empty strings

Can anyone assist me with this issue? I have a variable called $rootScope.user = {name:"abc",password:"asd"}. When a service response occurs, I am dynamically creating a rootscope variable by assigning it. How can I use ng-switch to check if the variable h ...

Split a list using a blank space as the delimiter

Is there a way to achieve the same splitting behavior as string.split('') with ng-list in AngularJS? The split() function breaks everything down into individual characters when using a blank string as the delimiter. For example, 'hello world ...

The argument represented by 'T' does not align with the parameter represented by 'number' and therefore cannot be assigned

I am confused as to why, in my situation, <T> is considered a number but cannot be assigned to a parameter of type number. Changing the type of n to either number or any resolves the issue. Error: https://i.sstatic.net/h1GE9.png Code: const dropF ...

Implementing a function on every object of a class

As part of my practice, I am developing a form validation program using classes to store data related to each field. When the user submits the form, any invalid fields are supposed to be highlighted for correction. The conventional approach would involve a ...

Animate css style using setTimeout: "in the blink of a moment"

I need help creating a bar (#innerBar) that decreases in width by 1% every second. Unfortunately, the loop I implemented is not working as expected. The bar goes from 100% to 0% almost instantaneously. function timer(){ var timer; for(i=100;i&g ...

Having issues setting a property value on a Mongoose result in a Node.js application

Hello there, I am currently working with a MongoDB object retrieved via a findById method, and I need to convert the _id within this object from an ObjectID type to a string. I have developed the following function: student: async (parent, { _id }, ...

Validating a model in Mongoose: Best practices for updating data

I am facing an issue with my model. It seems that while creating, incorrect information is prohibited, but when editing, it is allowed. How can I prevent this from happening? var userSchema = new Schema({ cartaoCidadao: { type: String, require ...

Field where tags are generated by user input

I want to incorporate an input field on my website where users can list their skills. These skills should be displayed individually as separate elements on the front end of the site. The desired format for users to input their skills is as follows: skil ...

Integrating Dialogflow with a Heroku JavaScript application

After extensive research, I delved into the realm of integrating DialogFlow requests with a webhook hosted on platforms like Heroku. With both Heroku and nodeJS impeccably installed on my system, I diligently followed the heroku tutorial to kickstart the p ...

Using Three.js, the loaded mesh's position displays variation compared to a basic geometry mesh

I've been attempting to position a mesh at a specific location, but I'm facing difficulties in achieving the exact placement I desire. While I can successfully position a simple sphere so that its left-most point aligns with the left border of my ...

spontaneous angular rotations in a constantly shifting CSS environment

Is it possible to apply a random CSS rotation to an image just once, rather than having it continuously spin when hovering over a leaflet map? http://jsfiddle.net/J03rgPf/mzwwfav4/3/ I want the random CSS rotation to be set only one time. How can I achie ...

Please ensure that the minus sign is placed only at the beginning of the

My current regex is set up to only allow numbers and a comma in my numeric inputs. Now, I want to include the option of negative numbers as well. To accomplish this, I can modify the regex pattern like so: text.replace(/[^0-9,-]/g, '');. But the ...

Adding style to the first element in an ng-repeat using ng-style in AngularJS

My issue involves applying a specific CSS style to only the first element in a set of styles. I attempted to use a custom directive for this purpose, but it did not achieve the desired result. I would greatly appreciate any assistance! Below is the relev ...

An error of type `TypeError`: attempting to call `[0,1]` as a function arises while using an IIFE

Check out the following code: var numberArray = [0, 1] (function() { numberArray.push(2) function nestedFunction() { numberArray.push(3) function anotherNestedFunction() { numberArray.push(4) } console.log(num ...

Angular: The issue with lazy-loading a decorator and how to solve it

How to Register a Decorator Synchronously angular .module('myApp') .decorator('$controller', MyDecorator); angular .module('myApp') .controller('MyCtrl', MyCtrl); Registering a Decorator Asynchronously $t ...

How can I personalize the navigation buttons and indicators of the "react-owl-carousel" component in my React project with CSS or JavaScript?

I've been working on customizing the navigation arrows and dots for the React Owl Carousel npm package using CSS or JS for quite some time now, but have not been successful. I am determined to avoid using jQuery in this project. https://i.sstatic.net ...

Building an efficient shopping cart feature on a website with asp.net mvc4, incorporating the use of html5 local

After receiving suggestions on my previous question, I delved into further research and began the coding process. The flowchart I am currently following is as follows: I have a products page and a partial view for the Cart. ====> When a user c ...

Discovering every item with a scrollbar

What is the most efficient method to identify all elements with a scroll on a webpage? My current strategy involves utilizing element.all() in conjunction with filter() to compare the values of the height and scrollHeight attributes: element.all(by.xpath ...

What causes the never-ending loop in this React GET request?

Before we begin, take a moment to review the code provided below. const [currentUserPK, setCurrentUserPK] = useState(undefined); const [currentPage, setCurrentPage] = useState(1); const [rowsPerPage, setRowsPerPage] = useState(10); // API ...