如何在AngularJS中集成两个模块
[英]How to Integrate two modules in AngularJS
问题描述
I have two modules as follows. 
我有以下两个模块。
var module1 = angular.module('myApp',['ngAnimate','ngTouch']
.controller('MainCtrl', function ($scope)){
});
var module2 = angular.module('myApp',[]);
module2.controller('NameCtrl',function($scope)){
});
And Html here 和HTML在这里
<body ng-app='myApp'>
<div ng-controller='MainCtrl'> //Code here</div>
<div ng-controller='NameCtrl'>//Code here</div>
</body>
But this throws error like this. 但这会引发这样的错误。 'NameCtrl' is not existing 'NameCtrl'不存在
Please let me know how to fix this. 请让我知道如何解决此问题。 Thanks in advance 提前致谢
9 个解决方案
解决方案1
2 2016-03-25 14:32:19
Proper structure would look like this... 适当的结构看起来像这样...
var myApp = angular.module('myApp', ['ngAnimate','ngTouch']);
myApp.controller('MainCtrl', function($scope){
});
myApp.controller('NameCtrl', function($scope){
});
Remember Each module is like a separate app. 记住每个模块就像一个单独的应用程序。 Each module has to be a unique name, each module can have things like their own configuration, controllers, services etc. 每个模块必须具有唯一的名称，每个模块可以具有自己的配置，控制器，服务等内容。
解决方案2
1 2016-03-25 14:27:12
You don't need 2 modules. 您不需要2个模块。
module1.controller('NameCtrl',function($scope)){
});
is what you want 是你想要的
解决方案3
1 2016-03-25 14:31:53
You are declaring two different modules with the same name . 您要声明两个具有相同名称的 不同模块 。 You can't do it. 你做不到
the angular.module method is a jQuery-like getter and setter. angular.module方法是类似jQuery-like getter和setter方法。 If you call'it with just one parameter it works as a getter , if you call it with two or more parameters , then, it works as a setter . 如果仅用一个参数调用它，它就可以用作getter ，如果用两个或多个参数调用它，则它可以用作setter 。
So, if you need (as seems) to register just another recipe (controller, service, ecc.) but not a new module , you need to do angular.module('ngApp').controller . 因此，如果您只需要注册另一个配方（控制器，服务等），而不是新模块 ，则需要执行angular.module('ngApp').controller 。
Otherwise, if you need for a new module, you need to assign it a different name and bootstrap it manually via angular.bootstrap 否则，如果需要新模块，则需要为其分配一个不同的名称，并通过angular.bootstrap手动引导它
解决方案4
0 2016-03-25 14:29:23
This is one you looking for ? 这是您要找的一个吗？
var modules = angular.module('myApp',['ngAnimate','ngTouch']
.controller('MainCtrl', function ($scope)){
});
modules.controller('NameCtrl',function($scope)){
});
解决方案5
0 2016-03-25 14:32:46
You can't declare two module with same name . 您不能使用相同的名称声明两个模块。 you can use different controller, service, directive, factory etc in same module so you may no need to use different module for simple app. 您可以在同一模块中使用不同的controller, service, directive, factory等，因此对于简单的应用程序，您可能无需使用其他模块。
If need different controller in same module then use like 如果在同一模块中需要不同的控制器，则使用类似
var myModule = angular.module('myApp',['ngAnimate','ngTouch']);
myModule .controller('MainCtrl', function ($scope){
//code
});
myModule .controller('NameCtrl', function($scope){
//code
});
If need different module then need different name . 如果需要不同的模块则需要不同的名称 。 Can use different module for those application that are module based application. 可以为基于模块的应用程序使用不同的模块。
解决方案6
0 2016-03-25 14:34:48
You cannot have two modules with the same name. 您不能有两个名称相同的模块。 In case your project is structured in a way, that truly prevents you from using just one module, you could to this. 如果您的项目以某种方式结构化，而这确实阻止了您仅使用一个模块，则可以这样做。
var module2 = angular.module('myModule2',[]);
module2.controller('NameCtrl',function($scope) {...});
var module1 = angular.module('myApp',['ngAnimate','ngTouch', 'myModule2']
.controller('MainCtrl', function($scope){...});
解决方案7
0 2016-03-25 14:41:45
To decompose your application into multiple modules you need to name the app and the component(s) something different and make your app depend on your component(s). 要将应用程序分解为多个模块，您需要为应用程序和组件命名不同的名称，并使您的应用程序依赖于您的组件。
var myComponent = angular.module('myComponent',[]);
myComponent.controller('NameCtrl',function($scope)){});
var anotherComponent = angular.module('anotherComponent',[]);
anotherComponent.controller('NameCtrl',function($scope)){});
var myApp = angular.module('myApp',['ngAnimate','ngTouch', 'myComponent', 'anotherComponent']);
myApp.controller('MainCtrl', function ($scope)){});
解决方案8
0 2016-03-25 14:50:08
That's a bit confusing, because, according to docs , by declaring module2 you are overwriting already existing myApp module, which should lead to MainCtrl to be not existing one. 这有点令人困惑，因为根据docs ，通过声明module2，您正在覆盖已经存在的myApp模块，这将导致MainCtrl不存在。 Consider trying what Wainage suggested, or, if you really need two separate modules, to do something like this: 考虑尝试Wainage的建议，或者，如果您确实需要两个单独的模块，请执行以下操作：
var module1 = angular.module('myApp.module1', []);
module1.controller('NameCtrl',function($scope){
$scope.value = 'Name controller value';
});
var myApp = angular.module('myApp', [/*Other dependencies*/'myApp.module1']);
myApp.controller('MainCtrl', function ($scope){
$scope.value = 'Main value';
});
解决方案9
0 已采纳 2016-03-25 23:47:39
You don't need to create two modules. 您无需创建两个模块。
You could implement what you need as follows. 您可以按以下步骤实现所需的功能。
var myComponent = angular.module('myComponent',[]);
myComponent.controller('MainCtrl',function($scope)){
};
myComponent.controller('NameCtrl',function($scope)){
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.