I have a baseController and a childController
Whenever I add modules to the baseController the app fails with the error:
Argument 'childController' is not a function, got undefined
EDIT: added a plnkr
http://plnkr.co/edit/mi9Ytv0HaqE47ENod4Gn
So this works:
angular
.module('app')
.controller('BaseController', baseController);
angular
.module('app', ['ui.grid', 'ui.grid.pagination'])
.controller('ChildController', childController)
childController.$inject = ['$controller'];
function childController($controller) {
var self = this;
var baseController = $controller('BaseController', {
$scope: self
});
But this below does not work: (note the add of the 'ui.bootstrap' in the baseController module section....)
angular
.module('app', ['ui.bootstrap'])
.controller('BaseController', baseController);
angular
.module('app', ['ui.grid', 'ui.grid.pagination'])
.controller('ChildController', childController)
childController.$inject = ['$controller'];
function childController($controller) {
var self = this;
var baseController = $controller('BaseController', {
$scope: self
});
You are defining the app module twice. I'm not clever enough to determine what's happening, but it should probably look like this instead:
angular
.module('app', ['ui.grid', 'ui.grid.pagination'])
.controller('BaseController', baseController)
.controller('ChildController', childController);
For inheritance you can use standard JavaScript inheritance patterns. Here is a demo which uses $injector.
function Parent($scope) {
$scope.name = 'Human';
$scope.clickParent = function() {
$scope.name = 'Clicked from base controller';
}
}
function Child($scope, $injector) {
$injector.invoke(Parent, this, {$scope: $scope});
$scope.name = 'Human Child';
$scope.clickChild = function(){
$scope.clickParent();
}
}
Child.prototype = Object.create(Parent.prototype);
Related
I have tried creating a controller using meanjs.org. The controller is working fine with the other existing controllers but it is not working fine with new one I have created, Help would be appreciated, Thank you.
angular.js:12808 Error: [ng:areq] Argument
'TestownerControllerController' is not a function, got undefined
http://errors.angularjs.org/1.4.14/ng/areq?p0=TestownerControllerController&p1=not%20aNaNunction%2C%20got%20undefined
this is my controller code
(function() {
'use strict';
angular.module('users').controller('TestownerControllerController', TestownerControllerController);
TestownerControllerController.$inject = ['$scope'];
function TestownerControllerController($scope) {
var vm = this;
// Testowner controller controller logic
// ...
init();
function init() {
}
}
})();
In your case you miss [] where you define user app angular.module('users')...
[]: it's required and we use it to inject other modules.
also you can set a config in your app like this:
app.config(["$controllerProvider", "$compileProvider", "$filterProvider", "$provide", function ($stateProvider, configs, $controllerProvider, $compileProvider, $filterProvider, $provide) {
app.controller = $controllerProvider.register;
app.directive = $compileProvider.register;
app.filter = $filterProvider.register;
app.factory = $provide.factory;
app.service = $provide.service;
app.constant = $provide.constant;
}]);
This config help you to register a module with others dependencies.
//our main app
var app = angular.module('users', [])
//our controller
function testController($scope) {
function init() {
//somthing
}
init();
}
testController.$inject = ['$scope'];
app.controller('testController', testController);
I have created the service but i am not getting how use this service in my controller.
(function(){
'use.strict';
angular
.module('app.core')
.factory('shareBtwnCtrlr', shareBtwnCtrlrService);
/** #ngInject */
function shareBtwnCtrlrService() {
shareBtwnCtrlr = function($scope, $rootScope){
$scope.value = $rootScope.test;
}
return shareBtwnCtrlr;
}
})();
In the above code $rootScope.test is coming from one controller and now i have to use this $scope.value in another controller using this service. The another controller is like below
(function (){
'use strict';
angular.module('app.product')
.controller('ProductController', ProductController);
/** #ngInject */
//ProductController.$inject = ['$http', '$location', '$scope'];
function ProductController($http, $location, $rootScope, $scope, $localStorage, $interval, $timeout,$mdDialog, $document, shareBtwnCtrlr){
var vm = this;
}
})();
You got two modules, so dependency injector can't inject your service from app.core to app.product.
Try to create new module
var app = angular.module('app', ['app.core','app.product']);
and then
angular.module('app').factory('shareBtwnCtrlr', shareBtwnCtrlrService);
Only a service in the same module can be injected to the controllers and directives of the module.
The new module should be added to the app to expand its capabilities.
angular.module('app.core')
.factory('shareBtwnCtrlrService', function() {
var shareBtwnCtrlrService = this;
shareBtwnCtrlrService.value = function(){
//do something
}
return shareBtwnCtrlrService;
}
};
angular.module('app.product')
.factory('productService', function() {
var productService = this;
productService.value = function(){
//do something
}
return productService;
}
};
Now to use the service in the core and product modules, we create app module including both in it
angular.module('app', ['app.product', 'app.core'])
.controller('ProductController', ['shareBtwnCtrlrService', 'productService', function (shareBtwnCtrlrService, productService) {
// ...do something
}]);
Was building out an angular application, but am getting error undefined with the service or factory. Specifically "can not read property of setName undefined". I have went here to figure out my error. Even changed around my syntax figuring I maybe had something out of place but still throwing an undefined error.
Here is the controller:
(function() {
"use strict";
angular
.module("app", [])
.controller("mainCtrl", ["$scope", mainCtrl]);
function mainCtrl($scope, productService) {
$scope.testService = productService.setName("Data Service");
}
}());
Here is the service script:
(function() {
"use strict";
angular
.module("app")
.service("productService", function() {
var serviceObj = {};
serviceObj.name = '';
serviceObj.setName = function(newName) {
serviceObj.name = newName;
};
return serviceObj;
});
}());
Originally, I had the service as :
(function() {
"use strict";
angular
.module("app")
.service("productService", setName);
function setName(newName) {
var serviceObj = {};
serviceObj.name = '';
serviceObj.setName = function(newName) {
serviceObj.name = newName;
};
return serviceObj;
}
}());
I've had this problem recently and it seems to be that the function must be defined before the controller is created. I would recommend doing it the following way:
(function () {
"use strict";
//function
function mainCtrl($scope, productService) {
$scope.testService = productService.setName("Data Service");
}
//Controller and Module Init
angular
.module("app", [])
.controller("mainCtrl", mainCtrl);
//Inject requirements (This is needed for Minification)
mainCtrl.$inject = ["$scope", "productService"];
}());
I am using $controller service to inherit controller.
I have something like this
angular.module('myModule', ['someModule'])
.controller('parentController', parentController)
.controller('childController', childController);
parentController.$inject = [ '$scope', 'someModule.defaultService'];
childController.$inject = [ '$scope', 'someModule.myService'];
function parentController($scope, defaultService) {
$scope.value = defaultService.someMethod();
}
function childController($scope, myService) {
var viewModel = this;
var ctrl = $controller('parentController', {
$scope: $scope, defaultService:myService
});
angular.extend(viewModel, ctrl);
}
I want to parentController using myService insted of it's defaultService. But it doesn't work. How can i solve this problem?
uses the correct injection name :
var ctrl = $controller('parentController', {
$scope: $scope, **defaultService**:myService
});
But what you're doing seems more of an hack than anything else imho.
I have 2 controllers defined:
var myApp = angular.module('nestedControllersModule',[]);
myApp.controller('ParentController', ['$scope', function($scope) {
}]);
myApp.controller('ChildController', ['$scope', '$injector', function($scope, $injector) {
$injector.invoke(ParentController, this, {$scope: $scope});
}]);
This gives: ReferenceError: ParentController is not defined.
This code works only if ParentController is defined as:
function ParentController($scope) {}
I am trying to inject the parent in the child as then I can inherit the common functions defined in the parent.
var myApp = angular.module('nestedControllersModule',[]);
myApp.controller('ParentController', ['$scope', function($scope) {
$scope.name = 'ParentName';
$scope.Type = 'ParentType';
$scope.clickme = function() {
alert('This is parent controller "ParentController" calling');
}
}]);
myApp.controller('ChildController', ['$scope', '$injector', '$ParentController', function($scope, $injector, $ParentController) {
$injector.invoke(ParentController, this, {$scope: $scope});
$scope.name = 'Child';
}]);
myApp.controller('ParentController', ['$scope', function($scope) {
}]);
myApp.controller('ChildController', ['$scope', 'ParentController', function($scope, ParentController) {
// ok now you have ParentController
}]);
But I think you need to use Services to share data/functions between Controllers or using PubSub model:
What's the correct way to communicate between controllers in AngularJS?
This reduces coupling between parts of your app.
This is a basic workaround to achieve what you're after:
var myApp = angular.module('nestedControllersModule',[]);
myApp.factory('ParentControllerFactory', function () {
function ParentControllerFactory($scope) {
$scope.name = 'ParentName';
$scope.Type = 'ParentType';
$scope.clickme = function() {
alert('This is parent controller "ParentController" calling');
}
}
return (ParentControllerFactory);
})
.controller('ParentController', ['$scope', '$injector', 'ParentControllerFactory', function ($scope, $injector, ParentControllerFactory) {
$injector.invoke(ParentControllerFactory, this, {
$scope: $scope
});
}])
.controller('ChildController', ['$scope', '$injector', 'ParentControllerFactory', function ($scope, $injector, ParentControllerFactory) {
$injector.invoke(ParentControllerFactory, this, {
$scope: $scope
});
}]);
I say workaround because it's probably worthwhile looking into properly implementing a service to manage any commonality as previously mentioned (or better yet, splitting commonality into directives, clickme for example is a good candidate)
...also note that $injector.invoke(ParentControllerFactory as it is above will most likely chuck a hissy fit if/when you minify your scripts later on, so be careful where and how it used.
Consider using the Mixin pattern possible by using the $controller service.
In your example, you would replace the $injector service with the $controller service:
var myApp = angular.module('nestedControllersModule',[]);
myApp.controller('ParentController', ['$scope', function($scope) {
$scope.name = 'ParentName';
$scope.Type = 'ParentType';
$scope.clickme = function() {
alert('This is parent controller "ParentController" calling');
}
}]);
myApp.controller('ChildController', ['$scope', '$controller', '$ParentController', function($scope, $controller, $ParentController) {
$controller('ParentController',{$scope: $scope})
$scope.name = 'Child';
}]);
This is a good overview of using the $controller service:
http://vadimpopa.com/split-large-angularjs-controllers-using-the-mixin-pattern/