AngularJS 中的 UI-Sref

当前位置：主页 > 学无止境 > WEB前端 > Angular >

Vue React JavaScript Angular CSS HTML

AngularJS 中的 UI-Sref

作者：迹忆客最近更新：2023/03/23 浏览次数：

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>'
});
});