Mastering AngularJS Authentication: A Step-by-Step Guide for the First Submission

I have a login function in Angularjs, but it only works when I submit it for the second time. How can I fix this issue?

Here is my code:

.controller('LoginCtrl',
['$scope', '$rootScope', '$location', 'AuthenticationService',
function ($scope, $rootScope, $location, AuthenticationService) {
    // reset the login status
    AuthenticationService.ClearCredentials();

    $scope.login = function () {
        $scope.dataLoading = true;
        console.log('Entering '+$scope.username);
        AuthenticationService.Login($scope.username, $scope.password, function(response) {
            if(response.success) {
               AuthenticationService.SetCredentials($scope.username, $scope.password, $rootScope.datos.group);

                $location.path('/');
                console.log('Checking and redirecting');

            } else {
               console.log('Failed');
               $scope.error = response.message;
               $scope.dataLoading = false;
            }
        });
    };
}]);

Answer №1

After changing the location, it is necessary for me to make a $scope.$apply() and then invoke replace() in order to inform Angular that there have been some changes.

Expression of gratitude!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The inefficiency of Angular's ng-show directive when used with an empty string

I am developing a web application using AngularJS. The user submits a maximum of 3 keywords to the server. My objective is to display commas between the keywords, but only if there are enough keywords. Take a look at the following examples: If there are ...

Secure user authentication using SSL certificates in Django

Currently developing a web application for an exclusive user group that will only be accessible via HTTPS. The server needs to verify if users are permitted access by checking their SSL certificates. I am considering using a whitelist approach, where each ...

Using AngularJS to retrieve JSON data with the HTTP module

I am a beginner in the world of angularjs and I need some guidance. Below is the code I have written: <!DOCTYPE HTML> <html ng-app="myapp"> <head> <meta charset="utf-8"> <title>Angularjs project</title> <script type= ...

Issue with Socket.io emit failing to work (when accessing a specific URL)

I am currently working on an application that requires receiving signals from external hardware equipment. These signals are captured by redirecting them to a specific URL in the app: '/impulse/:id'. Although I am able to capture the signal, it ...

Utilizing Angular's ng-Grid with Promises

My current setup involves fetching a JSON file through a service to serve as the data source for my grid. The service successfully fetches the data, and the grid renders its basic layout correctly. However, there seems to be an issue with populating the gr ...

Navigating with Rails and Devise: How to send the user back to the original page after logging in successfully?

I have implemented the idiom described in this resource # /app/controllers/application_controller.rb class ApplicationController < ActionController::Base before_filter do |controller| redirect_to new_login_url unless controller.send(:logged_in?) ...

Sending data from an AngularJS frontend to a Laravel backend using an HTTP

I've been researching, but I can't seem to make sense of anything. I'm new to Laravel and I want to use it as a backend for my AngularJS project. Since I have experience with Angular, here is the controller function where I make an HTTP call ...

How can controllers effectively communicate with each other in AngularJS?

What is the most effective method for inter-controller communication? Currently, my solution involves using window, but it feels like a messy workaround: function StockSubgroupCtrl($scope, $http) { $scope.subgroups = []; $scope.handleSubgroupsLoa ...

What could be causing the AngularStrap modal to flicker when I attempt to close it?

Currently, I am utilizing angularjs version 1.4.4 and angularstrap version 2.3.7. Following the guidelines in the angularstrap documentation, I have incorporated angularmotion from its [github][1]. However, while using a modal, I noticed that there is a ...

"Utilizing Angular for Select Elements and ng-Option Bindings

I am facing an issue with getting ng-option to work properly. I have a variable alarm.type and I need to create a dropdown list of options derived from $scope.weekTypes. Here is what I have attempted so far: $scope.weekTypes = ["null", "sunday", ...

How can you show a different value in a select menu with AngularJS on selection?

When designing my menu to display US States for selection, I wanted to show both the 2-letter state code and the full name of the state initially. However, once the user selects a state, I only want to display the 2-letter code. This is how my menu looks: ...

What is the syntax for assigning a scope name like $scope.username.firstname in AngularJS?

Check out the snippet below This is a sample controller: angular.module("sampleApp").controller("transactionController",function($scope){ $scope.audit.lob = { "type": "select", "name": "Service", "value": "-S ...

Animating elements with AngularJS: What's the best way to increase the element's width by "+300px" when clicked?

Currently, I am experimenting with animations using ngAnimate in AngularJS. I have a div element and my goal is to make it shift to the right when a button is clicked. In jQuery, achieving this effect is simple, like so : .animate({marginLeft: "+=300"}, ...

What is the best way to include a character within a DIV element using ng-style?

After experimenting with NG-STYLE, it seems to be functioning properly. However, I am facing a challenge when trying to add the percentage symbol (%) after retrieving data from the CONTROLLER. <div class="progress progress-mini"> <div ng-style= ...

Assign values to several variables when ng-click event is triggered

Is there a smart way to assign values to multiple variables within an ng-click statement in a view without using a controller function? For instance, something like <li ng-click="showLeftDiv = true, showRightDiv = false, showBottomDiv = false"> I ...

customizable options in user interface navigation version 1.0

The latest release of UI-Router1.0.0-alpha.1 by Christopher Thielen introduced dynamic parameters. From what I understand, when a parameter is set to be dynamic, changing it from the controller should also update the URL. However, despite trying various me ...

AngularJS does not allow access to the variable value outside of the resource service's scope,

I have developed an AngularJS factory service to handle REST calls. The service is functioning correctly, but I am facing a challenge where I need to set values into $scope.variable and access them outside of the resource service. However, when attempting ...

Error Encountered When Using SQLite Ionic Plugin

For my Ionic application, I am in the process of creating a database test using information from the original documentation found here. However, upon creating and running the app, I encountered the following error on the terminal: **Uncaught TypeError: Ca ...

Child component in Angular failing to trigger change event in list

In my current project, I have a parent component responsible for making an AJAX call to fetch data from the backend to populate a grid. To render the grid data, I created a child component where I pass the list as an in-binding. However, I noticed that whe ...

When placed above in the template, the ng-model is causing the ng-repeat to not display anything

Currently, I am teaching myself Angular by following a tutorial at https://docs.angularjs.org/tutorial, but with my twist of using different data to keep things interesting. My struggle seems to stem from a simple mistake I might be making, compounded by ...