Angularjs 组织和组合对象的角度方式

Angularjs 组织和组合对象的角度方式,angularjs,architecture,angularjs-directive,organization,Angularjs,Architecture,Angularjs Directive,Organization,我正在从主干迁移到角度,并试图找出一个在角度世界中为对象添加方法的好模式。主干并没有太多意见,但他们确实对扩展对象进行了标准化,比如: Grid = Backbone.View.Extend({ initialize: function(){ grid = new Slick.Grid(el, [], [], {}) grid.onSort.subscribe(this.onClick.bind(this)) // .onSort is a SlickGrid event

我正在从主干迁移到角度,并试图找出一个在角度世界中为对象添加方法的好模式。主干并没有太多意见,但他们确实对扩展对象进行了标准化,比如:

Grid = Backbone.View.Extend({
  initialize: function(){
    grid = new Slick.Grid(el, [], [], {})
    grid.onSort.subscribe(this.onClick.bind(this)) // .onSort is a SlickGrid event
  },
  onSort: function(){}
})
这种结构使得主干的这一部分在项目和开发人员之间非常可预测。 有什么方法可以做到这一点?我提出了三种向指令中添加方法的替代方法,但不确定哪种方法是正确的。这是一个创建指令以向角度应用程序公开SlickGrid的示例,但答案可以也应该将静态、实例附加或原型附加方法添加到角度指令、控制器和服务中。如果每个角度对象类型都有不同的答案,那也很酷

以下是我考虑过的一些方法:

利用父闭包中的私有静态方法: 在链接原型上使用方法 使用link方法中的本地闭包(应用于服务或指令,这可能意味着构造函数)
您缺少angular已经提供的内置指令/方法,angular是最好的起点

浏览…中的
ng
指令列表将看到许多面向事件的指令,如
ngClick
ngChange
ngMousemove
等…显示指令,如
ngShow
ngClass
。。。属性,如
ngChecked
ngSrc
,以及将模型绑定到输入字段的重要属性,
ngModel
。其中大多数文档中都有链接到plunker或JSFIDLE的演示

在标记中使用

<a ng-click="doSomething()">Do Something</a>
现在,angular将自动监视您在事件处理程序中操作的任何作用域属性,并且任何受影响的视图都将自动更新

强烈建议您花时间一步一步地在文档网站上浏览教程从这里可以看出,有三种方式:

  • 继承权
  • 混血儿
  • 对象组合
  • 幻灯片的第14、15和16页更深入地讨论了这些选项

    他最后建议(如果我理解正确的话)大部分时间使用#3对象组合,并将控制器和服务视为类:

    app.ZipCodeFieldController = function(){}
    app.ZipCodeFieldController.prototype.autocomplete = function() {}
    
    然后可以混合使用原型控制器:

    app.PaymentFormController = function($scope, ZipCodeFieldController, $controller) {
      $scope.zipCode = $controller(ZipCodeFieldController)
    }
    
    并在模板中整齐地使用它们:

    <input type="text" name="zip" ng-change="zipCode.autocomplete" ng-model="zip" />
    
    
    
    他在幻灯片24中还介绍了一些非常精细的模块,这很有趣

    也很好:


    在15:14关于编写大型Angular应用程序的ng conf演讲中,有一个关于对象组织的部分:

    我很欣赏这是一个建设性的评论,我的示例很糟糕。我知道有一个ng点击,不应该用它作为例子。我的问题是如何扩展功能,而不是如何使用现有功能。改变我的示例…老实说…当你说
    扩展功能时,你根本不清楚你在寻找什么
    
    $scope.doSomething=function(){
       console.log('I did it!');
       $scope.message='I did it!';
    }
    
    app.ZipCodeFieldController = function(){}
    app.ZipCodeFieldController.prototype.autocomplete = function() {}
    
    app.PaymentFormController = function($scope, ZipCodeFieldController, $controller) {
      $scope.zipCode = $controller(ZipCodeFieldController)
    }
    
    <input type="text" name="zip" ng-change="zipCode.autocomplete" ng-model="zip" />