深究AngularJS之ui-router详解

2024-12-23 18:30:31

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里找到，如下图：

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 路由的简单介绍

之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router呢?这里简单明了的说明下ngRoute和ui-router的区别吧,其实也没很大的区别,主要的就是ngRoute针对于单视图,而ui-router可用于多视图(这里说的视图是指在页面内我们可控制的,可变化的区域). 比如我们点击了一个link,我们需要在视图中跳转到指定的一个页面,那么ngRoute
angular基于路由控制ui-router实现系统权限控制

前端去实现权限控制听起来有点扯淡(实际也有点扯淡),掩耳盗铃,主要是担心安全问题,但是如果在前后端分离的情况下,需要做一个带有权限控制的后台管理系统,angular基于ui-router应该怎么做呢? 权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限. 一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配
详解Angular路由 ng-route和ui-router的区别

什么是路由? 路由是AngularJS构建单页面应用的基础. 路由,就是网络数据或者请求进行分发的一个网络组件. 路由就是一个用于请求URL分发和跳转的一个应用组件,Angular中通过$routeProvider路由服务提供者进行核心的配置处理. ng路由 ng 路由是 AngularJS 官方提供的一种简单的路由操作. ng 路由主要分三个组成部分:路由指令.路由服务.路由服务提供者路由指令:ng-view ngView指令主要用于将路由指向的页面渲染到当前页面的布局中. 语法: <ng-
Angular.js中angular-ui-router的简单实践

开始之前一些说明 angular-ui-router的使用方法有很多,此文中,我们直接在控制器中使用,并完成一个简单的路由. 文中 Angular.js 的版本为 1.5.2 下载和安装直接通过 bower 来安装 angular-ui-router 使用 bower 安装 angular-ui-router 之前,首先需要安装 npm 和 bower .npm 是node.js的包管理工具,下载安装node.js,即可完成 npm 的安装通过 npm 安装 bower (如果未安装 bo
浅析angularJS中的ui-router和ng-grid模块

在家里闲着无聊,正好在网上找到了一个关于angular的教程,学习了一下angular的ui-router和ng-grid这两个模块,顺便模仿着做了一个小小的东西. 代码已经上传到github上,地址在这里哟https://github.com/wwervin72/Angular. 有兴趣的小伙伴可以看看.那么然后这里我们就先来了解一下这两个模块的用法. 我们先来说说ui-router这个模块,这个模块主要是用来实现深层次的路由的.其实angular有个内置的指令ng-route,如果在项目中没
Angularjs中UI Router全攻略

首先给大家介绍angular-ui-router的基本用法. 如何引用依赖angular-ui-router angular.module('app',["ui.router"]) .config(function($stateProvider){ $stateProvider.state(stateName, stateCofig); }) $stateProvider.state(stateName, stateConfig) stateName是string类型 stateCon
AngularJS路由Ui-router模块用法示例

本文实例讲述了AngularJS路由Ui-router模块用法.分享给大家供大家参考,具体如下: 由于某些设计原因,AngularJS原生的路由模块有一些缺点,比如说不支持view的嵌套等,所以有许多社区开始自己设计路由模块,最有代表性的就是ui-route了. ui-route是一个功能强大的路由模块,它在原生的ng-route模块上加强了其他方面的功能. 现在就开始做几个DEMO接触一下ui-route.  <!doctype html> <meta
Angularjs中UI Router的使用方法

学习使用angular中,ui-route是其中的一个难点,简单使用没什么问题,但涉及到多级嵌套,就感觉有茫然,查了很多资料,踩过很多坑,到目前为止也不能说对ui-route有全面了解:这里只是把填补的几个坑记录一下备忘: 1.abstract的使用: $stateProvider .state('shop',{ resolve:{ "shoplist":function($http){ return $http({ url:"/bookApp/data/shoplist.p
AngularJS 控制器 controller的详解

AngularJS 控制器 controller的详解一.控制器概念控制器在Angualrjs 中的作用是增强视图,并且是一个函数,用来向视图的作用域中添加额外的功能.我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在页面上创建一个新的控制器是,angularjs会生成并传递一个新的$scope给这个控制器.可以在这个控制器里初始化$scope,由于angularjs会负责处理控制器的实例化过程. 列子: var app=angular.module("myApp",
AngularJS 使用 UI Router 实现表单向导

我们看到这项技术已经应用在了许多的网页上.比如购物车,注册表单,入职流程以及许多多步表单,让用户更容易在线填写表单. 下面我们将构建它: 使用UI Router,它能内嵌状态,为每个状态显示不同的view,我们能让多步表单变得相当的容易. 为了快速的理解UI Router是怎样工作的,看我们的文章:AngularJS使用UI-Router路由让我们言归正传,开始创建我们的最棒的表单! 创建工程创建工程有个模板结构. 需要个布局文件 , 每个表单的视图文件, 格式文件, 以及JavaScri
Angularjs cookie 操作实例详解

摘要现在很多app采用内嵌h5的方式进行开发,有些数据会存在webveiw的cookie中,那么如果使用angularjs开发单页应用,就需要用到angularjs的cookie操作.这里提供一个简单的学习demo.方便快速上手. 一个例子 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="myapp"> <head> <meta http
Angularjs自定义指令Directive详解

今天学习angularjs自定义指令Directive. Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Admin". 在网页上放一个文本框和一个铵钮: <form id="form1" name="form1" ng-app="app" ng-controller="ctrl" novalidate> <i
基于AngularJS的简单使用详解

Angular Js 的初步认识和使用一: 1.模块化定义模块和控制器 ng-app="myapp" controller="myctrl" 指定模型 ng-model="" 获取的属性值: ng-bind="属性名"或者{{属性名}} 2.初始化模块(在Script中进行) var myapp1 =angular.module("myapp",[]); 3.定义模块的控制器,并依赖注入, $scope
Message组件实现发财UI 示例详解

目录引言支持的功能使用方法实现过程如何实现不同类型的切换? 如何实现Message的弹出和消失? 如何实现往下排列而非堆叠? 如何实现添加和移除.message-active类? 如何将隐藏的Message从DOM树中移除如何区分不同的Message? 最后的一个小细节引言最近在实现Message组件,就是会从屏幕顶端弹出的一个小提醒,过一会儿就消失了.我个人非常喜欢这个设计,感觉在后续的复用性也很高,于是就打算自己手写一个作为发财UI的组件支持的功能目前的Message有四
angularjs 缓存的使用详解

一.什么是缓存一个缓存就是一个组件,它可以透明地存储数据,以便未来可以更快地服务于请求. 缓存能够服务的请求越多,整体系统性能就提升得越多. 二.Angular 中的缓存 2.1 $cacheFactory 简介 $cacheFactory 是一个为所有Angular服务生成缓存对象的服务.在内部, $cacheFactory 会创建一个默认的缓存对象,即使我们并没有显示地创建. 要创建一个缓存对象,可以使用 $cacheFactory 通过一个ID创建一个缓存: var cache = $c
AngularJS封装指令方法详解

本文实例讲述了AngularJS封装指令方法.分享给大家供大家参考,具体如下: 引言:angularjs是一个中等重量级的前端开发框架 HTML是一门很好的为静态文本设计的语言,但要构建动态的web应用它就显的乏力了.通常,我们使用以下技术来解决静态网页技术在构建动态应用上的不足: 1.类库:类库是一类函数的集合,它能帮助你写web应用.这里起主导作用是你的代码,由你来决定何时使用类库.典型的类库,例如prototype.jQuery等. 2.框架:框架式一种特殊的.已经实现的web应用,你只需
angularJS中$apply()方法详解

对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的阻力还真是不少.不过我相信,只要下功夫,即使是反人类的设计也不是什么大的问题. Okay,废话不多说.为了弄明白angular JS为何物,我先是从Scope开始.那么什么是Scope呢?借用官方文档的一段话: 复制代码代码如下: "scope is an object that refers to the application model. It is an execution c

深究AngularJS之ui-router详解

相关推荐

随机推荐