1.  
  1. <!-- 引入路由插件 -->
  2. <script src="vendor/angular-ui-router/release/angular-ui-router.min.js" charset="utf-8"></script>
  3.  
  4. <!-- 指令ui-view就是路由要放置的地方 -->
  5. <div ui-view></div>
  6. angular.module('app').config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
  7. //$stateProvider路由模块,配置状态,可以放入多个.state
  8. //state(路由id,{路径,路由的url,业务逻辑})
  9. $stateProvider.state('main',{
  10. url:'/main',
  11. templateUrl:'view/main.html',
  12. controller:'mainCtrl'
  13. });
  14. //默认路径,如果都没有匹配到就转到main上面
  15. $urlRouterProvider.otherwise('main');
  16.  
  17. }])

路径可以是{

'/home':只匹配'/home'

'/user/id'、'user/{id}':匹配 '/user/123'或者'/user/'

}

  1. <!-- 用id的方法的时候,获取还有页面跳转方法 -->
  2. <a ui-sref="main{(id:1234)}"></a>
  3.  
  4. //还有一种方法,但是需要引入服务$state
  5. //location:'replace'跳转页面消除当前页面路径
  6. $state.go('main',{id:123},{location:'replace'});

angularjs的路由ui.router的更多相关文章

  1. angularjs ngRoute和ui.router对比

    ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...

  2. AngularJS学习之 ui router

    1.安装 bower install --save angular_ui-router 2.在项目主页面 index.html中添加 <div ui-view="">& ...

  3. AngularJS 使用 UI Router 实现表单向导

    Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...

  4. [转]AngularJS 使用 UI Router 实现表单向导

    本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...

  5. [转]AngularJS+UI Router(1) 多步表单

    本文转自:https://www.zybuluo.com/dreamapplehappy/note/54448 多步表单的实现   在线demo演示地址https://rawgit.com/dream ...

  6. angular ui.router 路由传参数

    angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...

  7. angularJS ui router 多视图单独刷新问题

    场景:视图层级如下 view1 --view11 --view111 需求:view11的一个动作过后,单独刷新view12 解决方式:修改层级设计 view1 --view11 --view111 ...

  8. AngularJs ui-router 路由的简单介绍

    之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router ...

  9. AngularJs ui-router 路由的介绍

    AngularJs ui-router 路由介绍 野兽之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Ang ...

随机推荐

  1. bzoj 3600 没有人的算术——二叉查找树动态标号

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3600 已知 l 和 r 的排名,想快速知道 k 的排名.那么建一个 BIT ,用已知的排名做 ...

  2. 读DataSnap源代码(三)

    function TWebRequestHandler.HandleRequest(Request: TWebRequest; Response: TWebResponse): Boolean; va ...

  3. STM32的优先级的理解及其使用

    1 组只代表主优先级和副优先级数量的配比,组之间没有优先级的概念. 2 不同的主优先级中断之间,高优先级中断可以打断正在执行的低优先级中断,即可以形成中断嵌套. 3 主优先级相同的中断,高副优先级中断 ...

  4. TL-WDR4310 v1 救砖

    一.引出ttl线 用万用表测量,可以确定“GND”,第一个pin(焊盘为方的)为“Tx”,接下去依次为“Rx”.”GND”.”VCC“. 二.工具准备 下载tptpd软件工具,图标为 三.开始刷机 1 ...

  5. zookeeper选举状态介绍 摘自https://cloud.tencent.com/developer/news/303891

    zookeeper集群 配置多个实例共同构成一个集群对外提供服务以达到水平扩展的目的,每个服务器上的数据是相同的,每一个服务器均可以对外提供读和写的服务,这点和redis是相同的,即对客户端来讲每个服 ...

  6. [转]Python中出错:ImportError: No module named win32com.client

    Python中出错:ImportError: No module named win32com.client [问题] [已解决]Python中处理操作Excel中的图表(Chart,Graph) 的 ...

  7. Centos 使用find查找

    CentOS查找目录或文件 find / -name svn 查找目录:find /(查找范围) -name '查找关键字' -type d查找文件:find /(查找范围) -name 查找关键字 ...

  8. Redis几种数据类型的应用场景(转)

    原文地址:https://blog.csdn.net/xiaoliuliu2050/article/details/73250708

  9. 禁用触发器的N种方法

    一.禁用和启用单个触发器 禁用: ALTER TABLE trig_example DISABLE TRIGGER trig1 GO   恢复: ALTER TABLE trig_example EN ...

  10. ToString()、Convert.ToString()、(string)、as string 的区别

    通常 object 到 string 有四种方式(假设有object obj):obj.ToString().Convert.ToString().(string)obj.obj as string. ...