Angular state.go 関数
状態は、Web アプリケーションを構築するための非常に重要な概念であり、AngularJS のコア機能の 1つです。AngularJS フレームワークは、開発者が双方向のデータバインディングとイベント処理を通じて状態を管理するのに役立ちます。
この記事では、Angular の state.go 関数について説明します。
Angular の UI-Router とは
UI-Router は、シングルページアプリケーションのルーティングとナビゲーションを提供します。
これは、AngularJS の新しいルーターモジュールを導入する前に URL の処理とナビゲーションに使用されていた AngularJS の $route サービスの制限に対処するために作成されたオープンソースプロジェクトです。
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 は、アプリケーションの現在の状態を反映するように URL を更新するようにビューに指示する AngularJS ディレクティブです。このディレクティブは、現在のページから移動せずに URL を変更するために使用されます。
$location.path は、アプリケーションの現在の場所を反映するように URL を更新するようにビューに指示する AngularJS ディレクティブです。このディレクティブは、URL を変更して特定のページから移動するために使用されます。
新しい Angular 開発者にとって、目標が同じであるときに、異なる状況で両方を利用する理由を理解するのは難しいかもしれません。
$location サービスを使用してロケーションオブジェクトを管理できます。UI-router モジュールには、複雑な方法でルートを管理するのに役立つ $state サービスが含まれています。ui-router を使用して状態とルートを管理するには、$state サービスのみを使用してください。
$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