<!-- 引入路由插件 -->
<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. 高级openg 混合,一个完整程序

    1.当片段着色器处理完一个片段之后,模板测试(stencil test)会开始执行,和深度测试一样,它也可能会丢弃片段,接下来,被保留的片段会进入深度测试2.每个窗口库都需要为你配置一个模板缓冲,但是 ...

  2. .ajax向后台传递数组(转)

    js部分代码 //创建一个测试数组 var boxIds = new Array(); boxIds.push(12182); boxIds.push(12183); boxIds.push(1218 ...

  3. 排序算法<No.6>【插入排序】

    算法,我在路上,将自己了解的算法内容全部梳理一遍! 今天介绍简单点的,插入排序. 首先,什么是插入排序,这个维基百科上有.个人的理解,就是将一个数插入到一个已经排好序的数列当中某个合适的位置,使得增加 ...

  4. 分析Ajax请求并抓取今日头条街拍美图

    项目说明 本项目以今日头条为例,通过分析Ajax请求来抓取网页数据. 有些网页请求得到的HTML代码里面并没有我们在浏览器中看到的内容.这是因为这些信息是通过Ajax加载并且通过JavaScript渲 ...

  5. 一文全解:利用谷歌深度学习框架Tensorflow识别手写数字图片(初学者篇)

    笔记整理者:王小草 笔记整理时间2017年2月24日 原文地址 http://blog.csdn.net/sinat_33761963/article/details/56837466?fps=1&a ...

  6. 黄聪:bootstrap的模态框modal插件在苹果iOS Safari下光标偏离问题解决方案

    一行CSS代码搞定: body.modal-open { position: fixed; width: 100%; }

  7. python selenium right click on an href and choose Save link as... on Chrome.

    From:https://stackoverflow.com/questions/42781483/right-click-on-an-href-and-choose-save-link-as-in- ...

  8. 【nginx】之proxy_pass

    在nginx中配置proxy_pass代理转发时,如果在proxy_pass后面的url加/,表示绝对根路径:如果没有/,表示相对路径,把匹配的路径部分也给代理走.     假设下面四种情况分别用 h ...

  9. QT 5 初学1 多窗口切分-续

    转载:omydocument 主窗口本身就带着菜单,工具栏,和状态栏,作为一个基本应用,这些都不用操心. 一个工具,需要把窗口切分成三部分,左边,右上,右下.左边显示选择的功能,右上是主窗口.右下作为 ...

  10. 配置Flink依赖的pom文件时报错:flink-clients_2.11 & flink-streaming-java_2.11

    在配置eclipse上的pom文件时,在配置到flink-clients_2.11 和 flink-streaming-java_2.11这两个jar包的时候不管怎么弄都报错而且包一大堆错. 最难受的 ...