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

路径可以是{

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

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

}

 <!-- 用id的方法的时候,获取还有页面跳转方法 -->
<a ui-sref="main{(id:1234)}"></a> //还有一种方法,但是需要引入服务$state
//location:'replace'跳转页面消除当前页面路径
$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. SPA项目中,404页面 和 登陆页面 对应的路由,应该怎样控制?

    SPA项目中,404页面 和 登陆页面 对应的路由,应该怎样控制? 可以这样做: 登陆之前,所有页面跳到 登陆页面:包括随便输入的路由地址. 登陆后,跳到相应页面:随便输入的.不存在的路由地址,才跳到 ...

  2. redis设计与实现-数据结构

    1,redis存储有5种数据对象,有7种数据结构底层实现 2,sds简单字符串 不直接使用字符数组或是string 封装了长度变量,加快获得字符串长度 杜绝缓冲区溢出(拼接字符串的时候不会因为内存里连 ...

  3. SmartGit 授权Non-Commerical

    Window: %APPDATA%/syntevo/SmartGit/ 搜索settings.xml, 并且移除这个文件 重启

  4. spark-streaming-kafka-0-8 和 0-10的使用区别

    一.spark-streaming-kafka-0-8_2.11-2.0.2.jar 1.pom.xml <!-- https://mvnrepository.com/artifact/org. ...

  5. Linux下批处理文件编写

    linux下的批处理文件,基本就是shell脚本文件. 一.最简单的脚本书写方法为: 1.新建一个文件,名字为test(自己定义的名字) touch test.sh 2.在里面编写脚本 程序必须以下面 ...

  6. TransportClient 新建index,mappings dynamic_templates。

    public void createIndex(TransportClient client, String index){ CreateIndexRequest request = new Crea ...

  7. 弄清SDI显示工程中的每一个信号,每一个逻辑

    弄清SDI显示工程中的每一个信号,每一个逻辑 1. FIFO外部逻辑控制 FIFO的读和写在不同的时钟域,所以读和写的控制逻辑应当分开写在不同的两个always块语句中. 2.播出端复位信号的产生 : ...

  8. http网站上传文件大小问题【没测试过】

    web.config <httpRuntime maxRequestLength="" executionTimeout=""/> IIS 请求筛选 ...

  9. idea下的调试配置

    react和ts的整合 https://github.com/Microsoft/TypeScript-React-Starter vue的 https://github.com/ducksoupde ...

  10. workerman vmstat服务器状态监控服务

    转载出自 :http://www.workerman.net/workerman-vmstat workerman vmstat服务器状态监控服务 vmstat 命令可以展现服务器的CPU使用率,内存 ...