How to use cookies? Angular-cookies

Question

I'm new to both Angular and cookies, I have an HTML template that I need to display the first time a user visits my app. However the next time they visit they should no longer see that template and see the default template.

So far I found solutions posted here and here.

However both solutions threw errors, in the 1st link == didn't work, the next example string is not a function

How would this code below work to check to see if there is a cookie, if none then create the cookie.

// Controller for Dashboard
app.controller('DashboardController', ['$scope', '$cookies', '$cookieStore', function ($scope, $cookies, $cookieStore) {

    // if cookie does not exits show welcome template
    //     create cookie
    // if cookie welcome exits show default template


    $scope.welcome = $cookieStore.get('welcome');

    $scope.checkCookie = function(welcome){
        $scope.welcome = welcome;
        $cookieStore.put('cookie', welcome);
    };

    // $cookieStore.put("name","my name");
    // $cookieStore.get("name") = "my name";
    // $cookieStore.remove("name");
}]);

score 2 · Accepted Answer · answered Nov 06 '14 at 21:43

Reading and writing cookies is quite easy with angular and angular-cookies. You first need to inject $cookies dependency in your app and controller.

And then you can assign and retrieve values from $cookie parameter.

The following example will show welcome message for first coming users, and a hello message for others.

angular.module('CookieDemo', ['ngCookies'])
.controller('DashboardController', ['$scope', '$cookies', function ($scope, $cookies) {
    // Retrieve the cookie and set it to userName, in first visit it will be an empty string
  $scope.userName = $cookies.userName || "";

  // Set the cookie for next visit of the user
  $cookies.userName = 'testUser';
}]);

<body ng-app="CookieDemo" ng-controller="DashboardController">
  <h1 ng-show="userName.length > 0">Hello {{userName}}</h1>
  <h1 ng-hide="userName.length > 0">This is your first visit.</h1>
</body>

Here is the plunker.

score 1 · Answer 2 · answered Dec 05 '14 at 08:51

I do not understand why the decision to use it if it is possible to write a module?

define('cookies',function(){

function getCookie(name) {
    var matches = document.cookie.match(new RegExp(
      "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
    ))
    return matches ? decodeURIComponent(matches[1]) : undefined
}


function setCookie(name, value, props) {
    props = props || {}
    var exp = props.expires
    if (typeof exp == "number" && exp) {
        var d = new Date()
        d.setTime(d.getTime() + exp*1000)
        exp = props.expires = d
    }
    if(exp && exp.toUTCString) { props.expires = exp.toUTCString() }

    value = encodeURIComponent(value)
    var updatedCookie = name + "=" + value
    for(var propName in props){
        updatedCookie += "; " + propName
        var propValue = props[propName]
        if(propValue !== true){ updatedCookie += "=" + propValue }
    }
    document.cookie = updatedCookie

}


function deleteCookie(name) {
    setCookie(name, null, { expires: -1 })
}


    return {
        getCookie:getCookie,
        setCookie:setCookie,
        deleteCookie:deleteCookie
        }
})

When using Angular, there is no need to write your own module. Simply use ngCookies as the accepted response did. — sfuqua, Dec 12 '15 at 21:53

How to use cookies? Angular-cookies

2 Answers2