Refer to Controller in sub-module angularjs

Question

I have two modules A and B. There is controller in moduleA called moduleAController

How can I invoke the controller in moduleA in my html?

Below is the code snippet but its not working. I just wants to use my controller in my html directly.

var moduleA =angular.module("ModuleA");
var moduleB =angular.module("ModuleB",["moduleA"]);
var myapp=angular.module("MyApp",["moduleB"])

<html ng-app="myapp">
    <body ng-controler="moduleAController">

    </body>
</html>

score 1 · Accepted Answer · edited May 23 '17 at 11:53

duplicate of this : how to reference a controller inside a sub-module in angularjs

another solution is here:

angular.module('myApp', []);
angular.module('myApp.myModule');

  angular.module('myApp.myModule')
       .constant('myModuleConst', {
  partialPath: 'path/to/partials/'
        });


  angular.module('myApp', [
       'myApp.nonsense', 
       'myApp.apparel', 
       'myApp.sounds', 
       'myApp.people']);

here is the reference document: https://www.safaribooksonline.com/blog/2014/03/27/13-step-guide-angularjs-modularization/

score 0 · Answer 2 · answered Apr 29 '16 at 06:28

You have many typos in code. Things like "myapp" and "MyApp", "moduleB" and "ModuleB" are not the same and needs to be consistent. Correct ModuleA definition should be angular.module("ModuleA", []).

Once you fix those problems it will work:

var moduleA = angular.module("ModuleA", []);
moduleA.controller('moduleAController', function($scope) { $scope.name = 'controllerA'})

var moduleB = angular.module("ModuleB", ["ModuleA"]);
var myapp = angular.module("MyApp", ["ModuleB"])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="MyApp">
    <body ng-controller="moduleAController">
    {{ name }}
    </body>
</html>

score 0 · Answer 3 · answered Apr 29 '16 at 06:31

You have some typos, camel case problems and you didn't really post all your code (since your using declared modules).

Anyway, here is a working example:

Html:

<div ng-app="myapp">
  <div ng-controller="moduleAController as moduleACtrl">
    <span>{{moduleACtrl.test}}</span>
  </div>
  <div ng-controller="moduleBController as moduleBCtrl">
    <span>{{moduleBCtrl.test}}</span>
  </div>
  <div ng-controller="appController as appCtrl">
    <span>{{appCtrl.test}}</span>
  </div>
</div>

JS:

angular.module("moduleA", []).controller('moduleAController', function() {
  this.test = 'Works - Module A';
});

angular.module("moduleB", ["moduleA"]).controller('moduleBController', function() {
  this.test = 'Works - Module B';
});

angular.module("myapp", ["moduleB"]).controller('appController', function(){
  this.test = 'Works - App Controller';
});

JSFIDDLE.

score 0 · Answer 4 · answered Apr 29 '16 at 06:37

You are having a typing error, also there is missing dependency array in definition of ModuleA.

var moduleA = angular.module("ModuleA",[]);
moduleA.controller('moduleAController',function($scope){
  console.log('moduleAController');
});

var moduleB = angular.module("ModuleB",["ModuleA"]);
var myapp=angular.module("MyApp",["ModuleB"]);

you can refer to plunker https://plnkr.co/edit/sBdu1J?p=preview

Refer to Controller in sub-module angularjs

4 Answers4