Angular state.go 함수

Muhammad Adil 2023년1월30일
  1. Angular에서 UI-Router란 무엇입니까?
  2. Angular에서 UI-Router의 $state.go 기능이란?
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 avatar Muhammad Adil avatar

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