cari

Rumah  >  Artikel  >  hujung hadapan web  >  路由Ui-router模块在AngularJS中用法的示例代码

路由Ui-router模块在AngularJS中用法的示例代码

黄舟
黄舟asal
2017-05-31 10:22:451316semak imbas

这篇文章主要介绍了AngularJS路由Ui-router模块用法,结合实例形式分析了Ui-router模块的功能、使用方法及相关注意事项,需要的朋友可以参考下

本文实例讲述了AngularJS路由Ui-router模块用法。分享给大家供大家参考，具体如下：

由于某些设计原因，AngularJS原生的路由模块有一些缺点，比如说不支持view的嵌套等，所以有许多社区开始自己设计路由模块，最有代表性的就是ui-route了。

ui-route是一个功能强大的路由模块，它在原生的ng-route模块上加强了其他方面的功能。

现在就开始做几个DEMO接触一下ui-route。

<!--初始页面-->
<!doctype html>
<meta charset="UTF-8">
<html>
<head>
  <link href="self.css" rel="external nofollow" rel="stylesheet">
</head>
<body >
<p ng-app="myApp">
<p><a ui-sref = "index">首页</a></p>
<p ui-view></p><!--这里是路由视图存放的地方-->
</p>
<script src="angular.min.js"></script>
<script src="angular-ui-router.js"></script>
<script src="test2.js"></script>
</body>
</html>

首先必须引用angular-ui-router.js文件。这个文件是区别于AngularJs的angular-route.js文件的。而且必须把该文件放在angular.min.js下面。

观察一下Html的body代码，可以发现有三个地方与使用原生的ng-route时的body代码不同。他们分别是ui-sref ， index 以及ui-view 。先跳过，看一下如何初始化ui-route模块。

初始化ui-route模块：

var app = angular.module(&#39;myApp&#39;,[&#39;ui.router&#39;]);
app.config(["$stateProvider",function($stateProvider){
  $stateProvider
    .state("index",{
      url:&#39;/&#39;,
      template:&#39;<p>我是首页内容</p>&#39;
    })
}]);

首先，和原生ng-route路由模块相似的是，必须先把ui-route注入。然后再进行具体的配置。与原生的ng-route不同的是，ui-route用state() 代替了原生的when() ，它在when()，的基础上新增了一个参数，这里是index，用以区分这部分路由对哪一个命令进行响应。

回到之前的e388a4556c0f65e1904146cc1a846bee2ae2510aed8048604530034ce366ffc6首页5db79b134e9f6b82c0b36e0489ee08ed94b3e26ee717c64999d7867364b1b4a3 ，大概就知道他们视图和它之间的关系了。ui-view 代替了以往的ng-view ，ui-sref 替换掉了以前的ng-href，而它也不再是指向链接，而是指向“导航”的名字。

其中的url属性可以唯一标识改路由的后续地址，用以跟后面的路由进行区分。

Atas ialah kandungan terperinci 路由Ui-router模块在AngularJS中用法的示例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Angularjs中如何使用轮播图指令swiper的代码实例分享Artikel seterusnya：关于angularJs如何使用$watch和$filter来过滤器制作搜索筛选的实例代码分享

Artikel berkaitan

Lihat lagi