Angular state.go 함수
상태는 웹 애플리케이션을 구축하는 데 있어 매우 중요한 개념이며 AngularJS의 핵심 기능 중 하나입니다. AngularJS 프레임워크는 개발자가 양방향 데이터 바인딩 및 이벤트 처리를 통해 상태를 관리하는 데 도움이 됩니다.
이 기사에서는 Angular state.go 기능에 대해 설명합니다.
Angular에서 UI-Router란 무엇입니까?
UI-Router는 단일 페이지 애플리케이션에 대한 라우팅 및 탐색을 제공합니다.
Angular의 새로운 라우터 모듈을 도입하기 전에 URL 처리 및 탐색에 사용되었던 AngularJS의 $route 서비스의 한계를 해결하기 위해 만든 오픈 소스 프로젝트입니다.
UI-Router를 사용하여 라우팅, 탐색, 딥 링크 등과 같은 내장된 기능에서 사용할 수 없는 기능을 개발할 수 있습니다.
중첩 및 뷰 명명 속성은 ngRoute에서 사용할 수 없습니다. 상태 기반 URL을 사용하여 UI 렌더링 인터페이스를 구성할 수 있습니다.
또한 동일한 페이지에서 여러 보기를 사용할 수 있으므로 보기의 유용성이 향상됩니다. UI-Router는 동적 웹 애플리케이션을 관리하기 위한 환상적인 도구입니다.
Angular에서 UI-Router의 $state.go 기능이란?
Angular에는 한 상태에서 다음 상태로 데이터를 전달하는 여러 가지 방법이 있습니다. 예를 들어 ng-model이라는 사용자 정의 HTML 속성을 사용할 수 있으며 ng-click이라는 사용자 정의 이벤트를 사용할 수도 있습니다.
그러나 $state.go는 미래에 다른 Angular 프로젝트에서 작업하려는 다른 사람들에게 덜 장황하고 쉽기 때문에 아마도 한 상태에서 다음 상태로 객체를 전달하는 가장 좋은 방법일 것입니다.
$state.go의 구문은 다음과 같습니다.
$state.go('destination.state');
Angular에서 $state.go와 $location.path의 차이점
$state.go는 애플리케이션의 현재 상태를 반영하도록 URL을 업데이트하도록 뷰에 지시하는 AngularJS 지시문입니다. 이 지시문은 현재 페이지에서 벗어나지 않고 URL을 변경하는 데 사용됩니다.
$location.path는 애플리케이션의 현재 위치를 반영하도록 URL을 업데이트하도록 뷰에 지시하는 AngularJS 지시문입니다. 이 지시문은 URL을 변경하여 특정 페이지에서 벗어나는 데 사용됩니다.
새로운 Angular 개발자의 경우 목표가 같을 때 서로 다른 상황에서 두 가지를 모두 사용하는 이유를 이해하기 어려울 수 있습니다.
$location 서비스로 위치 개체를 관리할 수 있으며 UI-router 모듈에는 복잡한 방식으로 경로를 관리하는 데 도움이 되는 $state 서비스가 포함되어 있습니다. ui-router를 사용하여 상태 및 경로를 관리하려면 $state 서비스만 사용하십시오.
더 잘 이해하기 위해 $state.go의 예를 살펴보겠습니다.
타이프스크립트 코드:
app = angular.module('myApp',['ui.router',])
app.config(['$stateProvider',function($stateProvider){
$stateProvider
.state('main',{
url: '/',
templateUrl:"main.html",
controller: 'Demo',
})
.state('Roll',{
url: '/Roll',
template:"<p> Saved</p>"
})
}]);
app.config(['$urlRouterProvider',function($urlRouterProvider){
$urlRouterProvider.otherwise('/');
}]);
app.controller('Demo', ['$scope', '$http', '$state'
,function($scope, $http, $state){
$scope.user = { RollNumber : "1234" }
$scope.save = function(){
$http.get("dummy.json", { params : $scope.user } )
.success(function(data){
$state.go("Roll");
})
}
}]);
HTML 코드:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-router@*" data-semver="0.2.11" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>
<script data-require="lodash.js@*" data-semver="2.4.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="app.js"></script>
</head>
<body>
<div ui-view=""></div>
</body>
</html>
코드의 라이브 데모를 확인하려면 여기를 클릭하십시오.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook