Angularjs 继承角度控制器对象

当我们在生活中围绕控制器对象时，我真的不明白如何在angular（不使用$scope）中继承它们

因此，假设我们有2个控制器文件：

Animal.js

(function() {
    'use strict';
    angular.module('myApp').controller('animalCtrl', function() {
        this.strength = 3;
        this.speed = 3;
});
})();

海狸

(function() {
    'use strict';
    angular.module('myApp').controller('beaverCtrl', function() {
        //How do I inherit the parent controllers stats?
});
})();

---

如何使用beaverCtrl从animalCtrl继承？

在任何angularjs站点上共享数据的最佳方式是使用服务。在本例中，我将创建一个工厂，存储强度和速度，并与beaverCtrl共享

angular.module('<yourappname>', [])
  .factory('dataService', function() {
    $scope = this;

    $scope.strength = null;
    $scope.speed = null;

    $scope.setStrength = function(value) {
      $scope.strength = value;
    }

    $scope.setSpeed = function(value) {
      $scope.speed = value;
    }
    return $scope;
})

---

在任何angularjs站点上共享数据的最佳方式是使用服务。在本例中，我将创建一个工厂，存储强度和速度，并与beaverCtrl共享

angular.module('<yourappname>', [])
  .factory('dataService', function() {
    $scope = this;

    $scope.strength = null;
    $scope.speed = null;

    $scope.setStrength = function(value) {
      $scope.strength = value;
    }

    $scope.setSpeed = function(value) {
      $scope.speed = value;
    }
    return $scope;
})

---

重要的是要认识到AngularJS控制器只是一个普通的javascript“类”。唯一的捕获是使用依赖项注入调用基本构造函数

// Create some base class.
BaseController = function($scope, $route) {
  // Do some stuff here.
};

// The base class has some behavior.
BaseController.prototype.someMethod = function() { /* do something */ };

// Create some child class.
ChildController = function($scope, $injector) {
  // Invoke the base constructor.
  $injector.invoke(this, BaseController, {$scope: $scope});
};

// Inherit from the base class.
ChildController.prototype = Object.create(BaseController.prototype);

// Add more specific behavior.
ChildController.prototype.someChildMethod = function() { /* do something */ };

然后，您可以将控制器注册为

angular.module('myApp').controller('ChildController', ChildController);

请记住，如果过度使用，像这样使用继承会有问题。它只能用于共享行为。此外，使用不同“类”的组合通常比使用继承要灵活得多

---

从代码组织的角度来看，我还建议您在一个位置声明控制器（每个控制器一个文件），然后在另一个位置将它们注册到模块上（每个模块一个文件）。

重要的是要认识到AngularJS控制器只是一个普通的javascript“类”。唯一的捕获是使用依赖项注入调用基本构造函数

// Create some base class.
BaseController = function($scope, $route) {
  // Do some stuff here.
};

// The base class has some behavior.
BaseController.prototype.someMethod = function() { /* do something */ };

// Create some child class.
ChildController = function($scope, $injector) {
  // Invoke the base constructor.
  $injector.invoke(this, BaseController, {$scope: $scope});
};

// Inherit from the base class.
ChildController.prototype = Object.create(BaseController.prototype);

// Add more specific behavior.
ChildController.prototype.someChildMethod = function() { /* do something */ };

然后，您可以将控制器注册为

angular.module('myApp').controller('ChildController', ChildController);

请记住，如果过度使用，像这样使用继承会有问题。它只能用于共享行为。此外，使用不同“类”的组合通常比使用继承要灵活得多

---

从代码组织的角度来看，我还建议您在一个位置声明控制器（每个控制器一个文件），然后在另一个位置将它们注册到模块上（每个模块一个文件）。

可能重复的可能重复我有点困惑如何调用$injector.invoke（这是BaseController，{$scope:$scope}）；如果控制器位于不同的文件中，并且周围有IIFE，则BaseController对ChildController不可见。我想这更像是一个javascript问题，而不是一个角度问题，但是您的回答很有帮助。为了保持示例的简单，我省略了组织部分。在实际应用程序中，您可能需要某种加载时间模块系统。Angular模块处理运行时依赖项（即配置依赖项注入器和html编译器）；如果控制器位于不同的文件中，并且周围有IIFE，则BaseController对ChildController不可见。我想这更像是一个javascript问题，而不是一个角度问题，但是您的回答很有帮助。为了保持示例的简单，我省略了组织部分。在实际应用程序中，您可能需要某种加载时间模块系统。Angular模块处理运行时依赖项（即，配置依赖项注入器和html编译器）。