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 相关文章推荐
JSP跨iframe如何传递参数实现代码
Sep 21 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
浅析angularJS中的ui-router和ng-grid模块
May 20 Javascript
AngularJS之依赖注入模拟实现
Aug 19 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
解决vue处理axios post请求传参的问题
Mar 05 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 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
第三节 定义一个类 [3]
2006/10/09 PHP
php类
2006/11/27 PHP
How do I change MySQL timezone?
2008/03/26 PHP
php的ajax框架xajax入门与试用介绍
2010/12/19 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
vue源码nextTick使用及原理解析
2019/08/13 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
Python生成随机MAC地址
2015/03/10 Python
python MySQLdb使用教程详解
2018/03/20 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
CSS3近阶段篇之酷炫的3D旋转透视
2016/04/28 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
环保倡议书格式范文
2014/05/14 职场文书
质量标语大全
2014/06/12 职场文书
政府采购方案
2014/06/12 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
幼儿园开学通知
2015/04/24 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server