如何使用Angular JSredirect到另一个页面?
我使用ajax调用来执行服务文件中的function,如果响应成功,我想redirect到另一个url的网页。 目前,我正在通过使用简单的js“window.location = response ['message'];”来做到这一点。 但是我需要用angularjs代码replace它。 我已经看到了各种解决scheme在stackoverflow,他们使用$位置。 但是我是新来的angular度和实施它的麻烦。
$http({ url: RootURL+'app-code/common.service.php', method: "POST", headers: {'Content-Type': 'application/x-www-form-urlencoded'}, dataType: 'json', data:data + '&method=signin' }).success(function (response) { console.log(response); if (response['code'] == '420') { $scope.message = response['message']; $scope.loginPassword = ''; } else if (response['code'] != '200'){ $scope.message = response['message']; $scope.loginPassword = ''; } else { window.location = response['message']; } // $scope.users = data.users; // assign $scope.persons here as promise is resolved here })
你可以使用Angular $window
:
$window.location.href = '/index.html';
控制器中的示例用法:
(function () { 'use strict'; angular .module('app') .controller('LoginCtrl', LoginCtrl); LoginCtrl.$inject = ['$window', 'loginSrv', 'notify']; function LoginCtrl($window, loginSrv, notify) { /* jshint validthis:true */ var vm = this; vm.validateUser = function () { loginSrv.validateLogin(vm.username, vm.password).then(function (data) { if (data.isValidUser) { $window.location.href = '/index.html'; } else alert('Login incorrect'); }); } } })();
您可以用不同的方式redirect到一个新的URL。
- 你可以使用$ window来刷新页面
- 你可以“留在”单页面的应用程序,并使用$位置,在这种情况下,您可以select
$location.path(YOUR_URL);
或$location.url(YOUR_URL);
。 所以两个方法之间的基本区别是$location.url()
也会影响get参数,而$location.path()
不会。
我build议阅读$location
和$window
的文档,以便更好地理解它们之间的差异。
$location.path('/configuration/streaming');
这将工作…在控制器注入位置服务
它可能会帮助你!
AngularJs代码示例
var app = angular.module('app', ['ui.router']); app.config(function($stateProvider, $urlRouterProvider) { // For any unmatched url, send to /index $urlRouterProvider.otherwise("/login"); $stateProvider .state('login', { url: "/login", templateUrl: "login.html", controller: "LoginCheckController" }) .state('SuccessPage', { url: "/SuccessPage", templateUrl: "SuccessPage.html", //controller: "LoginCheckController" }); }); app.controller('LoginCheckController', ['$scope', '$location', LoginCheckController]); function LoginCheckController($scope, $location) { $scope.users = [{ UserName: 'chandra', Password: 'hello' }, { UserName: 'Harish', Password: 'hi' }, { UserName: 'Chinthu', Password: 'hi' }]; $scope.LoginCheck = function() { $location.path("SuccessPage"); }; $scope.go = function(path) { $location.path("/SuccessPage"); }; }
我用下面的代码redirect到新的页面
$window.location.href = '/foldername/page.html';
并在我的控制器function注入$窗口对象。
一个好办法是使用$ state.go('statename',{params …})更快,更友好的用户体验,当你不必重新加载和bootraping整个应用程序的configuration和东西
(function() { 'use strict'; angular .module('app.appcode') .controller('YourController', YourController); YourController.$inject = ['rootURL', '$scope', '$state', '$http']; function YourController(rootURL, $scope, $state, $http) { $http({ url: rootURL + 'app-code/common.service.php', method: "POST", headers: {'Content-Type': 'application/x-www-form-urlencoded'}, dataType: 'json', data:data + '&method=signin' }).success(function (response) { if (response['code'] == '420') { $scope.message = response['message']; $scope.loginPassword = ''; } else if (response['code'] != '200') { $scope.message = response['message']; $scope.loginPassword = ''; } else { // $state.go('home'); // select here the route that you want to redirect $state.go(response['state']); // response['state'] should be a route on your app.routes } }) } });
//路线
(function() { 'use strict'; angular .module('app') .config(routes); routes.$inject = [ '$stateProvider', '$urlRouterProvider' ]; function routes($stateProvider, $urlRouterProvider) { /** * Default path for any unmatched url */ $urlRouterProvider.otherwise('/'); $stateProvider .state('home', { url: '/', templateUrl: '/app/home/home.html', controller: 'Home' }) .state('login', { url: '/login', templateUrl: '/app/login/login.html', controller: 'YourController' }) // ... more routes .state } })();
我使用的简单方法是
app.controller("Back2Square1Controller", function($scope, $location) { window.location.assign(basePath + "/index.html"); });
(function () { "use strict"; angular.module("myApp") .controller("LoginCtrl", LoginCtrl); function LoginCtrl($scope, $log, loginSrv, notify) { $scope.validateUser = function () { loginSrv.validateLogin($scope.username, $scope.password) .then(function (data) { if (data.isValidUser) { window.location.href = '/index.html'; } else { $log.error("error handler message"); } }) } } }());