Angularjs 实现会话工厂_Angularjs

Angularjs 实现会话工厂

angularjs

Angularjs 实现会话工厂,angularjs,Angularjs,下面的应用程序实现了一个与HTML5 window.sessionStorage对象交互的会话服务。它工作得很好。我正在尝试使用会话工厂执行与服务相同的操作，但它不起作用我的应用程序包含以下文件： index.html <!DOCTYPE html> <html ng-app="app"> <head> <title>Services and Factories</title> <link rel="styles

下面的应用程序实现了一个与HTML5 window.sessionStorage对象交互的会话服务。它工作得很好。我正在尝试使用会话工厂执行与服务相同的操作，但它不起作用

我的应用程序包含以下文件：

index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>Services and Factories</title>
    <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>Nickname</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 ng-click="vm.setServiceSession()" type="button" class="btn btn-primary" value="Save with Service" />
                <input ng-click="vm.getServiceSession()" type="button" class="btn btn-default" value="Retrieve from Service" />
                <input ng-click="vm.clearServiceSession()" type="button" class="btn btn-default" value="Clear from Service" />
            </div>
        </div>
        <pre>{{vm.model | json}}</pre>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
    <script src="app/app.js"></script>
    <script src="app/sessionController.js"></script>
    <script src="app/sessionService.js"></script>
</body>
</html>

app/sessionController.js

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

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();
    };
}

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, value) {
        return $window.sessionStorage.getItem(key);
    }

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

angular.module('app').factory('sessionFactory', ['$window', sessionFactory]);

function sessionFactory($window) {
    return {
        save: save,
        get: get,
        clear: clear
    };

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

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

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

<div class="form-group row">
            <div class="col-sm-8 col-sm-offset-4">
                <input type="button" class="btn btn-primary" value="Save with Factory" ng-click="vm.setFactorySession()" />
                <input type="button" class="btn btn-default" value="Retrieve from Factory" ng-click="vm.getFactorySession()" />
                <input type="button" class="btn btn-default" value="Clear from Factory" ng-click="vm.clearFactorySession()" />
            </div>
        </div>
...
<script src="app/sessionFactory.js"></script>

app/sessionService.js

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

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();
    };
}

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, value) {
        return $window.sessionStorage.getItem(key);
    }

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

angular.module('app').factory('sessionFactory', ['$window', sessionFactory]);

function sessionFactory($window) {
    return {
        save: save,
        get: get,
        clear: clear
    };

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

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

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

<div class="form-group row">
            <div class="col-sm-8 col-sm-offset-4">
                <input type="button" class="btn btn-primary" value="Save with Factory" ng-click="vm.setFactorySession()" />
                <input type="button" class="btn btn-default" value="Retrieve from Factory" ng-click="vm.getFactorySession()" />
                <input type="button" class="btn btn-default" value="Clear from Factory" ng-click="vm.clearFactorySession()" />
            </div>
        </div>
...
<script src="app/sessionFactory.js"></script>

会话服务运行良好。然后，我尝试添加一个会话工厂来完成与会话服务相同的工作，但一切都停止了。我添加以下文件：

app/sessionFactory.js

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

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();
    };
}

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, value) {
        return $window.sessionStorage.getItem(key);
    }

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

angular.module('app').factory('sessionFactory', ['$window', sessionFactory]);

function sessionFactory($window) {
    return {
        save: save,
        get: get,
        clear: clear
    };

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

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

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

<div class="form-group row">
            <div class="col-sm-8 col-sm-offset-4">
                <input type="button" class="btn btn-primary" value="Save with Factory" ng-click="vm.setFactorySession()" />
                <input type="button" class="btn btn-default" value="Retrieve from Factory" ng-click="vm.getFactorySession()" />
                <input type="button" class="btn btn-default" value="Clear from Factory" ng-click="vm.clearFactorySession()" />
            </div>
        </div>
...
<script src="app/sessionFactory.js"></script>

我修改：

index.html（为工厂和sessionFactory脚本添加3个新按钮）

使用

工厂时，不需要使用新建会话工厂（）

相反，使用sessionFactory.get（'name'）
就可以了
这是服务
和工厂
之间的主要区别
查看更多细节。
使用工厂时，您不需要使用新会话工厂（）

相反，使用sessionFactory.get（'name'）
就可以了
这是服务
和工厂
之间的主要区别
查看更多细节。
由于工厂和服务都是单音的，您不需要使用新的
。只要把它去掉，照样做就行了
删除：
var mySessionFactory=newsessionfactory（）
一切都好。
由于工厂和服务都是单一的，您不需要使用新的。只要把它去掉，照样做就行了
删除：
var mySessionFactory=newsessionfactory（）
最好的。
为什么要使用var mySessionFactory=new sessionFactory（）
？@Sai这是一个课程的练习，他们说要添加这一行。不知道为什么，把它拿走。由于工厂都是单件的，不需要再加上这一点。删除并用作服务。为什么要使用var mySessionFactory=new sessionFactory（）
？@Sai这是一门课程的练习，他们说要添加这一行。不知道为什么，把它拿走。由于工厂都是单件的，不需要再加上这一点。删除并用作服务。您所说的区别是什么？@Sai会话服务再次工作，但会话工厂仍不工作。您所说的区别是什么？@Sai会话服务再次工作，但会话工厂仍不工作。