Question

提前为一个很长的问题道歉，我希望你们中的一些人能够理解这一点。

我刚刚开始使用棱角分明，到目前为止我喜欢它，并且能够快速地对我们当前应用中的一些功能进行原型设计，然后才能在2014年＆＃34;重写之后＃34 ;.但是在我们将皮革变成地狱之前，我想确保我的架构正确，而且我遇到的一个困惑是围绕控制器层次结构和/或继承。

我们的应用程序目前分为逻辑上独立的页面，并且具有一个包含不同通用实体的数据库。许多页面在结构上彼此相似，并且通常页面仅处理一种类型的实体。为简单起见，我们假设它是影院预订系统......

所以，让我们说现在有一个页面显示电影院的所有当前电影，数据来自数据库中的电影实体，并且这些电影是在一张桌子。该表显示了电影的各种属性（年龄等级，长度，演员等）。当用户点击电影时，他们将被带到放映页面，在非常相似的表格中显示有关放映实体的信息（时间，可用座位等）。

首先，我可能会考虑根据逻辑页面来划分我的模块/控制器。用户可能会这样：

var app = angular.module('MyCinema', ['Movies', 'Screenings']);

var movies = angular.module('Movies', []);
movies.controller('movieCtrl', function() {});
movies.controller('movieTableCtrl', function() {
  // ... do lots of stuff related to the movie table
});


var screenings = angular.module('Screenings', []);
screenings.controller('screeningCtrl', function() {});
screenings.controller('screeningTableCtrl', function() {
  // ... do lots of stuff related to the screening table
});

...实际上，我会将它们放在各自的闭包中，放在单独的文件中，但为了简洁起见，我们会这样做。

在HTML中......

<html ng-app="MyCinema">
  <section ng-controller="movieCtrl">
    <!-- movie related stuff -->
    <table ng-controller="movieTableCtrl"></table>
  </section>
  <section ng-controller="screeningCtrl">
    <!-- screening related stuff -->
    <table ng-controller="screeningTableCtrl"></table>
  </section>
</html>

无论如何，我很快意识到＆＃34;做与电影桌有关的事情＆＃34;和＆＃34;做与筛选表有关的事情＆＃34;几乎相同。我发现了这个问题/答案：Can an AngularJS controller inherit from another controller in the same module?并实现了类似的内容：

var app = angular.module('MyCinema', ['Movies', 'Screenings']);
app.controller('tableCtrl', function() {
  // ... do MOST stuff related to all tables
});

var movies = angular.module('Movies', []);
movies.controller('movieCtrl', function() {});
movies.controller('movieTableCtrl', function($scope) {
  $controller('tableCtrl', {$scope: $scope});
  // ... do a little bit more stuff related to the movie table
});


var screenings = angular.module('Screenings', []);
screenings.controller('screeningCtrl', function() {});
screenings.controller('screeningTableCtrl', function($scope) {
  $controller('tableCtrl', {$scope: $scope});
  // ... do a little bit more stuff related to the screening table
});

这很有效，控制器有一种继承的东西，而且HTML保持不变，控制器位于DOM的正确部分，也在逻辑上分开的模块中，但是......我不知道＆＃39;知道，“继承”＃39;看起来并不干净，看起来并不像是有点想要我做的事情。感觉像有角度的实际上希望我做这样的事情：

var app = angular.module('MyCinema', ['Movies', 'Screenings']);
app.controller('tableCtrl', function() {
  // ... do MOST stuff related to all tables
});
app.controller('movieTableCtrl', function($scope) {
  // ... do a little bit more stuff related to the movie table
});
app.controller('screeningTableCtrl', function($scope) {
  // ... do a little bit more stuff related to the screening table
});

并在HTML ...

<section ng-controller="movieCtrl">
  <!-- non-table movie stuff -->
</section>
<section ng-controller="screeningCtrl">
  <!-- non-table movie stuff -->
</section>
<div ng-controller="tableCtrl">
  <table ng-controller="movieTableCtrl"></table>
  <table ng-controller="screeningTableCtrl"></table>
</div>

所以现在我不必传递$ scope来使它工作（范围在DOM中是隐式正确的）并且JS代码看起来也更清晰，IMO。但是HTML并没有表达表格内容与其他部分的关系。

恭喜并感谢我通过我的问题解决这个问题。我现在的问题很简单，这些是首选的风格还是它们都很糟糕？我错过了第三种最好的方法吗？

tldr; 将控制器放在单独的模块逻辑模块中，将DOM保持逻辑分离，然后尝试让控制器在JS中继承彼此...或者它最好让DOM指定继承，并在JS中牺牲一些逻辑分离......或者其他什么？

干杯!!

Answer 1

当你说'＆＃39;＆＃34;做与电影桌相关的事情时，我会坚持使用＆＃34;做东西＆＃34;＆＃34;和＆＃34;做与筛选表有关的事情＆＃34;几乎是相同的＃39;你在做什么？

控制器应该只将您的模型应用到您的视图中。

根据您的意思，工厂，服务或指令可能比这些表的控制器更有用。

Angular JS控制器层次结构/继承的最佳实践

1 个答案: