AngularJS 中的 UI-Sref
-
什麼是 Angular
UI-Router及其工作原理 -
Angular 中
Ng-Route和UI-Router (state)之間的區別 -
Angular 中
ui-sref的狀態到狀態導航 -
Angular 中
UI-Router的實現和安裝 -
建立元件和 App Router 以瞭解 Angular 中
ui-sref的使用
Angular 的 ngHref 指令允許我們將引數連結到 URL。我們可以使用 UI-Router 提供的 ui-sref 繫結到狀態。
它與與常規 URL 相關的內容不同。最終是如何連結狀態的不同場景。
本文將深入探討主題並討論如何使用 UI-Router 在 Angular 中使用 ui-Sref。
什麼是 Angular UI-Router 及其工作原理
Angular UI-Router 是一個幫助我們建立單頁應用程式的模組。它通過管理我們應用程式中的所有路由來提供應用程式和瀏覽器之間的抽象。
它還有助於以更有效的方式對我們的應用程式進行更改。例如，當我們想新增一條新路由時，我們只需一行程式碼即可。
它採用與 ng-Route 不同的方法，因為它根據應用程式的狀態修改應用程式的檢視，而不僅僅是路由 URL。在 ng-Route 上，UI-Router 是最好的選擇，因為它有兩個關鍵特性：巢狀檢視和多個檢視。
這種技術不會像 ng-Route 那樣將頁面和路由繫結到瀏覽器 URL。點選這裡瞭解更多關於 ui-router 的資訊。
如果你對巢狀檢視和多個檢視有所瞭解，將會有所幫助。
-
巢狀檢視類似於父子關係，因為它們在另一個檢視中包含一個檢視。以另一種方式，將智慧手機列表全部放在一個地方。
當你點選智慧手機時，你會從不同的 Angular 看到它的屬性。
-
多個檢視被定義為在同一頁面上有多個檢視。許多部分通常與任何應用程式中的特定頁面相關聯；例如，我們在主頁上顯示來自應用程式的多個專案。
要擁有這些元件中的每一個，我們需要為每個元件建立一個單獨的檢視。
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 的幫助下安裝 Angular UI-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>
建立元件和 App Router 以瞭解 Angular 中 ui-sref 的使用
元件是可重複使用的可重複使用的隔離物件。它與命令相同。
關鍵區別在於它始終是受限範圍而不是指令，你可以在其中選擇它是否被隔離。
這裡我們只建立了一個 header 元件；我們還沒有為 home、about us 和 contact us 元件建立任何其他元件，因為我們的主要重點是教你 ui-sref 的用法。
<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