首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

深究AngularJS之ui-router详解

Posted in Javascript onJune 13, 2017

1.配置使用ui-router

1.1导入js文件

需要注意的是：必须导入angular.min.js这个文件，且angular.min.js必须导入在angular-ui-router.min.js前面。

<script type="text/javascript" src="JS/angular.min.js"></script>
<script type="text/javascript" src="JS/angular-ui-router.min.js"></script>

1.2注入angular模块

var app = angular.module('myApp', ['ui.router']);

注入的名字“ui.router”，可在angular-ui-router.min.js里找到，如下图：

深究AngularJS之ui-router详解

1.3定义视图

ui-view替代的是ngroute路由的ng-view。

<div ui-view></div>

1.4配置路由状态

app.config(["$stateProvider", function ($stateProvider){    
  $stateProvider   
  .state("home", { //导航用的名字，如<a ui-sref="login">login</a>里的login
    url: '/',  //访问路径 
    template:'<div>模板内容......</div>'
  })   

 }]);

2.简单示例

<html>
 <head>  
  <title>ui-router</title>
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">  
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">
  <!-- 导入JS -->
  <script type="text/javascript" src="JS/angular.min.js"></script>
  <script type="text/javascript" src="JS/angular-ui-router.min.js"></script> 
 </head>

 <body >  
  <div ng-app="myApp">    
    <div ui-view></div> <!-- 视图 -->   
  </div> 
 </body>


 <script type="text/javascript">
  //定义模板，并注入ui-router
  var app = angular.module('myApp', ['ui.router']);  
  //对服务进行参数初始化，这里配stateProvider服务的视图控制
  app.config(["$stateProvider", function ($stateProvider) {   
    $stateProvider   
    .state("home", {
      url: '/',  
      template:'<div>模板内容......</div>'
    })   
  }]); 
 </script>

</html>

3.嵌套路由的实现

通过url参数的设置实现路由的嵌套（父路由与子路由通过”.“连接就形成了子路由）。嵌套路由可实现多层次的ui-view。

<body >  
  <div ng-app="myApp" >
    <a ui-sref="parent">点我显示父view内容</a>
    <a ui-sref="parent.child">点我显示父view与子view内容</a>
    <div ui-view></div> <!-- 父View -->   
  </div> 
 </body>


 <script type="text/javascript">
  var app = angular.module('myApp', ['ui.router']);  
  app.config(["$stateProvider", function ($stateProvider) {   
    $stateProvider   
    .state("parent", {//父路由
      url: '/parent', 
      template:'<div>parent'
          +'<div ui-view><div>'// 子View
          +'</div>'
    })   
    .state("parent.child", {//子路由
      url: '/child',  
      template:'<div>child</div>'
    })   
  }]);

 </script>

上面的是相对路径方式：

‘parent'将匹配…./index.html#/parent； ‘parent.child'将匹配…./index.html#/parent/child。

若改成绝对路径方式，则需要在子url里加上^:

.state("parent.child", {
  url: '^/child',  
  template:'<div>child</div>'
})

此时，'parent'将匹配…./index.html#/parent； ‘parent.child'将匹配…./index.html#/child。

4. 通过views实现多视图

多个示图时，使用views属性。该属性里包含了哪些ui-view，则对应的template或templateUrl里的内容就会填充该ui-view。

同一个状态下有多个视图示例：

<body >  
  <div ng-app="myApp" >
    <a ui-sref="index">点我显示index内容</a>
    <div ui-view="header"></div> 
    <div ui-view="nav"></div> 
    <div ui-view="body"></div>   
  </div> 
 </body>

 <script type="text/javascript">
  var app = angular.module('myApp', ['ui.router']);  
  app.config(["$stateProvider", function ($stateProvider) {   
    $stateProvider   
    .state("index", {
      url: '/index', 
      views:{
        'header':{template:"<div>头部内容</div>"},
        'nav':{template:"<div>菜单内容</div>"},
        'body':{template:"<div>展示内容</div>"}
      }
    })   

  }]);

 </script>

5.ui-view的定位

@的作用 是用来绝对定位view，即说明该ui-view属于哪个模板。如：'header@index'表示名为header的view属于index模板。绝对和相对路径的效果一样，请看如下代码：

<body >  
  <div ng-app="myApp" >
    <a ui-sref="index">show index</a>
    <a ui-sref="index.content1">content111111</a>
    <a ui-sref="index.content2">content222222</a>
    <div ui-view="index"><div>       
  </div> 
 </body>

 <script type="text/javascript">
  var app = angular.module('myApp', ['ui.router']);  
  app.config(["$stateProvider", function ($stateProvider) {   
    $stateProvider   
    .state("index", {
      url: '/index', 
      views:{
        'index':{template:"<div><div ui-view='header'></div> <div ui-view='nav'></div> <div ui-view='body'></div> </div>"},
        //这里必须要绝对定位
        'header@index':{template:"<div>头部内容header</div>"},
        'nav@index':{template:"<div>菜单内容nav</div>"},
        'body@index':{template:"<div>展示内容contents</div>"}
      }
    })  
    //绝对定位
    .state("index.content1", {
      url: '/content1', 
      views:{
        'body@index':{template:"<div>content11111111111111111</div>"}
        //'body@index'表时名为body的view使用index模板
      }
    }) 
    //相对定位：该状态的里的名为body的ui-view为相对路径下的（即没有说明具体是哪个模板下的）
    .state("index.content2", {
      url: '/content2', 
      views:{
        'body':{template:"<div>content2222222222222222222</div>"}//
      }
    })   

  }]);

 </script>

由上面代码可知，相对定位不能找到的ui-view需要用@来绝对定位。

6.URL路由传参（通过$stateParams服务获取参数）

有url: '/index/:id',和url: '/index/{id}',两种形式传参

<body >  
  <div ng-app="myApp" >
    <a ui-sref="index({id:30})">show index</a>  
    <a ui-sref="test({username:'peter'})">show test</a>
    <div ui-view></div>
  </div> 
 </body>

 <script type="text/javascript">
  var app = angular.module('myApp', ['ui.router']);  
  app.config(["$stateProvider", function ($stateProvider) {   
    $stateProvider   
    .state("home", {
      url: '/', 
      template:"<div>homePage</div>"

    })
    .state("index", {
      url: '/index/:id', 
      template:"<div>indexcontent</div>",
      controller:function($stateParams){
        alert($stateParams.id)
      }
    }) 
    .state("test", {
      url: '/test/:username', 
      template:"<div>testContent</div>",
      controller:function($stateParams){
        alert($stateParams.username)
      }
    })     

  }]);

 </script>

7.Resolve（预载入）

参考资料：

使用预载入功能，开发者可以预先载入一系列依赖或者数据，然后注入到控制器中。在ngRoute中resolve选项可以允许开发者在路由到达前载入数据保证（promises）。在使用这个选项时比使用angular-route有更大的自由度。

预载入选项需要一个对象，这个对象的key即要注入到控制器的依赖，这个对象的value为需要被载入的factory服务。

如果传入的时字符串，angular-route会试图匹配已经注册的服务。如果传入的是函数，该函数将会被注入，并且该函数返回的值便是控制器的依赖之一。如果该函数返回一个数据保证（promise），这个数据保证将在控制器被实例化前被预先载入并且数据会被注入到控制器中。

<body >  
  <div ng-app="myApp" >
    <a ui-sref="index">show index</a>  
    <div ui-view></div>
  </div> 
 </body>

 <script type="text/javascript">
  var app = angular.module('myApp', ['ui.router']);  
  app.config(["$stateProvider", function ($stateProvider) {   
    $stateProvider   
    .state("home", {
      url: '/', 
      template:"<div>homePage</div>"

    })
    .state("index", {
      url: '/index/{id}', 
      template:"<div>indexcontent</div>",
      resolve: {
        //这个函数的值会被直接返回，因为它不是数据保证
        user: function() {
         return {
          name: "peter",
          email: "audiogroup@qq.com"
         }
        },
        //这个函数为数据保证, 因此它将在控制器被实例化之前载入。
        detail: function($http) {
         return $http({
          method: 'JSONP',
          url: '/current_details'
         });
        },
        //前一个数据保证也可作为依赖注入到其他数据保证中！（这个非常实用）
        myId: function($http, detail) {
         $http({
          method: 'GET',
          url: 'http://facebook.com/api/current_user',
          params: {
           email: currentDetails.data.emails[0]
          }
         })
        }

      },
      controller:function(user,detail,myId$scope){
        alert(user.name)
        alert(user.email)
        console.log(detail)
      }
    })         

  }]);

 </script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

深究AngularJS之ui-router详解

- Author -

zcl_love_wx

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
JQuery jsonp 使用示例代码
Aug 12 Javascript
基于JQuery的简单实现折叠菜单代码
Sep 15 Javascript
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 Javascript
Jq通过td获取同行其它列td的方法
Oct 05 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
微信小程序自定义导航隐藏和显示功能
Jun 13 #Javascript
深究AngularJS——ng-checked（回写：带真实案例代码）
Jun 13 #Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 #Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 #Javascript
angularjs之$timeout指令详解
Jun 13 #Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 #Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 #Javascript
#{}(1) 代理(2) S-2000(1) 克隆(1) SQL注入(2) IC-R9500(1) 小喇叭(1) 外键(1) 脏读(2) 增删查改(1)
You might like
php中文件上传的安全问题
2006/10/09 PHP
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
js 操作符汇总
2014/11/08 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
快速解决element的autofocus失效问题
2020/09/08 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python re正则表达式模块(Regular Expression)
2014/07/16 Python
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
Python实现栈的方法
2015/05/26 Python
python创建临时文件夹的方法
2015/07/06 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
python 一篇文章搞懂装饰器所有用法（建议收藏）
2019/08/23 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
python psutil监控进程实例
2019/12/17 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
柒牌官方商城：中国男装优秀品牌
2017/06/30 全球购物
Giuseppe Zanotti美国官方网站：将鞋履视为高级时装般精心制作
2018/02/06 全球购物
上班迟到检讨书
2014/01/10 职场文书
元旦晚会开场白
2015/05/29 职场文书
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android