从angularjs重定向登录页面到欢迎页面

redirect login page to welcome page from angularjs

本文关键字：angularjs 登录重定向更新时间：2023-09-26

我正在创建一个web应用程序，我需要从登录重定向到欢迎页面，如果我的用户id和密码验证

    <script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function ($scope, $http, $interval) {
        //login
        $scope.loginbutton = function () {
            $http.get('/login.asmx/loginuser', {
                params: {
                    log: $scope.log,
                    pm: $scope.pm,
                    password: $scope.password
                }
            })
            .then(function (response) {
                {
                   //here i want to redirect to another page
                }
            })
        }
    });
</script>

这是我的脚本的angularjs我如何重定向页面到另一个页面?

可以使用$location服务，例如:

<br>$location.path('/home')<br>

这里是refguid链接获取更多信息

在控制器中添加$window

app.controller('customersCtrl', function ($scope, $http, $interval, $location, $window) {

然后在您的回复

中添加以下行

.then(function (response) {
                    {
                        $window.location.href = "../welcome/Index";
                    }
                })

<script>
    var app = angular.module('myApp', ['$location']);
    app.controller('customersCtrl', function ($scope, $http, $interval, $location) { // add $location dependency in the 
        //login
        $scope.loginbutton = function () {
            $http.get('/login.asmx/loginuser', {
                params: {
                    log: $scope.log,
                    pm: $scope.pm,
                    password: $scope.password
                }
            })
            .then(function (response) {
                {
                    $location.path('google.com') //pass the url in it.
                }
            })
        }
    });
</script>

使用$state重定向

controller.js

controller('customersCtrl', function ($scope, $http, $interval, $state) {
    $scope.loginbutton = function () {
        $http.get('/login.asmx/loginuser', {
            params: {
                log: $scope.log,
                pm: $scope.pm,
                password: $scope.password
            }
        })
        .then(function (response) {
             $state.go('page');
        })
    }
});

然后在你的route.js中指定要重定向到的新状态。

angular.module('app.routes', []);
    .config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('page', {
            url: '/page',
            templateUrl: 'templates/page.html',
            controller: 'pageCtrl'
       })
});

您需要在控制器中包含$location依赖项，并且需要调用$location.url('/login')来导航到登录页面。我已经为此修改了你的代码。

<script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function ($scope, $http, $interval, $location) {
        //login
        $scope.loginbutton = function () {
            $http.get('/login.asmx/loginuser', {
                params: {
                    log: $scope.log,
                    pm: $scope.pm,
                    password: $scope.password
                }
            })
            .then(function (response) {
                {
                   //Navigate to welcome page
                   $location.url('/welcome');
                }
            })
        }
    });
</script>

你需要在你的路由提供程序中定义一个welcome路径，如:

(function () {
    'use strict';
    angular.module('myApp', [
        'ngRoute'
    ])
    .config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/login', {
            templateUrl: 'views/landing.html',
            controller: 'landingController'
        });
        $routeProvider.when('/customers', {
            templateUrl: 'views/customers.html',
            controller: 'customersCtrl'
        });
        $routeProvider.when('/welcome', {
            templateUrl: 'views/welcome.html',
            controller: 'welcomeController'
        });
        ..............
        ..............
        $routeProvider.otherwise({
            redirectTo: '/login'
        });
    }]);
})();