Angular.js中angular-ui-router的简单实践


Posted in Javascript onJuly 18, 2017

开始之前

一些说明

  1. angular-ui-router的使用方法有很多,此文中,我们直接在控制器中使用,并完成一个简单的路由。
  2. 文中 Angular.js 的版本为 1.5.2

下载和安装

直接通过 bower 来安装 angular-ui-router

使用 bower 安装 angular-ui-router 之前,首先需要安装 npm 和 bower 。npm 是node.js的包管理工具,下载安装node.js,即可完成 npm 的安装

通过 npm 安装 bower (如果未安装 bower):

npm install -g bower

安装 angular-ui-router

bower install --save angular-ui-router

使用 angular-ui-router

首先要在 angular.module 方法中,注入 angular-ui-router

var app = angular.module('myApp',['ui.router']);

定义路由规则

app.config(function($stateProvider , $urlRouterProvider){

 /**
  * $stateProvider 提供的 state 方法包含两个参数
  * @param 路由名称 String
  * @param 路由规则 Object
  * 此方法用来定义路由名称和规则
  */
 $stateProvider.state('user' , {
  url : "/user/:uid",
  controller : 'MyCtrl'
 });
 
 // 将未定义的路由重定向
 $urlRouterProvider.otherwise("/");
});

在控制器中使用

app.controller("MyCtrl" , function($scope , $state){
 // 监听路由变化
 $scope.$on('$stateChangeSuccess' , function(){
  var route_name = $state.current.name; // 获取当前路由名称
  if(route_name === 'user'){
   var uid = $state.params.uid // 获取路由参数
   console.log(uid);
  }
 });
 
 // 主动路由跳转:路由名称,路由参数
 $state.go('user' , {'uid' : 88} );
});

其他

在 html 中,用 <a> 标签指定路由的写法为:

<a href="#/user/88" rel="external nofollow" >Tom</a>

angular.js的路由,在浏览器url地址栏以这样的形式展现:www.example.com/my/page#/user/88

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 进度条 实现代码
Jul 30 Javascript
javascript常用对话框小集
Sep 13 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 Javascript
JS document对象简单用法完整示例
Jan 14 Javascript
vue中使用腾讯云Im的示例
Oct 23 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 #jQuery
jquery版轮播图效果和extend扩展
Jul 18 #jQuery
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 #Javascript
深入解析Vue 组件命名那些事
Jul 18 #Javascript
js实现本地图片文件拖拽效果
Jul 18 #Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 #Javascript
js实现移动端导航点击自动滑动效果
Jul 18 #Javascript
You might like
屏蔽浏览器缓存另类方法
2006/10/09 PHP
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
利用Psyco提升Python运行速度
2014/12/24 Python
Python实现简单截取中文字符串的方法
2015/06/15 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
python3实现单目标粒子群算法
2019/11/14 Python
关于python中的xpath解析定位
2020/03/06 Python
新西兰优惠网站:Treat Me
2019/07/04 全球购物
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
课程设计心得体会
2013/12/28 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
客户答谢会致辞
2015/01/20 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电