AngularJS の UI-Sref
-
Angular
UI-Routerとは何ですか -
Angular の
Ng-RouteとUI-Router (state)の違い -
Angular での
ui-srefの状態間ナビゲーション -
Angular での
UI-Routerの実装とインストール -
Angular での
ui-srefの使用を理解するためのコンポーネントとアプリルーターを作成する
Angular の ngHref ディレクティブを使用すると、パラメーターを URL にリンクできます。UI-Router が提供する ui-sref を使用して状態にバインドできます。
通常の URL に関連するものと同じではありません。これは、最終的には、状態をリンクする方法の異なるシナリオです。
この記事では、メイントピックを深く掘り下げ、UI-Router を使用して Angular で ui-Sref を使用する方法について説明します。
AngularUI-Router とは何ですか
AngularUI-Router は、シングルページアプリケーションの作成に役立つモジュールです。アプリケーション内のすべてのルートを管理することにより、アプリケーションとブラウザー間の抽象化を提供します。
また、より効率的な方法でアプリケーションに変更を加えるのにも役立ちます。たとえば、新しいルートを追加する場合は、1 行のコードで追加できます。
単なるルート URL ではなく、アプリケーションの状態に基づいてアプリのビューを変更するという点で、ng-Route とは異なるアプローチを採用しています。ng-Route では、ネストされたビューと複数のビューという 2つの主要な機能があるため、UI-Router が最適なオプションです。
この手法では、ページとルートを ng-Route のようなブラウザの URL にバインドしません。ui-router の詳細については、ここをクリックしてください。
ネストされたビューと複数のビューについてのアイデアがあれば役立ちます。
-
ネストされたビューは、あるビューが別のビューの中に含まれているため、親子関係に似ています。別の言い方をすれば、スマートフォンのリストをすべて 1 か所にまとめることです。
スマートフォンをクリックすると、その属性が別の視点から表示されます。
-
複数のビューは、同じページに複数のビューがあるものとして定義されます。通常、多くのセクションが任意のアプリケーションの特定のページに関連付けられています。たとえば、アプリケーションの複数のアイテムをメインページに表示します。
これらの各コンポーネントを使用するには、コンポーネントごとに個別のビューを作成する必要があります。
Angular の Ng-Route と UI-Router (state) の違い
すべての開発者は、ng-route と ui-router の根本的な違いを知る必要があります。
Ng-Route は UI-Router よりも長い間存在しており、その概念は React のような他のフレームワークから来ている開発者にとってより馴染み深いものです。
Ng-Route は、ネストされた遅延読み込みルートなど、UI-Router が提供しない機能も提供します。
UI-Router (state) は、UI コンポーネントのルーティングを処理するために使用されるライブラリです。これは Angular 開発者に人気のある選択肢です。
さらに、UI-Router（state）の構文はすっきりしており、このフレームワークでネストされたビューを作成する方が簡単ですが、Ng-Route のような遅延読み込みルートは提供されません。
Angular での ui-sref の状態間ナビゲーション
ui-sref ディレクティブは、ある状態から別の状態に移動するための最初のオプションです。HTML アンカー要素の href プロパティは、おそらくあなたに精通しています。同様に、ui-sref ディレクティブは状態参照を参照します。
アンカーに ui-sref ディレクティブを付加して状態名を宣言するのが、ディレクティブの使用方法です。より良い方法でそれを理解するために例を議論しましょう。
<a ui-sref="Contact Form" href="#Contact">Contact Us</a>
Angular コントローラーで使用可能な $state オブジェクトのメソッドを使用することは、状態間を移動するための次の手法です。例えば。
angular.module('app').controller('PageController',
['$scope', '$state',
function ($scope, $state) {
$scope.navigate = function () {
$state.go('Contact');
};
}]);
Angular での UI-Router の実装とインストール
まず、コマンドターミナルのパッケージマネージャーnpm を使用して、AngularUI-router をインストールする必要があります。
$ npm install angular --save // AngularJS
$ npm install angular-ui-router --save // angular UI-router
ui-router を追加したら、index.html ファイルで作業します。
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
</head>
<body ng-app="Example">
<div ui-view="header"></div>
<div ui-view=""></div>
<div ui-view="footer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js" ></script>
<script src="app/app.routes.js"></script>
</body>
</html>
Angular での ui-sref の使用を理解するためのコンポーネントとアプリルーターを作成する
コンポーネントは、再利用可能な再利用可能な分離オブジェクトです。コマンドと同じです。
主な違いは、分離されているかどうかを選択できるディレクティブではなく、常に限定されたスコープであるということです。
ここでは、ヘッダーコンポーネントのみを作成しました。ui-sref の使用法を教えることが主な目的であるため、home、about us、および contact us コンポーネント用の他のコンポーネントは作成していません。
<nav class="navbar-default">
<div class="Box">
<div class="header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<div class="icon-bar"></div>
<div class="icon-bar"></div>
<div class="icon-bar"></div>
</button>
</div>
<div class="new-class" id="112211">
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About us</a></li>
<li><a ui-sref="contact">contact us</a></li>
</ul>
</div>
</div>
</nav>
つまり、これが ui-sref の使用方法です。ここでは、ui-sref を使用してページをルーティングします。
次に、アプリの最終的なコードを記述します。
var app = angular.module('Example', ['ui.router', 'app.routes']);
angular.module('app.routes',['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
// create default view
$urlRouterProvider.otherwise("/home");
$stateProvider
// home states and nested view
.state('home', {
url: "/home",
template: '<div <p> Home Tab is active!!!</p></div>'
})
// about states and nested view
.state('about', {
url: "/about",
template: '<div <p> About Us Tab is active!!!</p></div>'
})
.state('contact', {
url: "/contact",
template: '<div <p> Contact Us Tab is active!!!</p></div>'
});
});
ここをクリックして、コードのライブデモンストレーションを確認してください。
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