Question

我阅读了$cookies at this link的文档，并建议使用以下语法注入$cookies：

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

因此，我尝试使用以下语法将$cookies注入服务（注意factory而不是controller：

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

但结果是FireFox中的一个模糊的编译错误导致应用程序无法编译。错误是成千上万个字符到angular-bootstrap.js并且无法访问，因为angular-bootstrap.js被压缩成大约20行，每行10,000多个字符。由于angular-bootstrap.js尚未修改，我认为错误在我的应用代码中，其中唯一的更改行如上所示。

然后我尝试使用以下语法注入$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 is not a function。为了消除混淆，我将粘贴实际服务模块中的所有代码，如下所示：

//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;
    }]);

请注意，我对以下第一行分别尝试了两次以上内容：

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版本1.3.8为org.webjars:angularjs，因此我在maven central查找了最新版本，并将版本更改为1.4.8 pom.xml ，然后键入mvn clean install -U和mvn clean package -U后跟java -jar pathto/nameofjar.jar，但得到了一个不同的编译错误，说明angular未定义，并指向每个控制器的第一个单词该应用程序。当我将应用程序还原为1.3.8时，我能够重新创建在 ONGOING RESEARCH 部分开头描述的@charlietfl和@KenDev错误。

我还能尝试什么？

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

<!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>

Answer 1

这可能是旧版angular的结果。在ngCookies的文档中，我们有这一行：

直到Angular 1.3，$ cookies暴露了代表当前浏览器cookie值的属性。在1.4版本中，此行为已更改，$ cookies现在提供了getter，setter等的标准API。

Answer 2

您没有正确地将依赖项注入您的服务。

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){}])

请注意依赖关系参数的排序如何与作为字符串提供的函数注释匹配。另请注意括号。

请在角度文档上查看此页面，特别注意Note on Minification

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

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

如何将$ cookie注入AngularJS服务？

2 个答案: