AngularJS 中的 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。
如果你对嵌套视图和多个视图有所了解，将会有所帮助。
-
嵌套视图类似于父子关系，因为它们在另一个视图中包含一个视图。以另一种方式，将智能手机列表全部放在一个地方。
当你点击智能手机时，你会从不同的 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>'
});
});
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
