How to use $ngCookies in angularjs

Question

I've a trouble in cookies. When I use ngCookies in my project, there's something wrong in my div (alert). enter image description here

And here's my app.js

angular.module('postLogin', [ngCookies])
.controller('PostController', ['$scope', '$http', function($scope, $http) {        
        this.postForm = function() {
            var encodedString = 'username=' +
                encodeURIComponent(this.inputData.username) +
                '&password=' +
                encodeURIComponent(this.inputData.password);

            $http({
                method: 'POST',
                url: 'userauth.php',
                data: encodedString,
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            })

            .success(function(data) {
                    //console.log(data);
                    if ( data.trim() === 'correct') {
                        window.location.href = 'success.html';
                    } else {
                        $scope.errorMsg = "Username and password do not match.";
                    }
            })            
        }
}]);

And here's my index.html

    <!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8"/>
      <meta name="robots" content="noindex"/>
      <title>angulrjs login page</title>
      <meta name="viewport" content="width=device-width, initial-scale=1"/>
      <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"/>
      <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" id="main-css"/>
      <link href="css/style.css" rel="stylesheet" id="main-css"/>
      <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
      <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>  
      <script src="angular.min.js"></script>
   </head>
   <body ng-app="postLogin" ng-controller="PostController as postCtrl">
      <div class="container">
         <div id="loginbox" class="mainbox col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3">
            <div class="row">
               <img src="images/logo.jpg" class="imglogo"/>
            </div>
            <div class="panel panel-default" >
               <div class="panel-heading">
                  <div class="panel-title text-center">Login using username & password</div>
               </div>
               <div class="panel-body" >
                  <form name="login" ng-submit="postCtrl.postForm()" class="form-horizontal" method="POST">
                     <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                        <input type="text" id="inputUsername" class="form-control" required autofocus ng-model="postCtrl.inputData.username"/>
                     </div>
                     <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                        <input type="password" id="inputPassword" class="form-control" required ng-model="postCtrl.inputData.password"/>
                     </div>
                     <div class="alert alert-danger" ng-show="errorMsg">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                        ×</button>
                        <span class="glyphicon glyphicon-hand-right"></span>&nbsp;&nbsp;{{errorMsg}}
                     </div>
                     <div class="form-group">
                        <div class="col-sm-12 controls">
                           <button type="submit" class="btn btn-primary pull-right" ng-disabled="login.$invalid">
                           <i class="glyphicon glyphicon-log-in"></i> Log in</button>
                        </div>
                     </div>
                  </form>
               </div>
            </div>
         </div>
      </div>
      <script src="app.js"></script>
   </body>
</html>

When I didn't use ngCookies

angular.module('postLogin', [])

It could be run as normally. Please help me, I really want it to throwing username in my login form to next page. I can't use $cookies like session in php. Thanks.

score 0 · Accepted Answer · answered Jan 20 '17 at 13:37

0

In your module setter (angular.module...) when you inject dependent modules they must be in quotes. In your example there are no quotes surrounding ngCookies. Also, your index.html doesn't appear to reference the angular-cookies.js file which is not part of the base angular.js file.

Check development tools for specific error(F12).

answered Jan 20 '17 at 13:37

Die Hard Cubbie

76
5

Sorry, It was wrong. I mean when I used in module setter ['ngCookies'], couldn't run as normally. If I use ['ngCookies'], there was an error in [$injector:modulerr] when I checked in F12 part of console (point JS). Otherwise use ['ngCookies'], that error disappeared in console (point JS). I think, I should have file of .js like angular-min.js for ngCookies. Maybe ? Am I wrong ? – Dika Andharu Jan 21 '17 at 02:18
Thanks for your help, I know how to solve it. I just need those parts of .js (angular-cookies.min.js and angular.min.js). My references are http://www.tutorialsavvy.com/2014/11/angularjs-cookie-example.html/ and http://stackoverflow.com/questions/10961963/how-to-access-cookies-in-angularjs. This is the first time for using javascript cause I'm beginner. Sorry for my stupid question. :( – Dika Andharu Jan 21 '17 at 02:52

How to use $ngCookies in angularjs

1 Answers1