Question

我正在Angular JS制作我的第一个应用程序。

我有一个三个Tab网站。

那么应该如何定义角度模块？每个页面一个，一个主模块控制所有三页？

我想问这是否可能？

Answer 1

您可以使用相同的名称在三个不同的模块中创建三个控制器，但如果您在主应用程序中导入三个模块，则会发生名称冲突，并且只有最后一个控制器可用（Modules and namespace / name collision in AngularJS）。

如果您想在另一个项目中重复使用部分应用程序，或者拥有一个包含大量服务，过滤器等的真正大型应用程序，则角度模块系统是有意义的。由于您的小三个标签网站不是这种情况，我建议您在此模块中为您的应用程序和三个不同的控制器使用一个模块。

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

Answer 2

如果有三个不同的页面，则必须制作三个控制器。这是一种很好的做法，以后您可以正确管理您的应用程序。

您必须创建一个模块并实现三个控制器。

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

然后你必须创建控制器。

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

这是最好的结构。保持这种状态：）

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>和ng-click，ng-click="panel.isSelected([youTabId])"。

通过这种方式，在点击标签页时显示的<div>上，添加ng-show="panel.isSelected([yourTabId])"

有了这个，您的代码就干净且适应性强。

两个不同的模块可以在角度js中具有相同名称的控制器吗？

3 个答案: