AngularJS를 사용하여 다른 페이지로 리다이렉트하는 방법
서비스 파일에서 기능을 수행하기 위해 ajax 콜을 사용하고 있으며, 응답이 성공하면 페이지를 다른 URL로 리다이렉트하고 싶습니다.현재는 플레인 JS코드로 하고 있습니다.window.location = response['message'];하지만 Angular로 대체해야 합니다.JS 코드스택오버플로우에서 다양한 솔루션을 찾아봤는데$location하지만 Angular는 처음입니다.JS와 구현에 어려움을 겪고 있습니다.
$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');
});
}
}
})();
다른 방법으로 새 URL로 리디렉션할 수 있습니다.
- $window를 사용하여 페이지를 새로 고칠 수도 있습니다.
- 단일 페이지 앱 내에서 $location을 사용할 수 있으며, 이 경우 둘 중 하나를 선택할 수 있습니다.
$location.path(YOUR_URL);또는$location.url(YOUR_URL);두 방법의 기본적인 차이점은$location.url()는 get 파라미터에도 영향을 줍니다.$location.path()하지 않다.
다음 문서를 읽을 것을 권장합니다.$location그리고.$window그들 사이의 차이를 더 잘 파악할 수 있습니다.
$location.path('/configuration/streaming');이거면 될 거야...로케이션 서비스를 컨트롤러에 주입하다
아래 코드를 사용하여 새 페이지로 리디렉션했습니다.
$window.location.href = '/foldername/page.html';
컨트롤러 기능에 $120 오브젝트를 삽입했습니다.
도움이 될 수도 있어!!
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");
};
}
각진 앱에서도 다른 페이지로 리다이렉트 하는 문제에 직면했습니다.
를 추가할 수 있습니다.$windowEwald가 그의 답변에서 제시한 바와 같이, 또는 당신이 그 대답을 덧붙이고 싶지 않다면$window, 타임 아웃을 추가하는 것만으로 동작합니다.
setTimeout(function () {
window.location.href = "http://whereeveryouwant.com";
}, 500);
각진 상태JS를 사용하여 폼(제출 시)을 다른 페이지로 리디렉션할 수 있습니다.window.location.href='';다음과 같습니다.
postData(email){
if (email=='undefined') {
this.Utils.showToast('Invalid Email');
} else {
var origin = 'Dubai';
this.download.postEmail(email, origin).then(data => {
...
});
window.location.href = "https://www.thesoftdesign.com/";
}
}
이것을 시험해 보세요.
window.location.href = "https://www.thesoftdesign.com/";
제가 사용하는 간단한 방법은
app.controller("Back2Square1Controller", function($scope, $location) {
window.location.assign(basePath + "/index.html");
});
이를 위한 좋은 방법은 $state.go('statename'), {params...})는 전체 앱 구성 등을 새로고침 및 부팅하지 않아도 되는 경우 사용자 환경에 더 빠르고 편리합니다.
(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
}
})();
사용.location.href="./index.html"
또는 작성scope $window
및 사용$window.location.href="./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");
}
})
}
} }());
링크를 사용하려면 html에서 다음을 수행합니다.
<button type="button" id="btnOpenLine" class="btn btn-default btn-sm" ng-click="orderMaster.openLineItems()">Order Line Items</button>
타이프스크립트 파일로
public openLineItems() {
if (this.$stateParams.id == 0) {
this.Flash.create('warning', "Need to save order!", 3000);
return
}
this.$window.open('#/orderLineitems/' + this.$stateParams.id);
}
이 예가 다른 답변과 함께 저에게 도움이 되었기 때문에 부디 봐주셨으면 합니다.
언급URL : https://stackoverflow.com/questions/27941876/how-to-redirect-to-another-page-using-angularjs
'programing' 카테고리의 다른 글
| create-react-app로 구축된 React 프로젝트를 다음 create-react-app 버전으로 업그레이드하는 방법은 무엇입니까? (0) | 2023.03.31 |
|---|---|
| AngularJS에서 ng-model="my_{$index}"를 ng-model로 동적으로 생성하는 방법 (0) | 2023.03.31 |
| Angularjs 입력 값 형식 지정 (0) | 2023.03.31 |
| .config, .run, AppCtrl - 경로 배치 위치 (0) | 2023.03.31 |
| 스프링 AAP: JoinPoint와 PointCut의 차이점은 무엇입니까? (0) | 2023.03.31 |