深究AngularJS之ui-router详解

网络编程 2025/1/12 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

1.配置使用ui-router

1.1导入js文件

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

<script type="text/javascript" src="/UploadFiles/2021-04-02/angular.min.js">

1.2注入angular模块


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


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



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="/UploadFiles/2021-04-02/angular.min.js">

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,angular,ui,router,angular,ui,router.js

标签：

angularjs,ui,router,angular,ui,router,angular,ui,router.js

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“深究AngularJS之ui-router详解”

暂无深究AngularJS之ui-router详解的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2025年01月12日

深究AngularJS之ui-router详解

angularjs,ui,router,angular,ui,router,angular,ui,router.js

详解vue slot插槽的使用方法

微信小程序自定义导航隐藏和显示功能

评论“深究AngularJS之ui-router详解”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接