Issue with $cookies not functioning properly in Angular 1.4.2 version

Having trouble with Angular and injecting $cookies into a controller.

The $cookies work fine in a service, but encountering issues in this specific controller.

var app = angular.module('app', [
    "ui.router",
    "ngCookies",
    'ui.bootstrap']);

angular
    .module("app")
    .controller("ListController", ListController);

ListController.$inject = ['$scope', 'DataService', '$state', "AuthenticationService", "$cookies"];

function ListController($scope, DataService, $state, AuthenticationService, $cookies) {
    ....
}

The $cookies object is showing up as undefined. The angular-cookies.js file is included on the page, and functions correctly within the AuthenticationService that is also included.

javascriptangularjscookiesdependency-injection

Answer №1

After some investigation, I discovered the issue:

A mistake was made when copying and pasting the original controller code into a new controller. The person forgot to update the controller name in the following line:

ListController.$inject =[...];

As a result, when I introduced the $cookies parameter, it was being overwritten by the previous version.

Answer №2

Here is a suggested approach:

let app = angular.module('app', [
    "ui.router",
    "ngCookies",
    'ui.bootstrap']);

angular
    .module("app")
    .controller("ListController",['$scope', 'DataService', '$state', "AuthenticationService", "$cookies", function ($scope, DataService, $state, AuthenticationService, $cookies) {
    ....
}]);

Answer №3

Are you ensuring that angular-cookies[.min].js is included in your file?

Additionally, it's best practice to avoid using the same module for both the app and controllers. Consider creating separate modules as shown below:

angular.module('app', [ 'app.controllers']);

angular.module('app.controllers', [
  \\ list each controller here
]);

This will help maintain a clean separation between your app and controllers.

Answer №4

Do you have access to $scope, DateService, and $state in your controller? Typically, I place this line of code right after declaring the controller.

angular .module("app") .controller("ListController", ListController);

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

Encountering a next-i18next 404 error while attempting to access pages with localeSubpaths configuration enabled

I have encountered a 404 error while trying to access any page of my Next.js application. The application functions properly when the localeSubpaths configuration is not provided. However, upon implementing the localeSubpaths config in next.config.js: co ...

javascriptinternationalizationnext.jsreact-i18nextnext-i18next

Tips for utilizing multiple components in Angular 2

I am a beginner in angular2 and I am attempting to utilize two components on a single page, but I keep encountering a 404 error. Here are my two .ts files: app.ts import {Component, View, bootstrap} from 'angular2/angular2'; import {events} f ...

javascriptasp.net-mvcangular

Exploring AngularJS: Understanding ng-include and how it interacts with scopes

Why is it that I am unable to set the value of $scope.myProperty in the controller ExampleCtrl from an HTML file placed within ng-include? However, when I define $scope.myObj.myProperty and reference it in the HTML as ng-model="myObj.myProp", everything wo ...

angularjsangularjs-directiveangularjs-scope

The issue arises when attempting to make an Ajax request after changing the value of a cascading dropdown

Hey there! I'm currently working on a cascading drop-down feature where, upon change, I need to populate another field with data from the database. Unfortunately, every time I try to populate the drop-down, my AJAX call returns an error 500. I can&ap ...

javascriptjqueryasp.netajax

Chrome is throwing a syntax error with an unexpected token in jQuery replaceWith

jQuery('div#top').replaceWith('<div id="top"> </div>') When I try to replace the entire content of the top div using jQuery, Chrome gives me an error: "Uncaught SyntaxError: Unexpected token" on the first line. I'm no ...

javascriptjqueryhtmlcss

Importing an external JSON file into a ChartJs chart

As a newcomer to using libraries for drawing charts in JavaScript, I recently started playing around with Chartjs. However, I'm having trouble figuring out how to use getJson or any other method to load my json object and update the labels and data. I ...

javascriptjqueryjsonangularjschart.js

Can you tell me about some commonly used GUI widgets in Servlet-JSP?

I am new to working with Servlets, Tomcat, JSP, and I am curious about the common practices for incorporating GUI elements into JSP pages to enhance client-side interactivity. I have experience with jQuery, YUI, extJS, among others, for JavaScript scriptin ...

javajavascriptjspservlets

Press the AngularJS button using just JavaScript and the element

I've been developing a browser extension that automatically clicks buttons on web pages, but I've run into an issue with sites using AngularJS. The code functions properly on most websites except for those built with AngularJS. Below is the snip ...

javascriptjqueryhtmlangularjsclick

What is the process for sending data to a node server using POST and receiving a responseText from it through GET?

Here is an example where I'm trying to send data from a JavaScript client to an Express Node server, validate the data against the database on the server, and respond once the verification process is complete. The data object in newHttpRequest.send(da ...

javascriptajaxnode.jshttpexpress

Is there a way to change the color of a row in react jsx based on a condition from another row?

I am looking to highlight rows in red color based on a specific condition. If the ratio value in a column is greater than or equal to 0.96, I want to apply this styling. However, I'm unsure about where exactly to insert the necessary lines of code to ...

javascriptreactjsfrontendjsx

Understanding TypeScript typing when passing arguments to the Object.defineProperty function

After reviewing all the suggested answers, including: in Typescript, can Object.prototype function return Sub type instance? I still couldn't find a solution, so I'm reaching out with a new question. My goal is to replicate Infix notation in J ...

javascripttypescript

Is there a way to adjust the scrolling speed of a background image to be slower than the rest of

I'm searching for an example similar to this: Are there any efficient javascript solutions available? I've had difficulty implementing the code I've come across so far. ...

javascripthtmlcss

Tips on creating a subsequent post for a file that has been uploaded to a Node Express server and then forwarded to a different API

We are currently working with an Express server in Node, where we upload a file on one route and then need to send this file to another endpoint for processing. However, the file is not stored locally on the server; it exists as an uploaded object. I&apos ...

javascriptnode.jsexpressfile-uploadmulter

What's the best way to align several buttons in the center of the screen horizontally?

I'm struggling to properly align divs with images inside another div. My goal is to insert buttons into my HTML and use jQuery to center them automatically, but I can't seem to get it right. You can view the fiddle I've created here: http:/ ...

javascriptjquerycsshtml

Nested ng-repeat containing single select checkboxes

For more information, please refer to the demo plunkers provided below: Demo Plunker Example1 The code snippet for Example1 is as follows: <tr ng-repeat="class in Classes"> <td>{{class.name}}</td> <td&g ...

angularjsangularjs-scopeangularjs-ng-repeatangularjs-ng-model

Ionic app encounters issue fetching local JSON data

I have been working on my Ionic application and I encountered an issue when trying to load local JSON data into it. I set up a http.get in my javascript to retrieve the data, but for some reason it's not showing up in the application. It seems like th ...

javascripthtmljsonionic-framework

Using dynamic template URLs in resolving with Angular's UI-Router can provide flexibility

Currently, I have implemented a parent directive for an entire view to interchange templates based on the outcome of a promise. .directive('myDirective', function(myService) { var rootDir = '/path/to/templates'; return { ...

javascriptangularjsangular-ui-router

The initial return value of $(document).height may be inaccurate, but is accurate upon recalculation

I am working on implementing a pop-up screen and I would like to darken the background when it opens. Below is the Javascript code: $(document).on('click', '.item', function(){ $("#popUp").css("display" , "block"); ...

javascriptjquery

Unable to display the Error 404 Component within a nested Component using React Router

When attempting to display the Error component if no matches are found, I encountered an issue - selecting a non-existing route only leads to a blank page. In the example, the Main component adds a sidebar menu and renders all its children inside it. If ...

javascriptreactjs

Modify the width of the progress bar in Bootstrap using AngularJS

I'm new to AngularJS and I'm attempting to dynamically update the width of a progress bar based on changes in my controller. Here is what I currently have: <span id="percentage">$ {{getTotal()}} ({{getPercentage()}}%)</span> <div ...

javascripthtmlcssangularjstwitter-bootstrap