Angular state.go 函式
狀態是構建 Web 應用程式的一個非常重要的概念，它是 AngularJS 的核心特性之一。AngularJS 框架通過雙向資料繫結和事件處理幫助開發人員管理狀態。
本文將討論 Angular state.go 函式。
什麼是 Angular 中的 UI-Router
UI-Router 為單頁應用提供路由和導航。
它是一個開源專案，旨在解決 AngularJS 的 $route 服務的侷限性，該服務在引入 Angular 的新路由模組之前用於 URL 處理和導航。
我們可以使用 UI-Router 來開發內建路由中不可用的功能，如路由、導航、深度連結等。
ngRoute 中不提供巢狀和檢視命名屬性。它允許你使用基於狀態的 URL 來構建 UI 呈現介面。
它還支援在同一頁面上使用多個檢視，從而增強檢視的實用性。UI-Router 是管理動態 Web 應用程式的絕佳工具。
什麼是 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 是一個 AngularJS 指令，它告訴檢視更新其 URL 以反映應用程式的當前狀態。該指令用於在不離開當前頁面的情況下更改 URL。
$location.path 是一個 AngularJS 指令，它告訴檢視更新其 URL 以反映應用程式的當前位置。該指令用於通過更改其 URL 來離開特定頁面。
對於新的 Angular 開發人員來說，可能很難理解為什麼在目標相同的情況下我們會在不同的情況下同時使用這兩種方法。
你可以使用 $location 服務管理位置物件，UI-router 模組包含 $state 服務，它有助於以複雜的方式管理路由。僅使用 $state 服務來使用 ui-router 管理狀態和路由。
讓我們討論一下 $state.go 的例子來更好地理解它。
TypeScript 程式碼：
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