首页
所有分类
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 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
javascript实现动态CSS换肤技术的脚本
Jun 29 Javascript
javascript+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
浅析JavaScript动画
Jun 10 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
AngularJS 模块化详解及实例代码
Sep 14 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
Vue路由模块化配置的完整步骤
Aug 14 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 Javascript
深入理解Vue的数据响应式
May 15 Vue.js
微信小程序自定义导航隐藏和显示功能
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
OVERLORD(1) 数据表(1) 时钟(1) mysql(6) SSH(3) 算法(1) 2022年7月新番(1) 人人对战(1) character(1) Vscode(3)
You might like
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
JavaScript国旗变换效果代码
2008/08/13 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
jquery实现tab选项卡切换效果（悬停、下方横线动画位移）
2017/05/05 jQuery
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
原生JS实现微信通讯录
2020/06/18 Javascript
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
pycharm2020.1.2永久破解激活教程，实测有效
2020/10/29 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
美国时尚配饰品牌：Dooney & Bourke
2017/11/14 全球购物
最新创业融资计划书
2014/01/19 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
新学期开学寄语2016
2015/12/04 职场文书
MySQL 十大常用字符串函数详解
2021/06/30 MySQL
python3实现常见的排序算法(示例代码)
2021/07/04 Python
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电