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);
});
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 );
}
});
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.