2

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

Improve this question
0

9 Answers 9

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

You don't need 2 modules.

module1.controller('NameCtrl',function($scope)){

    });

is what you want

Improve this answer

Comments

1

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

Improve this answer

Comments

0

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)){

};
Improve this answer

Comments

0

This is one you looking for ?

var modules = angular.module('myApp',['ngAnimate','ngTouch']
  .controller('MainCtrl', function ($scope)){


 });

  modules.controller('NameCtrl',function($scope)){

});
Improve this answer

Comments

0

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){...});
Improve this answer

Comments

0

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)){});
Improve this answer

Comments

0

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';
});
Improve this answer

Comments

0

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.

Improve this answer

Comments