Angularjs Controller is not initialized

Question

I am working on on angularjs app and we need to integrate with another angularjs app. On click of a button on first app modal window and its content should get it form app2. I am trying below approach but app2 controller/module is not getting initialized. Here is the error

Error: [ng:areq] Argument 'AppTwoCtrl' is not a function, got undefined

Here is the code snippet.

AppOneController.js

//first module/controller
define(['main'], function(ng, main) {  // we are using require.js and all controllers are declared in main.js
angular.module('AppOne', ['ui.router', 'ui.bootstrap', 'ngRoute', 'ngAnimate'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
 //stateprovider code
  $stateProvider.state('landing', {
      url: '/landing',
      templateUrl: '../landing/AppOne.html',
      controller: 'AppOneCtrl'
    });
}
controller('AppOneCtrl', ['$scope', '$rootScope', 'inventorySvc', function($scope, $rootScope, inventorySvc) {
console.log('in the controller')

$scope.add =  function () {
        var addVCGUrl = getBaseURL() + "/../../apptwo/landing/AppTwo.html";
            var add_node_Modal = $modal.open({
                templateUrl: addVCGUrl,
                size: 'sm',
                backdrop : 'static',
                resolve:{
                 //code here
                  },
                  modalTitle: function () {
                  // cod here
                  }
                }
            });
        };
}

/landing/AppOne.html => html from the first app

  <html ng-app="AppOne">
     <div>
        <div ng-click="add()">
           <div class="addVCG">Add</div>  
       </div>
    </div>
 </html>

AppTwoController.js

// second module/controller

define(['main'], function(ng, main) {  // we are using require.js and all controllers are declared in main.js
angular.module('AppTwo', ['ui.router', 'ui.bootstrap', 'ngRoute', 'ngAnimate'])
    .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
     //stateprovider code
      $stateProvider.state('landing', {
          url: '/landing',
          templateUrl: '../landing/AppTwo.html',
          controller: 'AppTwoCtrl'
        });
    }
controller('AppTwoCtrl', ['$scope', '$rootScope', function($scope, $rootScope) {
    console.log('in the controller')
}

/landing/AppTwo.html

   <!--html from the second app-->
   <html ng-app="AppTwo">
        <div>
           You are in App2 module and apptwo controller
        </div>
    </html>

Yes it is. i forgot to add in the example code.. .I have updated now. — Kiran
– Kiran, Commented Mar 11, 2016 at 4:10
Both of your modules are missing a closing quote after ngAnimate — Travis Collins
– Travis Collins, Commented Mar 11, 2016 at 4:44
actually to make it simple i took piece of code from my project and edited little bit to shorten. because of that missing qoute. sorry for that — Kiran
– Kiran, Commented Mar 11, 2016 at 4:52

Travis Collins · Accepted Answer · 2016-03-11 12:01:18Z

2

You are attempting to use nest ng-app directives. From the ng-app docs, "AngularJS applications cannot be nested within each other." https://docs.angularjs.org/api/ng/directive/ngApp

I suggest moving AppTwoCtrl to AppOne's module.

If that is not an option, you can use an iframe in your modal to load the AppTwo url. This will include additional challenges if you're wanting to communicate data back from AppTwo to AppOne though.

answered Mar 11, 2016 at 12:01

Travis Collins

3,9954 gold badges34 silver badges45 bronze badges

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

1 Comment

Kiran Over a year ago

yes, you are right.. I have used iFrame but i get into other issues. we have changed the logic now.

Collectives™ on Stack Overflow

Angularjs Controller is not initialized

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related