Javascript 如何将$cookies注入AngularJS服务？

我阅读了

$cookies

的文档，它建议使用以下语法注入

$cookies

：

angular.module('cookiesExample', ['ngCookies'])
   .controller('ExampleController', ['$cookies', function($cookies) {

angular.module('auth', ['ngCookies'])
   .factory( 'auth', function($rootScope, $http, $location, $cookies) {  

因此，我尝试使用以下语法将

$cookies

注入服务（注意

工厂

而不是下面的

控制器

：

angular.module('auth', ['ngCookies'])
     .factory( 'auth', '$cookies',  function($rootScope, $http, $location, $cookies) {  

但结果是FireFox中出现了一个模糊的编译错误，使应用程序无法编译。该错误在

angular-bootstrap.js

中有数万个字符，并且无法访问，因为

angular-bootstrap.js

被压缩为大约20行，每行10000多个字符。因为

angular-bootstrap.js尚未修改，我假设错误出现在我的应用程序代码中，上面显示了唯一一行更改的代码

然后，我通过尝试以下语法注入
$cookies
，解决了编译错误：

angular.module('cookiesExample', ['ngCookies'])
   .controller('ExampleController', ['$cookies', function($cookies) {

angular.module('auth', ['ngCookies'])
   .factory( 'auth', function($rootScope, $http, $location, $cookies) {  

结果是FireFox给出了一个不同的编译错误，指出
$cookies.get
不是一个函数，在以下代码行触发：

authenticated1 : $cookies.get('AUTH1'),

对我来说，这表明$cookies没有正确插入

最后，我在
angular bootstrap.js
中进行了关键字搜索，并确认存在许多单词
cookies
的实例，这意味着
cookies
api位于类路径的该文件中，因此问题似乎出在用于将其插入服务的语法中

那么，为了将
$cookies
api正确地注入
auth
服务，我对上述代码做了哪些具体更改？


持续努力：


根据@charlietfl和@KenDev的建议，我尝试对服务第一行的语法进行两次更改。这两个版本都会导致编译错误，指出
$cookies.get不是函数
。为了消除混淆，我将按如下方式粘贴实际服务模块中的所有代码：

//angular.module('auth', ['ngCookies']).factory( 'auth', [ '$cookies', function($rootScope, $http, $location, $cookies) {
angular.module('auth', ['ngCookies']).factory('auth', ['$rootScope', '$http', '$location', '$cookies', function($rootScope, $http, $location, $cookies){
        var auth = {

            authenticated1 : $cookies.get('AUTH1'),
            authenticated2 : $cookies.get('AUTH2'),
            usrname : '',

            loginPath : '/login',
            logoutPath : '/logout',
            homePath : '/checkpin',
            path : $location.path(),

            authenticate1 : function(credentials, callback) {

                var headers = credentials && credentials.username ? {
                    authorization : "Basic " + btoa(credentials.username + ":" + credentials.password)
                } : {};

                $http.get('user', {
                    headers : headers
                }).success(function(data) {
                    if (data.name) {
                        auth.authenticated1 = $cookies.get('AUTH1');
                    } 
                    else { 
//                          $cookies.put('AUTH1', 'no');
                        auth.authenticated1 = 'no';//$cookies.get('AUTH1'); 
                    }
                    callback && callback(auth.authenticated1);
                }).error(function() {
//                      $cookies.put('AUTH1', 'no');
                    auth.authenticated1 = 'no';//$cookies.get('AUTH1');
                    callback && callback(false);
                });

            },

            authenticate2 : function(funcJSON, callback) {
                $http.post('/check-pin', funcJSON).then(function(response, $cookies) {
                    if(response.data.content=='pinsuccess'){
                        auth.authenticated2 = $cookies.get('AUTH2');
                        callback && callback(auth.authenticated2);
                    }else {
//                          $cookies.put('AUTH2', 'no');
                        auth.authenticated2 = 'no';//$cookies.get('AUTH2'); 
                        callback && callback(false);
                    }
                });
            },

            clear : function() {
                $location.path(auth.loginPath);
//                  $cookies.put('AUTH1', 'no');
                auth.authenticated1 = 'no';//$cookies.get('AUTH1'); 
//                  $cookies.put('AUTH2', 'no');
                auth.authenticated2 = 'no';//$cookies.get('AUTH2'); 

                $http.post(auth.logoutPath, {}).success(function() { console.log("Logout succeeded");
                }).error(function(data) { console.log("Logout failed"); });
            },

            init : function(homePath, loginPath, logoutPath) {

                auth.homePath = homePath;
                auth.loginPath = loginPath;
                auth.logoutPath = logoutPath;

            }
        };
        return auth;
    }]);

<!doctype html>
<html>
<head>
<base href="/" />
<link href="css/angular-bootstrap.css" rel="stylesheet">
<style type="text/css">
[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none !important;
}
</style>
</head>

<body ng-app="hello" ng-cloak class="ng-cloak">
    <div ng-controller="navigation" class="container">
        <ul class="nav nav-pills" role="tablist">
            <li ng-class="{active:tab('home')}"><a href="/">home</a></li>
            <li ng-class="{active:tab('message')}"><a href="/message">message</a></li>
            <li ng-class="{active:tab('public1')}"><a href="/public1">public1</a></li>
            <li ng-class="{active:tab('public2')}"><a href="/public2">public2</a></li>
            <li ng-class="{active:tab('public3')}"><a href="/public3">public3</a></li>
            <li ng-class="{active:tab('public4')}"><a href="/public4">public4</a></li>
            <li ng-class="{active:tab('register')}"><a href="/register">register</a></li>
            <li><a href="/login">login</a></li>
            <li ng-show="authenticated2()"><a href="" ng-click="logout()">logout</a></li>
        </ul>
    </div>
    <div ng-view class="container"></div>
    <script src="js/angular-bootstrap.js" type="text/javascript"></script>
    <script src="js/auth/auth.js" type="text/javascript"></script>
    <script src="js/home/home.js" type="text/javascript"></script>
    <script src="js/message/message.js" type="text/javascript"></script>
    <script src="js/public1/public1.js" type="text/javascript"></script>
    <script src="js/navigation/navigation.js" type="text/javascript"></script>
    <script src="js/hello.js" type="text/javascript"></script>
</body>
</html>

请注意，我分别用以下第一行中的每一行尝试了上述方法两次：

angular.module('auth', ['ngCookies']).factory( 'auth', [ '$cookies', function($rootScope, $http, $location, $cookies) {

and then separately:  

angular.module('auth', ['ngCookies']).factory('auth', ['$rootScope', '$http', '$location', '$cookies', function($rootScope, $http, $location, $cookies){

然后我尝试了@gnerkis的建议来更新AngularJS的版本。我注意到我的
pom.xml
有
org.webjars:AngularJS
的
1.3.8
，所以我在maven central上查找了最新版本，并在我的
pom.xml
中将版本更改为
1.4.8
，然后键入
mvn clean install-Ude>和
mvn clean package-U
后接
java-jar pathto/nameofjar.jar
，但出现了另一个编译错误，表示未定义
angular
，并指向应用程序中每个控制器的第一个字。然后，当我将应用程序恢复到
1.3.8
时，我能够重新创建@charliet本节开始时描述的fl和@KenDev错误

我还可以尝试什么？

根据@gnerkus的建议，我将我的
index.html
发布如下：

//angular.module('auth', ['ngCookies']).factory( 'auth', [ '$cookies', function($rootScope, $http, $location, $cookies) {
angular.module('auth', ['ngCookies']).factory('auth', ['$rootScope', '$http', '$location', '$cookies', function($rootScope, $http, $location, $cookies){
        var auth = {

            authenticated1 : $cookies.get('AUTH1'),
            authenticated2 : $cookies.get('AUTH2'),
            usrname : '',

            loginPath : '/login',
            logoutPath : '/logout',
            homePath : '/checkpin',
            path : $location.path(),

            authenticate1 : function(credentials, callback) {

                var headers = credentials && credentials.username ? {
                    authorization : "Basic " + btoa(credentials.username + ":" + credentials.password)
                } : {};

                $http.get('user', {
                    headers : headers
                }).success(function(data) {
                    if (data.name) {
                        auth.authenticated1 = $cookies.get('AUTH1');
                    } 
                    else { 
//                          $cookies.put('AUTH1', 'no');
                        auth.authenticated1 = 'no';//$cookies.get('AUTH1'); 
                    }
                    callback && callback(auth.authenticated1);
                }).error(function() {
//                      $cookies.put('AUTH1', 'no');
                    auth.authenticated1 = 'no';//$cookies.get('AUTH1');
                    callback && callback(false);
                });

            },

            authenticate2 : function(funcJSON, callback) {
                $http.post('/check-pin', funcJSON).then(function(response, $cookies) {
                    if(response.data.content=='pinsuccess'){
                        auth.authenticated2 = $cookies.get('AUTH2');
                        callback && callback(auth.authenticated2);
                    }else {
//                          $cookies.put('AUTH2', 'no');
                        auth.authenticated2 = 'no';//$cookies.get('AUTH2'); 
                        callback && callback(false);
                    }
                });
            },

            clear : function() {
                $location.path(auth.loginPath);
//                  $cookies.put('AUTH1', 'no');
                auth.authenticated1 = 'no';//$cookies.get('AUTH1'); 
//                  $cookies.put('AUTH2', 'no');
                auth.authenticated2 = 'no';//$cookies.get('AUTH2'); 

                $http.post(auth.logoutPath, {}).success(function() { console.log("Logout succeeded");
                }).error(function(data) { console.log("Logout failed"); });
            },

            init : function(homePath, loginPath, logoutPath) {

                auth.homePath = homePath;
                auth.loginPath = loginPath;
                auth.logoutPath = logoutPath;

            }
        };
        return auth;
    }]);

<!doctype html>
<html>
<head>
<base href="/" />
<link href="css/angular-bootstrap.css" rel="stylesheet">
<style type="text/css">
[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none !important;
}
</style>
</head>

<body ng-app="hello" ng-cloak class="ng-cloak">
    <div ng-controller="navigation" class="container">
        <ul class="nav nav-pills" role="tablist">
            <li ng-class="{active:tab('home')}"><a href="/">home</a></li>
            <li ng-class="{active:tab('message')}"><a href="/message">message</a></li>
            <li ng-class="{active:tab('public1')}"><a href="/public1">public1</a></li>
            <li ng-class="{active:tab('public2')}"><a href="/public2">public2</a></li>
            <li ng-class="{active:tab('public3')}"><a href="/public3">public3</a></li>
            <li ng-class="{active:tab('public4')}"><a href="/public4">public4</a></li>
            <li ng-class="{active:tab('register')}"><a href="/register">register</a></li>
            <li><a href="/login">login</a></li>
            <li ng-show="authenticated2()"><a href="" ng-click="logout()">logout</a></li>
        </ul>
    </div>
    <div ng-view class="container"></div>
    <script src="js/angular-bootstrap.js" type="text/javascript"></script>
    <script src="js/auth/auth.js" type="text/javascript"></script>
    <script src="js/home/home.js" type="text/javascript"></script>
    <script src="js/message/message.js" type="text/javascript"></script>
    <script src="js/public1/public1.js" type="text/javascript"></script>
    <script src="js/navigation/navigation.js" type="text/javascript"></script>
    <script src="js/hello.js" type="text/javascript"></script>
</body>
</html>


[ng\：斗篷，[ng斗篷]，.ng斗篷{
显示：无！重要；
}











这可能是由于较旧版本的
angular
造成的。在的文档中，我们有以下行：

在Angular 1.3之前，$cookies公开了表示当前浏览器cookie值的属性。在版本1.4中，此行为已发生变化，$cookies现在提供了getter、setter等的标准api

您没有将依赖项正确地注入到服务中

angular.module('auth', ['ngCookies']).factory( 'auth', '$cookies',  function($rootScope, $http, $location, $cookies) {}

应该是

angular.module('auth', ['ngCookies']).factory('auth', ['$rootScope', '$http', '$location', '$cookies', function($rootScope, $http, $location, $cookies){}])

请注意依赖项参数的顺序如何匹配作为字符串提供的函数注释。还要注意括号

请参阅本页的“角度文档”，特别注意

编辑，
在angular 1.3.x中，使用此语法获取和设置cookie

 var storedCookie = $cookies['key']; // get
 $cookies['key'] = 'something'; // set

对于controller和factory的语法差异非常明显。提示…对于
controller（）
和
factory（）中的每一个，只有两个参数
@charlietfl
工厂
代码一直有效，直到我尝试注入
cookies
。我仍在学习AngularJS，并对修复未损坏的东西犹豫不决。但尝试注入
$cookies
会破坏它。因为缺少大括号…看看区别…控制器语法正确…使工厂语法匹配。哟对于factory（），有3个参数不是two@charlietfl请参阅我添加到OP末尾的代码，其中显示了尝试您的建议的结果。还有其他观察结果吗？@CodeMed，在angular 1.3.x中，请尝试使用
var-favoriteCookie=$cookies['AUTH1']
我将
pom.xml
中的
org.webjars:angularjs
的版本改为
1.4.8
，而不是以前的
1.3.8
，然后键入
mvn clean install-U
和
mvn clean package-U
，然后用新创建的
jar
重新启动应用程序，但结果不同eFox编译错误
ReferenceError:angular未在应用程序中每个控制器的以下代码行定义：
angular.module（'auth'，…
。有什么建议吗？我想不出来。我对
maven
没有很好的理解。脚本是如何加载到页面上的？你能给我看一个代码示例吗？我知道如何使用firefox调试器。有什么方法可以提取吗