<!-- 引入路由插件 -->
<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. 打造mac上最好用的Terminal

    出处:https://blog.csdn.net/kebing1011/article/details/46934533?utm_source=blogxgwz0

  2. create-react-app 搭建的项目中,引入 webpack-bundle-analyzer 打包分析

    安装npm intall webpack-bundle-analyzer --save-dev 在 config/webpack.config.prod.js 文件(推荐)或 config/webpa ...

  3. scrapy 项目通过scrapyd部署

    年前的时候采用scrapy 爬取了某网站的数据,当时只是通过crawl 来运行了爬虫,现在还想通过持续的爬取数据所以需要把爬虫部署起来,查了下文档可以采用scrapyd来部署scrapy项目,scra ...

  4. Redis set数据结构

    set里的数据不能重复 1. 增加set1,值为 a b c d 1 2 3 2. 返回集合元素的数量 3. 重命名set1为set100 4. 查看集合中的成员 5.sdiff set100 set ...

  5. gcc系强制链接静态库(同时有.so和.a)

    1. 坑多的办法 -static 如果需要链接成不依赖任何so文件的程序,用ldd查看显示为"not a dynamic executable",但是这个选项时不推荐的. 即使像这 ...

  6. 安装chrome扩展json-handle

    chrome插件安装 方式一,在线安装 直接插到json-handle地址,添加即可 https://chrome.google.com/webstore/detail/json-handle/iah ...

  7. Vivado HLS初识---阅读《vivado design suite tutorial-high-level synthesis》(2)

    Vivado HLS初识---阅读<vivado design suite tutorial-high-level synthesis>(2) 1.实验目的 2.启动命令行  将命令行切换 ...

  8. [CMAKE] 详解CMakeLists.txt文件

    [快速查询]https://cmake.org/cmake/help/v2.8.8/cmake.html#section_Commands 1 CMake简介 CMake是跨平台编译工具,比make更 ...

  9. HBase与Zookeeper数据结构查询

    一.前言 最近一年了吧,总是忙于特定项目的业务分析和顶层设计,很少花时间和精力放到具体的技术细节,感觉除了架构理念和分析能力的提升,在具体技术层次却并没有多大的进步.因为一些原因,总被人问及一些技术细 ...

  10. C++进阶--静态多态

    //############################################################################ /* * 多态 */ // 常见的动态多态 ...