使用服务作为模型

Question

我希望此服务作为模型运行。

angular.module('secrunApp').service('appState', function () {

  this.currentAnswerset = 1;
  this.currentQuestion = 2;
  this.name;

  function set(key, value) {
    console.log('>> set appStateModel', key, value);
    var localVar = key;
    this[localVar] = value;
  }

  function get(key) {
    console.log('<< get appStateModel', key, this[key]);
    return this[key];
  }

  return {
    get: get,
    set: set
  }
});

几个问题。

1 - 最初，在启动应用程序和访问此道具时，默认属性是未定义的。为什么会这样？

2 - 将服务作为模型处理并存储数据以供整个应用程序访问是否简单但正确？

3 - 我假设只返回一个 get/set API 其余属性不能直接访问（某种私有），但它们不是。有人可以解释为什么会这样吗？

注入控制器后，我设置并获得属性值如下，完美运行。

appState.set('name', 'SJV');
appState.get('name');

一般问题：什么是可靠且正确的实施。我想保持简单，平易近人。

Answer 1

此引用指的是您的服务创建函数，而不是您要返回的对象。这是一个修复示例。

var result = {};
result.currentAnswerset = 1;
result.currentQuestion = 2;
result.name;

function set(key, value) {
    console.log('>> set appStateModel', key, value);
    var localVar = key;
    result[localVar] = value;
}

function get(key) {
    console.log('<< get appStateModel', key, result[key]);
    return result[key];
}

result.get = get;
result.set = set;
return result;

Answer 2

问题 1

.service() 需要构造函数。其中 Angular 使用 new 运算符实例化。所以，你不需要return一个新的对象。 JavaScript return 对象适合您。现在，在服务构造函数中，您可以将 public 函数添加到 this 变量。

angular
    .module('secrunApp')
    .service('appState', function () {
        this.currentAnswerset = 1;
        this.currentQuestion = 2;
        this.name;

        this.set = function (key, value) {
            console.log('>> set appStateModel', key, value);
            var localVar = key;
            this[localVar] = value;
        };

        this.get = function (key) {
            console.log('<< get appStateModel', key, this[key]);
            return this[key];
        };
    });

现在，您的服务实例是对服务构造函数中 this 引用的同一对象的引用。但是由于您的数据与服务对象本身相关联，因此它们还不是私有的。我们稍后再谈。

问题二

您可以尝试在 DOM 中设置一个基础控制器来处理所有应用程序级别的视图模型。例如

<body ng-controller="AppController as appVm">
  <div ng-controller="SomethingController as somethingVm">
    <p>{{ appVm.currentAnswerset }}</p>
  </div>
</body>

问题 3

为了保持变量私有，在服务构造函数中定义了一个局部变量，只有 getter 和 setter 可以通过闭包访问。

angular
    .module('secrunApp')
    .service('appState', function () {
        // Private data only getter and setter can access
        var data = {
            currentAnswerset: 1,
            currentQuestion: 2,
            name: ''
        };

        this.set = function (key, value) {
            data[key] = value;
        };

        this.get = function (key) {
            return data[key];
        };
    });

使用服务作为模型

Using service as Model

service

implementation

model

private

angularjs