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 相关文章推荐
Jquery 组合form元素为json格式,asp.net反序列化
Jul 09 Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
jquery 手势密码插件
Mar 17 Javascript
JS使用正则表达式验证身份证号码
Jun 23 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 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实现简单实用的验证码类
2015/07/29 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
Electron整合React使用搭建开发环境的步骤详解
2020/06/07 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
python中函数传参详解
2016/07/03 Python
Python读写docx文件的方法
2018/05/08 Python
python实现文本界面网络聊天室
2018/12/12 Python
详解Python字符串切片
2019/05/20 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
方正Java笔试题
2014/07/03 面试题
大学生毕业鉴定
2014/01/31 职场文书
工作决心书范文
2014/03/11 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
工作简报怎么写
2015/07/21 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
Golang 如何实现函数的任意类型传参
2021/04/29 Golang
Pytorch使用shuffle打乱数据的操作
2021/05/20 Python
python使用shell脚本创建kafka连接器
2022/04/29 Python
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android