Может ли два разных модуля иметь контроллеры с одинаковым именем в угловых js?

Question

Я делаю свое первое приложение в Angular JS.

У меня есть три сайта Tab.

Как следует определить угловые модули ? Один на каждую страницу и один основной модуль, который контролирует все три страницы?

Я хотел спросить, возможно ли это?

Answer 1

Если есть три разные страницы, вам необходимо создать три контроллера. Это хорошая практика, и позже вы сможете правильно управлять своим приложением.

Вам необходимо создать один модуль и реализовать три контроллера.

var app = angular.module('myApp', []); 

И тогда вам нужно создать контроллеры.

app.controller("myCtrl", function($scope) { 
    $scope.firstName = "John"; 
    $scope.lastName = "Doe"; 
}); 

Это лучшая структура. Продолжайте это делать :)

Answer 2

Вы можете создать три контроллера в трех разных модулях под тем же именем, но если вы импортируете три модуля в своем основном приложении, произойдет столкновение имен и будет доступен только последний контроллер (Modules and namespace/name collision in AngularJS).

Система углового модуля имеет смысл, если вы хотите повторно использовать часть своего приложения в другом проекте или иметь большое приложение с множеством услуг, фильтров и т. Д. Так как это не относится к вашему веб-сайту с тремя тремя вкладками, я бы предложил использовать один модуль для вашего приложения и три разных контроллера в этом модуле.

angular.module('app', []) 
.controller("tab1", function() { 
    }) 
.controller("tab2", function() { 
    }) 
.controller("tab3", function() { 
    }); 

Answer 3

Да, вы можете. Но это хорошая практика изолировать логику от HTML-документа насколько это возможно.

Например.

---

App.js

app.controller("PanelController", function() { 
this.tab = [youTabId]; // Set a tab by default on load. 

this.selectTab = function(setTab) { 
    this.tab = setTab; 
}; 

this.isSelected = function(checkTab) { 
    return this.tab === checkTab; 
}; 
}); 

---

В HTML на вкладке раздела, добавить контроллер с ng-controller как этот ng-controller="PanelController as panel".

Для каждого <li> добавьте ng-class вот так ng-class="{active : panel.isSelected([yourTabId])}".

И для каждой ссылки <a> a ng-click, ng-click="panel.isSelected([youTabId])".

По этому пути, на вашем <div>, чтобы показать, когда нажмите на вкладку, добавьте ng-show="panel.isSelected([yourTabId])"

---

С этим, ваш код чист и адаптируется.