首页
所有分类
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 相关文章推荐
函数式 JavaScript（一）简介
Jul 07 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
socket.io学习教程之基本应用（二）
Apr 29 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
vue init失败简单解决方法(终极版)
Dec 22 Javascript
JS实现百度搜索接口及链接功能实例代码
Feb 02 Javascript
详解vue中点击空白处隐藏div的实现（用指令实现）
Apr 19 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
小程序中英文混合排序问题解决
Aug 02 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 Javascript
如何用threejs实现实时多边形折射
May 07 Javascript
微信小程序自定义导航隐藏和显示功能
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
罗马尼亚购物网站(10) 摩纳哥购物网站(1) 白俄罗斯购物网站(3) 希腊购物网站(6) 缅甸购物网站(1) 约旦购物网站(1) 乌克兰购物网站(27) 越南购物网站(9) 亚洲购物网站(6) 马耳他购物网站(1)
You might like
PHP 高手之路（一）
2006/10/09 PHP
PHP和javascript常用正则表达式及用法实例
2014/07/01 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
2015/08/23 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
python并发编程之线程实例解析
2017/12/27 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
新西兰珠宝品牌：Michael Hill
2017/09/16 全球购物
Rentalcars.com中国：世界上最大的在线汽车租赁服务
2019/08/22 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
十一酒店活动方案
2014/02/20 职场文书
服务承诺口号
2014/05/22 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
2015年党小组工作总结
2015/05/26 职场文书
小学运动会宣传稿
2015/07/23 职场文书
详解python字符串驻留技术
2021/05/21 Python
抖音动画片，皮皮虾，《治愈系》动画在用这首REMIX作为背景音乐，Anak ，The last world with you完整版
2022/03/16 杂记