Service undefined when injected into controller - javascript

I have a controller that I have injected a factory into but it comes back as undefined when I call a method on that factory. Not sure what I am doing wrong here. Any help would be appreciated.
Factory:
(function(){
'use strict';
// Declare factory and add it 'HomeAutomation' namespace.
angular.module('HomeAutomation').factory('AuthenticationService', ['$http','$localStorage', '$window', function($http, $localStorage, $window){
var service = {};
service.login = Login;
service.logout = Logout;
service.parseJWT = parseJWT;
service.loginStatus = loginStatus;
return service;
function Login(email, password, callback){
$http.post('api/user/login', {email: email, password: password})
.success(function(res){
// Login successful if there is a token in the response.
if(res.token){
// store username and token in local storage to keep user logged in between page refreshes
$localStorage.currentUser = { email: email, token: res.token };
// add jwt token to auth header for all requests made by the $http service
$http.defaults.headers.common.Authorization = 'Bearer ' + res.token;
callback(true);
}else{
callback(res);
}
}).error(function(err){
console.log(err);
});
}
function Logout(){
$localStorage.currrntUser
}
function parseJWT(token){
var base64URL, base64;
base64URL = token.split('.')[1];
base64 = base64URL.replace('-', '+').replace('_', '/');
console.log(JSON.parse($window.atob(base64)));
}
function loginStatus(){
if($localStorage.currentUser){
return true;
}else{
return false;
}
}
}]);}());
Controller:
(function(){
angular.module('HomeAutomation')
.controller('loginController', ['$scope', '$location', 'AuthenticationService', function($scope, $location, $localStorage, AuthenticationService){
$scope.isLoggedIn = AuthenticationService.logout();
$scope.logUserIn = function(){
AuthenticationService.login($scope.login.email, $scope.login.password, function(result){
if(result === true){
$location.path('/');
}else{
console.log(result);
}
});
};
$scope.logUserOut = function(){
AuthenticationService.logOut();
}
}]);}());
This is the line that is causing the err:
$scope.isLoggedIn = AuthenticationService.logout();
Apparently "AuthenticationService" is undefined. Not sure why.
Thanks in advance.

You messed up with depedency sequence, you need to remove $localStorage from controller factory function since $localStorage isn't use anywhere in controller & haven't injected in DI array.
.controller('loginController', ['$scope', '$location', 'AuthenticationService',
function($scope, $location, AuthenticationService){
//^^^^^^^^^^removed $localStorage dependency from here
NOTE: Always make sure when you inject any dependency in DI array, they should used in same sequence in controller function

The injection is not good :
.controller('loginController', ['$scope', '$location', 'AuthenticationService', function($scope, $location, $localStorage, AuthenticationService){
Try with this :
.controller('loginController', ['$scope', '$location', '$localStorage', 'AuthenticationService', function($scope, $location, $localStorage, AuthenticationService){
I don't know which builder you use, but for example with Gulp, you can use gulp-ng-annotate that will do the job for you so that you can only write :
.controller('loginController', function($scope, $location, $localStorage, AuthenticationService){
without the array. The ng-annotate will take care of the rest.

Related

Cannot read propery getRiders of undefined

I want to call a service which I defined in DeliverService but when I called it from controller it gives an error of Cannot read propery getRiders of undefined , NO idea why this happened :|
DeliverService.js
angular.module('Deliver')
.service('DeliverService', ['$http', '$state', '$resource', '$q', 'SettingService', '$localStorage', "MessageService", function($http, $state, $resource, $q, SettingService, $localStorage, MessageService) {
var service = {
getRiders : function(){
return $http.get("Hero.json");
//return $http.get(SettingService.baseUrl + "api/orders");
} }
return service;
}]);
DeliverCtrl.js
use strict';
angular.module('Deliver').controller('DeliverCtrl',['$scope','$state', "SettingService","DeliverService", function($scope, $state, $ionicModal, MessageService, SettingService,DeliverService) {
$scope.riders = [];
DeliverService.getRiders().then(function(response){
$scope.riders = response.data.data;
}, function(error){
});
}]);
Your dependencies aren't in the matching order here. Hence, DeliverService isn't actually injected.
Your controller code should look something like this:
angular.module('Deliver').controller('DeliverCtrl',
['$scope','$state', '$ionicModal', 'MessageService', 'SettingService','DeliverService',
function($scope, $state, $ionicModal, MessageService, SettingService, DeliverService) {
$scope.riders = [];
DeliverService.getRiders().then(function(response){
$scope.riders = response.data.data;
}, function(error){});
}]);
In DeliverCtrl.js
The injection Parameter and function parameters do not match
It should be like this
['$scope','$state','$ionicModal','MessageService','SettingService','DeliverService', function($scope, $state, $ionicModal, MessageService, SettingService,DeliverService)

AngularJS: How to fetch data of specific id from JSON file

In my controller class I fetch the id of specific user from URL and then send it to service OrderService Now in the service I want to retrieve the data of this id from JSON file , How can I achieve this ?
OrderCtrl
'use strict';
angular.module('Orders').controller('OrderCtrl', ['$scope', '$state', "SettingService", "OrderService","$stateParams", function($scope, $state, SettingService, OrderService,$stateParams) {
var OrderId = $stateParams.orderId;
$scope.orders = [];
OrderService.getOrderDetails(OrderId).then(function(response){
$scope.orders = response.data.data;
}, function(error){
})
}]);
OrderService.js
angular.module('Orders')
.service('OrderService', ['$http', '$state', '$resource', '$q', 'SettingService', '$localStorage', "MessageService",
function($http, $state, $resource, $q, SettingService, $localStorage, MessageService) {
var service = {
getOrderDetails : function(OrderId){
Here I want to retrieve data from JSON file
});
}
}
return service;
}]);
Try to use something like this
'use strict';
angular.module('Orders').controller('OrderCtrl', ['$scope', '$state', "SettingService", "OrderService", "$stateParams", function ($scope, $state, SettingService, OrderService, $stateParams) {
var OrderId = $stateParams.orderId;
$scope.orders = [];
OrderService.getOrderDetails(OrderId).then(function (response) {
$scope.orders = response.data.data;
});
}]);
// I act a repository for the remote json collection.
angular.module('Orders').service("OrderService", ['$http', '$state', '$resource', '$q', 'SettingService', '$localStorage', "MessageService",
function ($http, $state, $resource, $q, SettingService, $localStorage, MessageService, handleResponse) {
// Return public API.
return ({
getOrderDetails: getOrderDetails
});
// I get all the remote collection.
function getOrderDetails(OrderId) {
var request = $http({
method: "get",
url: '/ajax/order/details', // for example
params: {'id': OrderId}
});
return (request.then(handleResponse.success, handleResponse.error));
}
}]);
angular.module('Orders').service('handleResponse', function ($http, $q, $location) {
return {
error: function (response) {
// The API response from the server should be returned in a
// nomralized format. However, if the request was not handled by the
// server (or what not handles properly - ex. server error), then we
// may have to normalize it on our end, as best we can.
if (!angular.isObject(response.data) || !response.data.message) {
// Something was wrong, will try to reload
return ($q.reject("An unknown error occurred."));
}
// Otherwise, use expected error message.
return ($q.reject(response.data.message));
},
success: function (response) {
return (response.data);
}
};
});

How to access $scope variable declared in service callback function in ng-init or ng-checked

I have service.js in which authentication takes place.On success service callback function is executed from controller.js
service.js:
'use strict';
angular.module('Authentication')
.factory('AuthenticationService', ['$http', '$cookieStore', '$rootScope','$timeout', '$location', '$window',
function ($http, $cookieStore, $rootScope, $timeout, $location, $window) {
var service = {};
service.Login = function (username, password, callback) {
$http.post('..json', {
headers: {
username: username,
password: password
}
})
.success(function (data, status, headers, config) {
$timeout(function () {
callback(status);
}, 1000);
});
};
return service;
}])
controller.js:
'use strict';
angular.module('Authentication').controller('LoginController', ['$scope', '$rootScope', '$location', 'AuthenticationService', '$http', '$timeout', '$window',
function ($scope, $rootScope, $location, AuthenticationService, $http, $timeout, $window) {
**$scope.name=true;**
$scope.login = function () {
AuthenticationService.Login($scope.username, $scope.password, function (response) {
if (response === 'Success') {
$http.get('..json').success(data,status,headers,config){
**$scope.value=true;**
})
} else {
alert("Error");
}
});
};
}]);
HTML :
I have 2 checkboxes linked with two $scope variable from controller-$scope.name and $scope.value
<input type="checkbox" ng-checked="name"> abc
<input type="checkbox" ng-checked="value">xyz
Now since both $scope variable is set to true both checkboxes should be initially checked....but the checkbox with $scope.name is checked and $scope.value is unchecked
Any idea about why this happens and how can I make the second check box also initially checked based on the $scope.value
here is a working version almost exactly same as your original code, the only thing i see might be wrong is if (response === 'Success'), because in my example code, the status in .success(data,status,headers,config) is a number not string like "Success", also check this official document here.

main module can't read my service

I'm trying to call a function which is in a service I have made. Whenever I try to search a username, I get an error which says "cannot read 'getUser' of undefined.
It shouldn't be undefined, I'm passing it an argument of a username it should be able to use. I can't seem to find out what's wrong with my service!
http://plnkr.co/edit/k4FD4eFuVKNvjEwKx2gs?p=preview
Any help to move forward with this would be appreciated :)
(function(){
var github = function($http){
var getUser = function(username){
$http.get("https://api.github.com/users/" + username)
.then(function(response){
return response.data; //still returns a promise
});
};
//angular invokes this, return an object which is github service
var getRepos = function(user){
$http.get(user.repos_url).then(function(response){
return response.data;
});
};
return {
getUser: getUser,
getRepos: getRepos
};
};
var module = angular.module("firstapp"); //get reference to existing module, NOT creating a new one
//register service with angular
module.factory("github", github);
}());
script.js
var app = angular.module("firstapp", []) //defining module, no dependencies (so far)
.controller("MainController", ["$scope", "github", "$interval", "$log", "$anchorScroll", "$location", function(
$scope, $http, $interval, $log, $anchorScroll, $location, github) {
$scope.search = function(username) {
$log.info("Searching for "+username);
//the first parameter to .then is only invokes onusercomplete if the get is successful
//if error, it goes to second parameter which provdes error details
github.getUser(username)
.then(onUserComplete, onError);
if (countdownInterval){
$interval.cancel(countdownInterval);
$scope.countDown = null;
}
};
Problem lies in bad sequence of dependency injection arguments.
It is:
.controller("MainController", ["$scope", "github", "$interval", "$log", "$anchorScroll", "$location", function(
$scope, $http, $interval, $log, $anchorScroll, $location, github)
Should be:
.controller("MainController", ["$scope", "github", "$interval", "$log", "$anchorScroll", "$location","$http", function(
$scope,github,$interval, $log, $anchorScroll, $location, github,$http)
Parameters must be in correct order in DI.
If you encounter errors like:
"cannot read function name of undefined"
Then you should look for function calls and see what's wrong with object from which call goes.
In this case it's something wrong with github.
The issue is in your controller definition you don't have your dependencies line up
.controller("MainController", ["$scope", "github", "$interval", "$log", "$anchorScroll", "$location", function(
$scope, $http, $interval, $log, $anchorScroll, $location, github) {
your dependencies are:
"$scope", "github", "$interval", "$log", "$anchorScroll", "$location"
but they are getting injected as
$scope, $http, $interval, $log, $anchorScroll, $location, github
You have to have the order line up otherwise you'll have the wrong dependency in the wrong variable, also you're not adding $http in your listed dependencies.
Your problem is in the getUser function. You are not returning a promise there. To work the way you are using it it should look like
var getUser = function(username){
return $http.get("https://api.github.com/users/" + username);
};
EDIT1
In your code, you were not returning a promise but the data returned by the promise.
Furthermore, you were returning that data from an anonymous callback (your function(response) {...}) to its caller (in your case then(...)
EDIT2
You should also check the way you are injecting your dependencies
.controller("MainController", ["$scope", "github", "$interval", "$log", "$anchorScroll", "$location", function(
$scope, $http, $interval, $log, $anchorScroll, $location, github) {
should be
.controller("MainController", ["$scope", '$http', "$interval", "$log", "$anchorScroll", "$location", "github", function(
$scope, $http, $interval, $log, $anchorScroll, $location, github) {
EDIT3
You should also change the getRepos method like we did for the other one from
var getRepos = function(user){
$http.get(user.repos_url).then(function(response){
return response.data;
});
to
var getRepos = function(user){
return $http.get(user.repos_url);
});

AngularJS injection Factory into Controller strange error

I've read numerous posts on stackoverflow and non of them really helped.
I have strange situation where I need to inject Factory into Controller and
everything seems regular but It doesnt work.
Here is factory:
zimmerApp.factory('AuthService', [function ($http, $sanitize) {
var sanitizeCredentials = function (credentials) {
return {
email: $sanitize(credentials.email),
password: $sanitize(credentials.password),
csrf_token: credentials.csrf_token
};
};
return {
login: function (credentials) {
var login = $http.post("/login", sanitizeCredentials(credentials));
login.success(cacheSession);
login.error(loginError);
return login;
}
};
}]);
and controller in which I need to use AuthService is :
zimmerApp.controller('loginCtrl', ['$scope', 'AuthService',
function ($scope, $location, AuthService) {
var xhReq = new XMLHttpRequest();
xhReq.open("GET", "http://" + window.location.hostname + ":8000/auth/token", false);
xhReq.send(null);
$scope.error = false
$scope.credentials = {
username: '',
password: '',
csrf_token: xhReq.responseText
};
$scope.login = function (credentials) {
AuthService.login($scope.credentials)
.success(function () {
$location.path('/');
})
.error(function (err) {
console.log('error')
});
}
}]);
The error I'm getting is
TypeError: Cannot read property 'login' of undefined
so it seems like it doesn't recognize AuthService factory for some reason.
Does anyone know what could I do to fix this, I really don't have an idea anymore.
The params being injected does not match the params in your function.
Change:
zimmerApp.controller('loginCtrl',
['$scope', 'AuthService',
function ($scope, $location, AuthService) {
To:
zimmerApp.controller('loginCtrl',
['$scope', $location, 'AuthService',
function ($scope, $location, AuthService) {
I prefer not using the inject array though:
zimmerApp.controller('loginCtrl',
function ($scope, $location, AuthService) {

Categories