How do I use ngCookies with AngularJS login controller?

Question

I've used generator-angular-fullstack with a freshly made route client/app/login. It contains login.controller.js, login.html, login.js, login.controller.spec.js and login.scss. I've set up a sign-in API endpoint I would like to save "authentication_token" and "user_id" from the JSON it returns to a cookie. Angular-cookies (ngCookies) is installed.

I've tried adapting the documentation examples (https://docs.angularjs.org/api/ngCookies/service/$cookies), but not much luck so far. Console error = '$cookies.put is not a function' (Angular 1.5.6). Also, changing

angular.module('myApp');

to

angular.module('myApp', ['ngCookies']);

or even

angular.module('myApp', ['']);

already makes the login page go blank, except for the header. I don't think it's matter of the module not existing, since trying to load a non-existing module gives a completely blank page (no header either).

Any suggestions?

login.html

<body>
<script src="/bower_components/angular-cookies/angular-cookies.js"></script>    
<form ng-submit="callSignIn(username, password, site)">
Email:
  <input type="text" ng-model="username"><br>
Password:
  <input type="text" ng-model="password"><br>
Site:
  <input type="text" ng-model="site"><br>
  <input type="submit" value= "Submit">
</form>
<section ui-view>Response: {{response}}</section>
</body>

login.controller.js

'use strict';
(function(){

  class LoginComponent {
    constructor($scope, $http, $cookies) {
      $scope.callSignIn = function(username, password, site) {
        $http.post('/api/auth/signin', {
          username: username,
          password: password,
          site: site
        }).success(function(response, $cookies) {
          $scope.response = response;
          $cookies.put('myFavorite', 'oatmeal'); //testvalue
        });
      };

    }
  }

  angular.module('orbitApp') //angular.module('orbitApp', ['ngCookies']) gives blank login page...
    .component('login', {
      templateUrl: 'app/login/login.html',
      controller: LoginComponent
    });

})();

login.js

'use strict';

angular.module('orbitApp')
  .config(function ($stateProvider) {
    $stateProvider
      .state('login', {
        url: '/login',
        template: '<login></login>'
      });
  });

Typical JSON response:

{"http_code":200,"response":{"authentication_token":"a","site_id":"b","content_url":"c","user_id":"d"}}

score 1 · Answer 1 · answered Jun 06 '16 at 11:07

1

Why are you loading angular-cookies.js in login.html and not your index.html.

By the time your module bootstraps, angular-cookies is not available to you making it go blank, you could have a console error too.

answered Jun 06 '16 at 11:07

Thalaivar

23,282
5
60
71

I should have added the console error yes, and probably the Angular version I'm using. Question edited to include those. – KDC Jun 06 '16 at 11:41
http://stackoverflow.com/questions/28971126/angular-and-cookies-cookies-get-is-not-a-function – Thalaivar Jun 06 '16 at 11:45
Yes I read that answer before posting. That's also why I just included the Angular version: 1.5 > 1.4, hence $cookies.put should work. – KDC Jun 06 '16 at 12:20

score 0 · Answer 2 · answered Jun 06 '16 at 14:10

0

Solved by changing

.success(function(response, $cookies) {

to

.success(function(response) {

while keeping everything else the same (incl. angular.module). It works like a charm now.

answered Jun 06 '16 at 14:10

KDC

1,441
5
19
36

How do I use ngCookies with AngularJS login controller?

2 Answers2