How to Integrate two modules in AngularJS
Question
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
<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
Please let me know how to fix this. Thanks in advance
9 answers
solution1
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.
solution2
1 2016-03-25 14:27:12
You don't need 2 modules.
module1.controller('NameCtrl',function($scope)){
});
is what you want
solution3
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. 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 .
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 .
Otherwise, if you need for a new module, you need to assign it a different name and bootstrap it manually via angular.bootstrap
solution4
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)){
});
solution5
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.
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.
solution6
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){...});
solution7
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)){});
solution8
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. Consider trying what Wainage suggested, or, if you really need two separate modules, to do something like this:
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';
});
solution9
0 ACCPTED 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)){
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.