Question

如何使用构造函数，getter，setter，变量和方法在angularjs中创建一个类？

以下是我想在angulajs中制作的例子

class Abc {
int a;
string str ="Hello world";

  public Abc(){
  }

  public show(){
   return str;
  }

  public setStr(string str){
  this.str = str;
  }

  public getStr(){
  return this.str;
  }
}

我不想使用任何类型的脚本。

只想知道如何在具有以下能力的angularjs中创建一个类。

Answer 1

在介绍ES6之前，JavaScript中没有类。函数可以用来模拟类，但通常JavaScript是一种无类语言。一切都是对象。当涉及到继承时，对象继承自对象，而不是类中的类，如“类”语言中的类。您可以从下面的文章3 ways to define a JavaScript class中获得更多的想法

您无法创建类似角度2的类。但您可以将工厂/服务用作类。

例如

angular.module('foo', [])
.factory('Foo', ['$http', function($http) {
  return function(a, b) {
    this.arr = [];
    this.a = a;
    this.b = b;
    this.random = Math.floor(Math.random()*11);

    this.someFunc = function(c) {
      this.arr.push(c);
    };
  };
}]);

现在你可以像工作一样调用那个工厂

var f1 = new Foo('A', 'B');
f1.random;  // i.e. 0
f1.someFunc('z');  // only affects f1.arr
var f2 = new Foo('C', 'D');
f2.random;  // i.e. 8
f2.someFunc('y');  // only affects f2.arr

Answer 2

这不是JS或角度工作的方式。

更新

由于您要做的是能够创建新实例，您应该在服务中创建它，然后在控制器中注入您的服务。

例如：

angular.module('app', function(){

});

angular.module('app').factory('Abc', function(){
    return {
        a: 0,
        str: "Hello world",
        show:  function() {
            return str;
        },
        setStr: function(str) {
            this.str = str;
        },
        getStr: function() {
            return str;
        }
    }
});

angular.module('app').controller('myController', function(Abc) {
     $scope.newClass = new Abc;
});

老回答。

而是创建具有自己属性的对象，通常位于控制器的$ scope内。

代码的等效角度代码为：

angular.module('app', function(){

});

angular.module('app').controller('Abc', function(){
    $scope.a;

    var str = "Hello world";

    $scope.show = function() {
        return str;
    };

    $scope.setStr = function(str) {
        str = str;
    };

    $scope.getStr = function() {
        return str;
    };
});

Answer 3

这篇文章可能会帮到你

Angular model objects with JavaScript classes

在本文中，作者使用原型来演示使用类。如果您想使用class关键字，也可以使用它。这只是javascript中prototypes的语法糖。

只需创建要使用的类的工厂，然后在要使用自定义类的模块中导入。

app.factory('Rectangle', function () {

  class Rectangle {
   constructor(height, width) {
     this.height = height;
     this.width = width;
    }
     get area() {
    return this.calcArea();
  }

  calcArea() {
    return this.height * this.width;
  } 
 }
  return Rectangle;
})

只是一种实施方式。

Answer 4

有许多方法可以在Javascript中创建类似于类的对象。

ECMA6引入了class关键字。但是，这适用于以后的浏览器，并且已经存在用于创建适用于早期浏览器的类的实践：

function ABC {
    this.str = "Hello world";
}

ABC.prototype.show = function() {
    return this.str;
};

ABC.prototype.setStr = function(str) {
    this.str = str;
}

ABC.prototype.getStr = function() {
    return this.str;
}

您现在可以将ABC视为一个类：

var abc = new ABC();
abc.setStr('Maybe I should look at typescript');
console.log(abc.getStr());

Answer 5

您可以使用factory：

来实现此目的

function Abc() {
    this.str = "This is a string";
    this.i = null;
    this.show() {
        return str;
    }

    this.setStr = function(str){
        this.str = str;
    }

    this.getStr = function(){
        return this.str;
    }
}

module.factory('Abc', function () {
  return Abc;
});

您可以在控制器中使用它：

function MainCtrl(Abc) {
    var vm = this;
    vm.abc= new Abc();
}

请参阅另一个示例here。

在Angular中创建一个类

5 个答案: