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"];
}());
Related
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
}]);
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);
I am getting an error TypeError: Cannot read property 'get' of undefined.i have tried so many ways but not able to solve.
mycode is login.controller.js
(function () {
'use strict';
angular
.module('app')
.controller('LoginController', LoginController);
LoginController.$inject = ['$location', 'AuthenticationService', 'FlashService'];
function LoginController($location, AuthenticationService, FlashService) {
var vm = this;
vm.login = login;
(function initController() {
// reset login status
AuthenticationService.ClearCredentials();
})();
function login() {
var usename=vm.username;
var password=vm.password;
vm.dataLoading = true;
$http.get('http://localhost:8080/ProjectManagement/REST/Login/Check?usename='+usename+'&password='+password+'').success(function(data, status, headers, config,response){
if (data=="0")
{
}
else
{
}
}).error(function(data, status, headers, config,response) {
});
};
}
})();
You missed to add $http dependency inside you controller, make sure all the dependencies are injected before using it.
Code
LoginController.$inject = ['$location', 'AuthenticationService', 'FlashService', '$http'];
function LoginController($location, AuthenticationService, FlashService, $http) {
I am new to Angular JS.
Here is my issue.
I am trying to create a factory .
But when I am calling factory it gives me an error
-Error undefined is not an object (evaluating: myService.getProjects)
Code:
myApp.factory('myService', function() {
return {
getProjects: function() {
return "Test";
}
};
});
myApp.controller('homeController',['$scope',function($scope,myService)
{
$scope.projects=myService.getProjects();
$scope.message="homeController";
}]);
You forgot to inject your service. Try this:
myApp.controller('homeController', ['$scope', 'myService', function($scope, myService) {
$scope.projects = myService.getProjects();
$scope.message = "homeController";
}]);
I am trying to call a scope function inside the controller. My aim is to call the function in the load itself.
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.functionname();
$scope.functionname = function() {}
});
You can directly call the function in controller.
app.controller('customersCtrl', function($scope, $http) {
functionname();
function functionname {
//do something.
}
});
If you are looking to reuse the function outside controller then use Service as controllers are not injectable.
Read johnpapa style guide which shows best practices: https://github.com/johnpapa/angular-styleguide
app.controller('customersCtrl', function(someService) {
var vm = this;
activate();
function activate() {
// Do something.. You can get the data from your service
}
});
Then do your $http in services then inject it in your controller/s.
Best way is to use services:
var app = angular.module('myApp', []);
app.service('SomeService', ['$state', function ($state) {
this.someFunction = function() {
return "some value";
};
}]);
app.controller('customersCtrl', function($scope, $http, SomeService) {
SomeService.someFunction();
});