Im new to angular js.
Can anyone please tel me why i get an error saying functions in the factory cannot be accessed from the controller.
Error: UserService.getAllCustomers is not a function
This happens when I add
App.service('UserService', function () { })
to the controller.
If this is not added it gives
Error: [$injector:unpr] Unknown
provider:serServiceProvider<-UserService<- UserController
You should have someting like :
angular.module('MyApp')
.factory('serviceName',[
function () {
return function () {
/*your code */
};
}]);
angular.module('MyApp')
.controller('controllerName',['serviceName'
function (serviceName) {
}]);
The userService does not have the "getAllCustomers"
var App= angular.module('myApp', []);
App.controller("MyCtrl", ['UserService', function(UserService) {
UserService.getAllCustomers();
}]);
App.service('UserService', function() {
this.getAllCustomers = function() {
alert('getAllCustomers');
}
});
DEMO
Note: If you removed "UserService" from the app ,so the UserService is not available in the app, but you are injected in controller then angular will check UserService is created or not, if it is not created it will throw the error like Error:
[$injector:unpr] Unknown provider:serServiceProvider<-UserService<-
UserController
Related
I am trying to create an angular service but it is not working. I have tried numeros things and looked all over.Please help
//service
angular
.module('RDash')
.factory('googleLogin', googleLogin);
function googleLogin()
{
this.testFunc = function ()
{
console.log("THIS IS A TEST SERVICE");
}
};
Below: tryoing to call service test func
//controller
angular
.module('RDash')
.controller('ComposeCtrl', ['$scope','$rootScope','$http','googleLogin', ComposeCtrl]);
function ComposeCtrl($scope, $rootScope, $http, googleLogin) {
console.log("ComposeCTRL active");
googleLogin.testFunc(); // this doesnt work, error: "main.min.js:2 Error: [$injector:undef] http://errors.angularjs.org/1.5.8/$injector/undef?p0=googleLogin"
I feel like the issue is with injecting i just dont know where. Please help thanks
Factory needs to return the function refrence and you need to declare variable testFunc (answer to why here):
Update working snippet.
angular.module('RDash', []);
angular
.module('RDash')
.factory('googleLogin', googleLogin);
function googleLogin() {
var testFunc = function() {
console.log("THIS IS A TEST SERVICE");
}
return {
testFunc : testFunc
}
};
angular
.module('RDash')
.controller('ComposeCtrl', ['$scope', '$rootScope', '$http', 'googleLogin', ComposeCtrl]);
function ComposeCtrl($scope, $rootScope, $http, googleLogin) {
console.log("ComposeCTRL active");
googleLogin.testFunc();
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="RDash" ng-controller="ComposeCtrl"></div>
angular
.module('RDash')
.factory('googleLogin', googleLogin);
function googleLogin() {
var testFunc = function() {
console.log("THIS IS A TEST SERVICE");
}
return {
testFunc: testFunc
}
};
I am trying to create and use a new service in AngularJS, however,
I get the following error -
Error message
ProjectService.one is not a function
The Javascript -
var app = angular.module('app', ['ngRoute']);
app.service('ProjectService', function () {
this.one = function one() {
console.log('test service');
};
});
app.controller('ProjectsController', ['$scope', function (ProjectService, Test) {
ProjectService.one();
}]);
There is something wrong in your controller declaration. Your ProjectService parameter matches the $scope service. Do this instead;
app.controller('ProjectsController', ['$scope', 'ProjectService', 'Test', function ($scope, ProjectService, Test) {
ProjectService.one();
}]);
The service-parameters must match the array of services (same number and order)
You've to inject the ProjectService and other required dependent modules as mentioned below:
app.controller('ProjectsController', ['$scope','ProjectService','Test', function ($scope,ProjectService, Test) {
ProjectService.one();
}]);
I defined a factory that makes a get request but when I inject it in a controller it always throws an undefined error.
This is the factory:
(function() {
'use strict';
var app = angular
.module('myApp');
app.factory('homeFactory', homeFactory);
function homeFactory ($q, $http, $location) {
var data = {};
data.getProducts = getProducts;
function getProducts() {
return $http.get('http://localhost:8000/api/v1/products')
.error(errorMessage);
}
function errorMessage(response) {
console.log('There was an error', response);
}
return data;
}
})();
This is the controller:
(function() {
'use strict';
var app = angular
.module('myApp');
app.controller('homeController', homeController);
homeController.$inject =[homeFactory];
function homeController(homeFactory) {
var home = this;
homeFactory.getProducts()
.success(success);
function success(jsonData, statusCode) {
console.log('The request was successful', statusCode);
console.dir(jsonData);
home.products = jsonData;
}
}
})();
It appears to be ok, but the console throws:
Uncaught ReferenceError: homeFactory is not defined
The problem is in your DI annotation. You should only use strings
homeController.$inject = ['homeFactory'];
See https://docs.angularjs.org/guide/di#-inject-property-annotation
The $inject property is an array of service names to inject.
The controller function supports dependency injection. You don't need to use the $injector directly. Try this:
var app = angular
.module('myApp');
app.controller('homeController', homeController);
function homeController(homeFactory) {
var home = this;
homeFactory.getProducts()
.success(success);
function success(jsonData, statusCode) {
console.log('The request was successful', statusCode);
console.dir(jsonData);
home.products = jsonData;
}
}
The angular runtime will find the homeFactory service, and automatically pass it to your controller function when it's called.
In controller you shall put factory in dependecies
app.controller('homeController', ['homeFactory', '$scope',
function (homeFactory, $scope){
//scope code goes here
}]
);
I have a very simple service and a controller attempting to get some information from it, but I keep getting .methodName is not a function.
Here is the service, apiService.js :
(function (module) {
function api() {
var sharedService = {};
sharedService = {
getAll: function () {
return 'test';
}
};
return sharedService;
}
module.factory("api", api);
}(angular.module("anbud")));
Then I attempt to use my method getAll in the controller, like this:
(function () {
'use strict';
angular.module('anbud')
.controller('BasicExampleCtrl', ['$scope', 'api', function (api, $scope) {
// on successfull request
function onJson(json) {
$scope.data = json;
}
// error getting json
function onError() {
throw 'error getting json';
}
function initialize() {
api.getAll()
.then(onJson, onError);
}
initialize();
}]);
}());
But I get the error:
TypeError: api.getAll is not a function
at initialize (basic-example.js:67)
Any help is appreciated thank you.
You have interchanged the dependencies sequence inside controller factory function, the sequence must be same as they are included in DI array while injecting in function.
Code
.controller('BasicExampleCtrl', ['$scope', 'api', function ($scope, api) { //<- first $scope then api.
try it like this:
.controller('BasicExampleCtrl', ['$scope', 'api', function ($scope,api) {
I am new to angulerJS. i have defined a factory to get data from API but when i try to put the factory in a controller i got error.
That is the factory code.
(Function () {
var CategoriesFactory = function($http) {
var factory = {};
factory.getCategorys = function(account_id){
return $http.get('http://localhost:18678/api/Transaction?account_id=2');
};
factory.getTransaction = function(acc_id){
return $http.get('http://localhost:18678/api/Transaction?acc_id=2');
};
factory.getTransactionInCategory = function(category_id, from_date, to_date){
return.$http.get('http://localhost:18678/api/transaction?category='+category_id+'&account=2&from=2015-01- 01&to=2015-12-30');
};
return factory;
};
angular.module('AccApp').factory('CategoriesFactory', CategoriesFactory);
}());
here is the controller.
app.controller('CategoriesController',
function ($scope, $routeParams, $http, CategoriesFactory) {
})
and here is the error.
Unknown provider: CategoriesFactoryProvider <- CategoriesFactory
I guess you must have forgot to inject AccApp into your mai module where you have defined your app.
angular.module("app", ['AccApp']);
Please do something like this.
Hope this helps!
Why are you trying to write angular code in a wierd way ?
The goal of angular is the simplicity
var app = angular.module('AccApp',[]);
app.factory('CategoriesFactory',function($http){// you can cut and paste this factory into a seperate file if you wish
return{
getCategorys:function(account_id){
return $http.get('http://localhost:18678/api/Transaction?account_id=2');
},
getTransaction:function(acc_id){
return $http.get('http://localhost:18678/api/Transaction?acc_id=2');
},
getTransactionInCategory : function(category_id, from_date, to_date){
return.$http.get('http://localhost:18678/api/transaction?category='+category_id+'&account=2&from=2015-01- 01&to=2015-12-30');
};
}
});
Now you can Inject this factory into your controller simply:
app.controller('CategoriesController',function ($scope, $routeParams, $http, CategoriesFactory){
console.log(CategoriesFactory.getCategorys(getCategorys));
});