Обработка успешного входа в узел / angularjs без перезагрузки страницы

Question

Я пытаюсь создать приложение на одной странице для узлов и углов (v 1.56), которое использует ui-маршрутизатор angular для изменения страниц внутри приложения без перезагрузки браузера. Мое главное препятствие состоит в том, что я пытаюсь выяснить, как после успешного входа в систему я могу получить пользователя на страницу панели инструментов без необходимости перенаправлять / перезагружать эту страницу? В идеале я ищу способ программного запуска маршрута, как если бы я нажал на ссылку.

Я пытался использовать angular $ http.get ('/ dashboard') для целевого маршрута после ответа на сообщение loginAction, но это не работает, так как $ http.get () совершенно отличается от вызова GET, который приводит к от фактического нажатия на тег привязки href = "/ dashboard". Последнее событие click вызывает страницу панели инструментов, как и должно быть, отображая ее в теге на странице индекса. Есть ли «изящный», угловой способ справиться с этим? Эта проблема аналогична использованию экспресс-веб-сервера узла или пользовательского веб-сервера, который использует файловые потоки.

<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);

  });

Контроллер

  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";
                });                    
              }
          });
        }
  });

Answer 1

Кажется, я ответил на свой вопрос.Мне нужно было использовать сервис 'ngRoute' и вставить $ location в мой контроллер следующим образом:

<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», функция ($ 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 );

                    }
                  });
                }
          });