Angularjs中的多个模块

Posted 2023-02-19

【中文标题】Angularjs中的多个模块

【英文标题】：Multiple Module in Angularjs

【发布时间】：2013-09-01 23:23:41

【问题描述】：

是否可以在 Angular 脚本中创建多个模块？我浏览了文档，了解到这是某种主要方法的概念。

我需要例子来证明这一点。

【参考方案1】：

是的，您可以在 angularJS 中定义多个模块，如下所示。

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

但是，不要忘记在每个模块声明期间定义依赖项，如下所示。 让我们假设 myApp2 依赖于 myApp。因此，声明将类似于，

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

AngularJS 中的模块化有助于我们保持代码清晰和易于理解，因为我们可以组合多个模块来生成应用程序。但是，我们需要记住，我们应该根据组件的功能而不是类型来模块化组件。

【讨论】：

我们可以为这两个模块分别定义 ng-view... 是否可以...提前谢谢

单个页面只支持一个ng-view。但是，如果您想在一个页面中定义和使用多个视图/模板，最好使用angular ui.router。这是官方文档 - github.com/angular-ui/ui-router.

【参考方案2】：

每个 html 文档只能自动引导一个 AngularJS 应用程序。在文档中找到的第一个 ngApp 将用于定义根元素以自动引导为应用程序。要在 HTML 文档中运行多个应用程序，您必须使用 angular.bootstrap 手动引导它们。 AngularJS 应用程序不能相互嵌套。 --http://docs.angularjs.org/api/ng.directive:ngApp 另见

https://groups.google.com/d/msg/angular/lhbrIG5aBX4/4hYnzq2eGZwJ http://docs.angularjs.org/api/angular.bootstrap

您也可以只使用一个 ng-app，但像这样组合 2 个模块：

var moduleA = angular.module("MyModuleA", []);
moduleA.controller("MyControllerA", function($scope) 
  $scope.name = "Bob A";
);

var moduleB = angular.module("MyModuleB", []);
moduleB.controller("MyControllerB", function($scope) 
  $scope.name = "Steve B";
);

angular.module("CombineModule", ["MyModuleA", "MyModuleB"]);

然后ng-app="CombineModule"

【参考方案3】：

我认为他将模块与 ngApp 混淆了，因为页面上只有一个应用程序（ng-app），并且应用程序的视图（ngView 或 ）也只能存在一次。但是如前面的答案所述，您可以创建任意数量的模块，并将它们作为依赖项注入到您的“主”应用程序模块中。我通常这样做是为了在它们自己的模块中分离我的指令、过滤器、控制器等。

编辑：

ngApp - http://code.angularjs.org/1.1.5/docs/api/ng.directive:ngApp

【参考方案4】：

当然可以。只需使用angular.module('moduleName', [/* dependencies */]) 的次数与您希望创建的模块数一样多。

要获得对先前定义的模块的引用，只需执行以下操作：var myModule = angular.module('moduleName');，然后是 myModule.controller(...)、myModule.config()、myModule.constant() 等。

建议的项目布局（请参阅 Angular Seed）有一个用于您的应用程序的模块，另一个用于您的控制器，另一个用于您的服务，另一个用于您的过滤器，还有一个用于您的指令。当然这是a mere suggestion。其他人建议alternative layouts。

【参考方案5】：

多模块是什么意思？ 您可以将模块注入另一个模块

angular.module(name[ anotherModule]);