Angular controller Function not defined - angularjs

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

Related

How to use service in angular.js controller?

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
}]);

Angularjs service undefined

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"];
}());

AngularJS Base Controller load module

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

AngularJS Authentication Service in a different file

I am using this tutorial to create lazy loading:
http://ify.io/lazy-loading-in-angularjs/
And this tutorial for authentication:
https://coderwall.com/p/f6brkg
I wanted to save the authentication service in a different file, say AuthenticationService.js and inject it as a dependency into my app.js. However, the app.js has to be bootstrapped, and returned before I can use the define(['app'], function(){ ... } for the service.
How can I accomplish this?
What I have so far:
app.js
define(
[
'app/scripts/routes',
'app/scripts/services/dependencyResolverFor',
'app/scripts/services/AuthenticationService',
'uiRouter'
],
function(config, dependencyResolverFor, AuthenticationService)
{
var app = angular.module('app', ['ngRoute','ui.router']);
console.log(AuthenticationService);
// Register all providers. We can now lazy load files as needed.
// Provide dependencies through the routes.js
app.config([
'$routeProvider',
'$locationProvider',
'$controllerProvider',
'$compileProvider',
'$filterProvider',
'$provide',
'$stateProvider',
function($routeProvider, $locationProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $stateProvider) {
app.controller = $controllerProvider.register;
app.directive = $compileProvider.directive;
app.filter = $filterProvider.register;
app.factory = $provide.factory;
app.service = $provide.service;
$locationProvider.html5Mode(false);
if(config.routes !== undefined) {
angular.forEach(config.routes, function(route, path) {
// Routing happens here
});
}
}
]);
// Check User
app.run( ['$rootScope', '$state', function( $rootScope, $state) {
$rootScope.$on("$stateChangeStart", function(event, currentRoute, prevRoute){
// Authenticate here and have access to the service
});
}]);
return app;
});
AuthenticationService.js (want it to be like this. Currently, it doesn't work because it says app is not defined, since it is not returned yet within app.js
define(['app'], function(app)
{
app.service('AuthenticationService', function(){
var isLogged = false;
var user = 'guest';
var username = '';
this.login = function() { isLogged = true; };
this.checkLogin = function() { return isLogged; };
});
});
You could put your AuthenticationService in a separate angular module, then make your main app depend on the sub-module (i.e. the module on which AuthenticationService is defined). something like...
angular.module('OtherModule', []).service('AuthenticationService', /* etc */);
then include the module:
var app = angular.module('app', ['ngRoute','ui.router', 'OtherModule']);
edit: you can call .name on a module object (for example, the one getting injected into app.js) to get it's name, so you don't have to hard-code the 'OtherModule' string as a dependency, you can do something like
var app = angular.module('app', ['ngRoute','ui.router', InjectedModule.name]);

Angular factory and Unknown provider error

I have 2 Angular modules. rootModule:
var myModule = angular.module('rootModule', []);
myModule.factory('mySharedService', function($rootScope) {
var sharedService = {};
return sharedService;
});
myModule.factory('getMonthlyHistoryService', function ($http, $q) {
var getMonthlyHistoryService = {};
return getMonthlyHistoryService;
});
function RandomScaleController($scope, $rootScope, sharedService) {
}
RandomScaleController.$inject = ['$scope', '$rootScope', 'mySharedService'];
and Child module:
var modal = angular.module('modal', ['rootModule', 'ui.bootstrap']);
function MomController($scope, $http, sharedService, getMonthlyHistoryService) {
}
MomController.$inject = ['$scope', '$http', 'mySharedService','getMonthlyHistoryService'];
All works fine, but if i move getMonthlyHistoryService into child module i got Error: Unknown provider: getMonthlyHistoryServiceProvider <- getMonthlyHistoryService.
How I can move getMonthlyHistoryService into child module?
How module reference should be created would be to have multiple child modules linked\imported into the parent module
You have done the reverse. You have injected parent module into child module. Now if you move your service from parent to child only this module element can access this service.
Try
var myModule = angular.module('rootModule', ['modal']);
and
var modal = angular.module('modal', ['ui.bootstrap']);
Also declare the controller using the module.controller syntax
modal.controller('MomController',['$scope', '$http', 'mySharedService','getMonthlyHistoryService',function($scope, $http, sharedService, getMonthlyHistoryService) {
}]);

Resources