Angular JS 错误：[$injector:cdep] 找到循环依赖项：sessionService <- sessionService答案

【问题标题】：Angular JS Error: [$injector:cdep] Circular dependency found: sessionService <- sessionServiceAngular JS 错误：[$injector:cdep] 找到循环依赖项：sessionService <- sessionService
【发布时间】：2018-04-12 19:40:28
【问题描述】：

我最初收到错误Argument 'fn' is not a function got string 经过一些调查并关注Argument 'fn' is not a function got string 我偶然发现了错误：[$injector:cdep] 找到循环依赖项：sessionService 。

我使用的 AngularJS 版本是 1.6.6。感谢您的帮助！

HTML

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Services and Factories</title>
    <script src="angular.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
    crossorigin="anonymous">
</head>
<body ng-controller="sessionController as vm">
<div class="container">
    <h1>Services and Factories</h1>

    <div class="form-group-row">
        <div class="col-sm-4">
            <label>Name</label>
        </div>

        <div class="col-sm-8">
            <input type="text" class="form-control" ng-model="vm.model.name">
        </div>
    </div>

    <div class="form-group-row">
        <div class="col-sm-4">
            <label>Nick Name</label>
        </div>

        <div class="col-sm-8">
            <input type="text" class="form-control" ng-model="vm.model.nickname">
        </div>
    </div>

    <div class="form-group row">
        <div class="col-sm-8 col-sm-offset-4">
            <input type="button" class="btn btn-primary" ng-click="vm.setServiceSession()" value="Save with Service">

            <input type="button" class="btn btn-default" ng-click="vm.getServiceSession()" value="Retrieve from Service">


            <input type="button" class="btn btn-default" ng-click="vm.clearServiceSession()" value="Clear from Service">

        </div>
    </div>
<pre>{{vm.model | json}}</pre>
</div>

<script src="app/app.js"></script>
<script src="app/sessionService.js"></script>
<script src="app/sessionController.js"></script>

</body>
</html>

app.js

var app = angular.module('app',[]);

sessionController.js

angular.module('app').controller('sessionController',['sessionService',

    function (sessionService) {

    var vm = this;


    function sessionController(sessionService) {

        var vm = this;

        vm.getServiceSession = function () {

            vm.model = {
                name: sessionService.get('name'),
                nickname: sessionService.get('nickname'),
                status: 'Retrieved by service on ' + new Date()
            }
        };

        vm.setServiceSession = function () {

            sessionService.save('name', vm.model.name);
            sessionService.save('nickname', vm.model.nickname);
            vm.getServiceSession();
        };

        vm.clearServiceSession = function () {

            sessionService.clear();
            vm.getServiceSession();
        }

    }
}

]);

sessionService.js

angular.module('app').service('sessionService',['$window','sessionService',
function sessionService($window) {

    this.save = save;
    this.get = get;
    this.clear = clear;

    function save(key, value) {
        $window.sessionStorage.setItem(key,value);

    }

    function get(key) {
        return $window.sessionStorage.getItem(key);
    }

    function clear() {
        $window.sessionStorage.clear();
    }

}]);

【问题讨论】：

你为什么要把sessionService注入sessionService？我想您可能只想从 sessionService.js 中删除 'sessionService',
@ExplosionPills 谢谢我没有看到错误但是按钮的功能不起作用。

标签： html angularjs

【解决方案1】：

在 sessionService.js 中：

你告诉 Angular 注册（创建）一个名为 sessionService 的服务，它有两个依赖项 - $window 和 sessionService。这是循环依赖，因为 sessionService 不能依赖自身。

为避免循环依赖，您需要从依赖列表中删除'sessionService'。

angular.module('app').service('sessionService',['$window', 
function sessionService($window) {

    this.save = save;
    this.get = get;
    this.clear = clear;

    function save(key, value) {
        $window.sessionStorage.setItem(key,value);

    }

    function get(key) {
        return $window.sessionStorage.getItem(key);
    }

    function clear() {
        $window.sessionStorage.clear();
    }
}]);

我认为您这样做是错误的，但阅读有关 Angular 服务的文档可能会有所帮助：

https://docs.angularjs.org/guide/services#dependencies

【讨论】：

谢谢你的详细回答，让我明白了