Agfdhyk

I'm trying to build a single page node/angular ( v 1.56 ) application that leverages angular's ui-router to change pages inside the application without having any browser reloads. My main obstacle is that I'm trying to figure out how, after a successful login event, do I get the user to the dashboard page without having to redirect/reload that page? Ideally, I'm looking for a way to programmatically trigger a route just as if I had clicked on the link.

I tried using angular's $http.get('/dashboard') to the target route after the loginAction post response, but this doesn't work, as $http.get() is quite different than a GET call that results from actually clicking on an href="/dashboard" anchor tag. The latter click event calls the dashboard page as it should, rendering it in the tag on the index page. Is there a 'graceful', angular way to handle this ? This issue is the same using node's express webserver or a custom webserver that leverages filestreams.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

<script>



 var app = angular.module('myApp',['ui.router']);



 app.config(function($stateProvider) {                                                            



     var aboutState =     {

                            name: 'about',  //for testing 

                            templateUrl: '/about'

                          };



     var dashboardState = {

                            name: 'dashboard',

                            templateUrl: '/dashboard'

                          };



     $stateProvider.state(aboutState);

     $stateProvider.state(dashboardState);



  });

controller

  app.controller("myCtrl", function($scope, $http) {



      $scope.userMessage = "";



      $scope.loginSubmit = function () {



          $scope.userMessage = "Submitting...";



           $http.post("/loginAction",{ 'username': $scope.username, 'password':$scope.password }).then(function(response) {



          if( response.data.loginStatus == 'Authenticated' && response.data.userType != '' ) {



                // OK ! - we're free to go to the dashboard page now. But how ?  



               // I could do: document.querySelector("#dash").click(); 

               // this works, but this doesn't seem very secure



              // The following doesn't work: 



            $http.get("/dashboard").then(function( response ) {



                     // Why doesn't the above '/dashboard' route , but

                     // clicking on something like <a href="/dashboard">Dashboard</a> actually works ? 



                     // Short of taking the dashboard html in the response and using bind-html to force it

                     // into the dom, is there a better solution to avoid a window.location reload here ? 



                     $scope.userMessage = "Login Successful";

                });                    

              }

          });

        }

  });

I think I answered my own question. I needed to leverage the 'ngRoute' service and inject $location into my controller like so:

<script>



var app = angular.module('myApp',['ngRoute']);

app.config(function($routeProvider) {

              $routeProvider



              .when('/', {

                templateUrl : 'login',

                controller  : 'myCtrl'

              })

              .when('/test', {

                templateUrl : '/test',

                controller  : 'myCtrl'

              })

              .when('/dashboard', {

                templateUrl :'/dashboard',

                controller  : 'myCtrl'



              }).otherwise({redirectTo: '/'});



            });

app.controller("myCtrl", function( $scope, $http, $location ) {

              $scope.userMessage = "";



               // fire this function upon successful login: 



               $scope.changeRoute = function( route ) { 



                      $location.path( route );

                }





              $scope.loginSubmit = function () {



                   $scope.userMessage = "Submitting...";



                   $http.post("/loginAction",{ 'username': $scope.username, 'password':$scope.password }).then(function(response) {



                  if( response.data.loginStatus == 'Authenticated' && response.data.userType != '' ) {



                     $scope.userMessage = "Authenticated...";

                     $scope.changeRoute( response.data.destination_route );



                    }

                  });

                }

          });