javascript - 如何将 $cookies 注入(inject) AngularJS 服务？

Question

我阅读了$cookies 的文档 at this link ，它建议使用以下语法注入(inject) $cookies:

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

因此，我尝试了以下语法将 $cookies 注入(inject)到服务中(注意 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 没有被修改，我假设错误是在我的应用程序代码中，唯一改变的行如上所示。

然后我通过尝试使用以下语法注入(inject) $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 正确注入(inject)到 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;
    }]);

请注意，我对以下第一行分别尝试了两次上述操作:

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 -U 和 mvn clean package - U 后跟 java -jar pathto/nameofjar.jar，但得到一个不同的编译错误，指出 angular 未定义，并指向第一个单词应用程序中的每个 Controller 。然后，当我将应用程序恢复到 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 的文档中，我们有这一行:

Up until Angular 1.3, $cookies exposed properties that represented the current browser cookie values. In version 1.4, this behavior has changed, and $cookies now provides a standard api of getters, setters etc.