I'm in the process of developing a website with a single-page application setup. I'm utilizing Node.js for the backend and Angular for the frontend. The challenge I'm facing is displaying a specific div when a user is not logged in, and switching to another div once the user logs in. What would be the most effective approach to achieve this?
Based on my current understanding, I've been using the ng-if attribute on both divs to toggle their visibility based on whether the user is logged in or not. I have an Angular function named isloggedin() for verifying the session.
Therefore, I used
<div ng-if="!checkLoggedin()"><div ng-if="checkLoggedin()">Initially, when the page loads without the user being logged in, the conditions work as expected. However, after logging in, the second div doesn't appear. Is my expectation incorrect, or is there a better way to handle this? I've checked the function's value, and it provides data in one condition and 0 in the other. Have I made a mistake somewhere?
Below is the conditional code snippet:
var checkLoggedin = function ($q, $timeout, $http, $location, $rootScope) {
var deferred = $q.defer();
$http({
method: 'GET',
url: "http://localhost:3000/loggedin"
}).success(function (user) {
if (user !== '0') {
$rootScope.message = 'You are logged in.';
$timeout(deferred.resolve, 0);
deferred.resolve();
$location.url('/home');
} else {
$rootScope.message = 'You need to log in.';
$timeout(function () {
deferred.reject();
}, 0);
deferred.reject();
$location.url('/login');
};
});
Here is the form code:
<form action="/#/home" ng-submit="login(user)">
<!-- Form fields omitted for brevity -->
</form><!-- /form -->