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 相关文章推荐
JS数学函数Exp使用说明
Aug 09 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 Javascript
JS数组交集、并集、差集的示例代码
Aug 23 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 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
PHP sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
python中元类用法实例
2014/10/10 Python
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
python简单操作excle的方法
2018/09/12 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
查看keras的默认backend实现方式
2020/06/19 Python
党员岗位承诺口号大全
2014/03/28 职场文书
学期评语大全
2014/04/30 职场文书
社区反邪教工作方案
2014/06/16 职场文书
2015年测量员工作总结
2015/05/23 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
Python字符串常规操作小结
2022/04/03 Python