Currently, when the users logs in, the login page does't redirect to the homepage.
'use strict';
angular.module('myapp').service('auth', function auth($http, API_URL, authToken, $state, $window, $q) {
function authSuccessful(res) {
authToken.setToken(res.token);
$state.go('main');
}
this.login = function (email, password) {
return $http.post(API_URL + 'login', {
email: email,
password: password
}).success(authSuccessful);
}
this.register = function (email, password) {
return $http.post(API_URL + 'register', {
email: email,
password: password
}).success(authSuccessful);
}
However, I have set my $state.go to redirect to main. Where is the problem? why is it not redirecting?
annex
here is my login.js controller, how it looks:
angular.module('myapp').controller('LoginCtrl', function ($scope, alert, auth, $auth) {
$scope.submit = function () {
$auth.login({
email: $scope.email,
password: $scope.password
})
.then(function(res) {
var message = 'Thanks for coming back ' + res.data.user.email + '!';
if (!res.data.user.active)
message = 'Just a reminder, please activate your account soon :)';
alert('success', 'Welcome', message);
})
.catch(handleError);
}
// i forgot to include this error handler in my code:
function handleError(err) {
alert('warning', 'oops there is a problem!', err.message);
}
});
Since this is an async action, angular doesn't know when the action finishes and thus when to update the $scope. For this to work you'll need to manually call $scope.apply(), but since you don't have access to the $scope in your service, you need to move the redirection logic (i.e. $state.go('main')) inside a controller, and call it like this:
angular.module('myapp').controller('LoginCtrl', function($scope, auth, $state) {
function redirect(res) {
$state.go('main');
// manually update the scope
$scope.$apply();
}
auth.login(email, password)
.success(redirect);
});
EDIT: Integrate with the given controller
angular.module('myapp').controller('LoginCtrl', function ($scope, alert, auth, $auth) {
$scope.submit = function () {
$auth.login({
email: $scope.email,
password: $scope.password
})
.then(function(res) {
var message = 'Thanks for coming back ' + res.data.user.email + '!';
if (!res.data.user.active) {
message = 'Just a reminder, please activate your account soon :)';
}
alert('success', 'Welcome', message);
return null;
})
.then(function() {
$state.go('main');
// manually update the scope
$scope.$apply();
})
// google replacement of the above commented out code bit
.catch(handleError);
}
});
EDIT 2: Use $timeout instead of $scope.$apply so you don't get $digest error.
angular.module('myapp').controller('LoginCtrl', function ($scope, alert, auth, $auth, $timeout) {
...
.then(function() {
// $timeout calls $scope.$apply() by default,
// but it does it in a safely manner - never throws a '$digest already in progress' exception
$timeout(function() {
$state.go('main');
});
})
...
Related
I just want to use load bar in my app. I got service in angularjs like this
app.service('gethostsbyip', [ '$http', '$q', function($http, $q){
this.gethostsbyip = function(hostname, username, password){
var deffered = $q.defer();
var result = $http.post(REST_API_IP + 'discover?ip=' + hostname + '&username=' + username + '&password=' + password).then(function(resp){
deffered.resolve(result);
location.href="#createvirtualization";
toastr.success('Your hosts, templates, networks have been updated!', 'Data was loaded!');
}).catch(function(e){
toastr.error('Some data in your form is incorrect. Please, try again!', 'Error!');
});
return deffered.promise;
};
}]);
And in the angular controller, I need to change flag into false value after my service (gethostsbyip.gethostsbyip) is done.
When the function runs without errors the flag changes, but I need to change the flag in case of an error in the service.
app.controller('discoverCtrl', ['$scope', '$q', function($scope, $q) {
$scope.submitButt = function(hostname, username, password){
if(!hostname || !username || !password){
}
else {
$scope.flag = true;
gethostsbyip.gethostsbyip(hostname, username, password).then(function(res){
$scope.test = false;
})
.catch(function(e){
$scope.test = false;
})
}
};
}
then event accepts two parameter.
app.controller('discoverCtrl', ['$scope', '$q', function($scope, $q) {
$scope.submitButt = function(hostname, username, password){
if(!hostname || !username || !password){
}
else {
$scope.flag = true;
gethostsbyip.gethostsbyip(hostname, username, password)
.then(
// you currently have one callback in your `then` method
function(res){
$scope.test = false;
}
// solution
, function(resForErrorCase){
$scope.test = false;
})
.catch(function(e){
$scope.test = false;
})
}
};
Promise definition reference
Reject the promise if error occurs
.catch(function(e) {
deffered.reject(e);
toastr.error('Some data in your form is incorrect. Please, try again!', 'Error!');
});
I want to handle the inactive users and keep them out as long as they are not active. Currently, I am just alerting them that they are not active and letting them log in. However, I just want to throw in a login error and keep them out as long as they are not active. By "active" I mean, they haven't activated the email token.
'use strict';
angular.module('myapp').controller('LoginCtrl', function ($scope, alert, auth, $state, $auth, $timeout) {
$scope.submit = function () {
$auth.login({
email: $scope.email,
password: $scope.password
})
.then(function(res) {
var message = 'Thanks for coming back ' + res.data.user.email + '!';
if (!res.data.user.active)
message = 'Just a reminder, please activate your account soon :)';
alert('success', 'Welcome', message);
return null;
})
.then(function() {
$timeout(function() {
$state.go('main');
});
})
.catch(handleError);
}
function handleError(err) {
alert('warning', 'oops there is a problem!', err.message);
}
});
You could always log them out immediately with $auth.logout().
My ng app is working fine, but I am trying to write a ngMock test for my controller; I am basically following along the example on angular's website: https://docs.angularjs.org/api/ngMock/service/$httpBackend
The problem I am running into is that it complains about unexpected request even when request is being expected.
PhantomJS 1.9.8 (Windows 8 0.0.0) NotificationsController should fetch notification list FAILED
Error: Unexpected request: GET Not valid for testsapi/AspNetController/AspNetAction
Expected GET api/AspNetController/AspNetAction
What I do not get is that, on the error line, why is there a "tests" word appended before my service url?
I thought it should be sending to 'api/AspNetController/AspNetAction'
What am I doing wrong here. I can't find any one else running into the same problem as me through google.
Edit: I noticed that, if i remove the sendRequest portion from my controller, and have the unit test log my request object in console, i see the following json.
{
"method":"GET",
"url":"Not valid for testsapi/AspNetController/AspNetAction",
"headers":{
"Content-Type":"application/json"
}
}
here is the controller code
angular.module('MainModule')
.controller('NotificationsController', ['$scope', '$location', '$timeout', 'dataService',
function ($scope, $location, $timeout, dataService) {
//createRequest returns a request object
var fetchNotificationsRequest = dataService.createRequest('GET', 'api/AspNetController/AspNetAction', null);
//sendRequest sends the request object using $http
var fetchNotificationsPromise = dataService.sendRequest(fetchNotificationsRequest);
fetchNotificationsPromise.then(function (data) {
//do something with data.
}, function (error) {
alert("Unable to fetch notifications.");
});
}]
);
Test code
describe('NotificationsController', function () {
beforeEach(module('MainModule'));
beforeEach(module('DataModule')); //for data service
var $httpBackend, $scope, $location, $timeout, dataService;
beforeEach(inject(function ($injector) {
$httpBackend = $injector.get('$httpBackend');
$scope = $injector.get('$rootScope');
$location = $injector.get('$location');
$timeout = $injector.get('$timeout');
dataService = $injector.get('dataService');
var $controller = $injector.get('$controller');
createController = function () {
return $controller('NotificationsController', {
'$scope': $scope,
'$location': $location,
'$timeout': $timeout,
'dataService': dataService,
});
};
}));
afterEach(function () {
$httpBackend.verifyNoOutstandingExpectation();
$httpBackend.verifyNoOutstandingRequest();
});
it('should fetch notification list', function () {
$httpBackend.expectGET('api/AspNetController/AspNetAction'); //this is where things go wrong
var controller = createController();
$httpBackend.flush();
});
});
Data service code
service.createRequest = function(method, service, data) {
var req = {
method: method, //GET or POST
url: someInjectedConstant.baseUrl + service,
headers: {
'Content-Type': 'application/json'
}
}
if (data != null) {
req.data = data;
}
return req;
}
service.sendRequest = function (req) {
return $q(function (resolve, reject) {
$http(req).then(function successCallback(response) {
console.info("Incoming response: " + req.url);
console.info("Status: " + response.status);
console.info(JSON.stringify(response));
if (response.status >= 200 && response.status < 300) {
resolve(response.data);
} else {
reject(response);
}
}, function failCallback(response) {
console.info("Incoming response: " + req.url);
console.info("Error Status: " + response.status);
console.info(JSON.stringify(response));
reject(response);
});
});
}
ANSWER:
since dataService created the finalized webapi url by someInjectedConstant.baseUrl + whatever_relative_url passed in from controller, In the test that I am writting, I will have to inject someInjectedConstant and
$httpBackend.expectGET(someInjectedConstant.baseUrl + relativeUrl)
instead of just doing a $httpBackend.expectGET(relativeUrl)
Clearly Not valid for tests is getting prepended to your url somewhere in your code. It's also not adding the hardcoded domain (see note below). Check through all your code and any other parts of the test pipeline that might be adding this to the url.
A couple of points on your code:
avoid hardcoding domain names in your code (I see you've fixed this in your updated answer)
maybe someInjectedConstant could be more explicitly named
there is no need for you to wrap $http with $q, so service.sendRequest can be:
service.sendRequest = function (req) {
$http(req).then(function (response) { // no need to name the function unless you want to call another function with all success/error code in defined elsewhere
console.info("Incoming response: " + req.url);
console.info("Status: " + response.status);
console.info(JSON.stringify(response));
return response.data; // angular treats only 2xx codes as success
}, function(error) {
console.info("Incoming response: " + req.url);
console.info("Error Status: " + response.status);
console.info(JSON.stringify(response));
});
}
I want to access an authenticated user's data from my front-end using Angular.
This is the response from Express on Node.js.
routes/dashboard.js
exports.build = function (req, res) {
res.render('dashboard', {
uid: req.user._id
});
};
I grab the uid through the ng-init directive, currently.
views/dashboard.jade
doctype html
html
head
title= title
link(href='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css', rel='stylesheet')
link(rel='stylesheet', href='/stylesheets/style.css')
block styles
body(ng-app='App', ng-controller='MainCntrl', ng-init='setUId(#{JSON.stringify(uid)})')
// some content
script(src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js')
script(src='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js')
script(src='//cdnjs.cloudflare.com/ajax/libs/q.js/1.0.1/q.js')
script(src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js')
script(src='/javascripts/ng-app.js')
However, I would like to avoid doing this.
public/javascripts/ng-app.js
var app = angular.module('App', []);
app.factory('User', function () {
return {
// Promise for retrieving JSON User data
getProperties : function (id) {
var deferred = Q.defer();
$.getJSON('/api/user/' + id
, function (data) {
deferred.resolve(data);
}).fail(function () {
deferred.reject(true);
});
return deferred.promise;
}
};
});
app.controller('MainCntrl', ['$scope', '$http', 'User', function ($scope, $http, User) {
$scope.uid, $scope.user;
$scope.setUId = function (id) {
$scope.uid = id;
};
$scope.initUser = function () {
User.getProperties($scope.uid).then(function (user) {
$scope.$apply(function () {
$scope.user = user;
});
}, function (err) {
console.log(err);
});
};
}]);
I would like to pass this uid data to Angular without having to use the ng-init directive. Is there a way to access the response data, something along the lines of:
console.log(res.body.uid);
Retrieving the uid param from the response would remove the need for the ng-init directive. How would I go about retrieving it?
A more, and perhaps elegant solution would be to have the User ID in the URL and map a route to accept an id.
Then your controller can look more like this
app.controller('MainCntrl', ['$scope', '$http', 'User','$stateParams', function ($scope, $http, User, $stateParams) {
// NOTE: I do not know which route engine you're using, though you would inject
// its parameters provider in here, to get access to the url parameter (userId) of the route
// so for this example, i have assumed ng-router hence the injection of $stateParams
// the getProperties() method here is assuming ng-routet
User.getProperties($stateParams.id).then(function (user) {
$scope.user = user;
}, function (err) {
console.log(err);
});
}]);
Angular doc states:
Angular services are singletons
I want to use the angular service as singleton, so I can access the logged-in user data every where in my application. but the serivce does not seem to return the same data, here is my codes.
Service:
angular.module("myapp", [])
.service("identity", function (){
this.token = null;
this.user = null;
});
Facotry:
.factory("authentication", function (identity, config, $http, $cookieStore) {
var authentication = {};
authentication.login = function (email, password, remember) {
var p=$http.post(config.baseUrl+"api/","email="+email+"&password="+password);
return p.then(function (response) {
identity= response.data;
if (remember) {
$cookieStore.put("identity", identity);
}
});
};
authentication.isAuthenticated = function () {
if (!identity.token) {
//try the cookie
identity = $cookieStore.get("identity") || {};
}
console.log(identity) // {token: 23832943, user: {name: something}}
return !!identity.token;
};
return authentication;
});
controller:
.controller('LoginCtrl', function ($state, $scope, authentication, identity) {
var user = $scope.user = {};
$scope.login = function () {
authentication.login(user.email, user.password, user.remember)
.then(function () {
if (authentication.isAuthenticated()) {
console.log(identity); // {token:null, user: null}
$state.transitionTo("dashboard");
}
});
};
});
The identity is injected to both authentication and controller. But the first console logs the correct user data, while the second console just logs the same data as initially defined. If the service is singleton as stated, I would expect two identity returns the same data. What am I doing wrong here?. any pointers are appreciated.
In your authentication service change
identity= response.data;
to
identity.token=response.data.token;
identity.user=response.data.user;
and things should work.
Basically what you are doing is replacing the identity object reference.