CODEWITHSUNDEEP
javascriptangularjs
CodeMed
CodeMed

Reputation: 9191

instantiate $scope in module with multiple controllers

How do I instantiate $scope for an angularjs module that has multiple controllers? Currently, I am getting the following error message: 

Error: [$injector:modulerr] Failed to instantiate module hello due to:
[$injector:modulerr] Failed to instantiate module navigation due to:
[$injector:modulerr] Failed to instantiate module $scope due to:
[$injector:nomod] Module '$scope' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

The structure of the app is as follows:

The hello module is defined as: 

'use strict';
/** * Main module of the application. */
angular
.module('hello', ['ngAnimate', 'ngRoute', 'ngTouch', 'auth', 'home',      
                    'secure', 'public1', 'navigation', 'ui.bootstrap' ])
.config(function ($routeProvider, $httpProvider, $locationProvider) {
    //a bunch of config stuff like routeProvider, etc.
})
.run(['$cookies', function($cookies) {
    //some startup stuff like setting default values for cookies, etc.
}]);

navigation.js is defined as: 

'use strict';
angular
.module('navigation', ['$scope', 'auth', 'modalService', 'ngRoute', 'ngAnimate', 'ui.bootstrap'])
.controller('navigation', function($scope, auth, modalService, $route, $uibModal) {
    // code for various stuff, 
    //  including code calling the second controller below
    $scope.someVariable = 'some value';
});

// Please note that $uibModalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.
angular.module('navigation', ['$scope', '$uibModalInstance', 'items'])
.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {  
    //code that is controlled by code from the preceding controller
    $scope.someOtherVariable = 'some other value'; 
});

Note that, when i remove $scope from the injection arrays as per comments below, I get the following error at the two lines $scope.someVariable = 'some value' and $scope.someOtherVariable = 'some other value': 

'$scope' is not defined.

Upvotes: 0

Views: 187

Answers (2)

MKoosej
MKoosej

Reputation: 3696

There's two concepts here that you are mixing up. Declaring the list of dependencies for your angular module(app) and injecting them to your controller or factory.

Declaring dependency with your module is done using:

angular.module('myMoudle', ['anotherModule', 'andAnotherModule'])

While injecting them to your controller or factory is done in controller/factory function:

myModule.controller('MyController', ['$scope', 'anotherModule', function($scope, anotherModule) {});

Note here myModule is already defined and there's no reason to redefine it .you can also access your already defined module using this syntax:

angular.module('myModule', []).controller(...)

A more advance way of injecting dependency modules is using $inject. You can find more info about Angular DI here

Upvotes: 1

Pavlo Sobchuk
Pavlo Sobchuk

Reputation: 1564

There are several mistakes initializing your controllers:

This code:

angular.module('navigation', ['$scope', '$uibModalInstance', 'items'])
.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items){  
    //code that is controlled by code from the preceding controller
});

Should be rewritten in the following way:

angular.module('navigation', [])
.controller('ModalInstanceCtrl', [ '$scope', '$uibModalInstance, 'items',
    function($scope, $uibModalInstance, items) { // go with your code here
}]);

So basically you have to move all your injections related to controller out from module instantiation and set it into controller one.

Upvotes: 0

Related Questions