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实现拆分姓名的方法(纯JS版)
May 08 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
详解angular路由高亮之RouterLinkActive
Apr 28 Javascript
vue项目动态设置页面title及是否缓存页面的问题
Nov 08 Javascript
react组件基本用法示例小结
Apr 27 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设计模式 Prototype (原型模式)代码
2011/06/26 PHP
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
php实现按照权重随机排序数据的方法
2015/01/09 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
浅谈python函数之作用域(python3.5)
2017/10/27 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
大学毕业感言100字
2014/02/03 职场文书
合作意向书范本
2014/03/31 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
关于美容院的活动方案
2014/08/14 职场文书
加强作风建设心得体会
2014/10/22 职场文书
青年文明号申报材料
2014/12/23 职场文书
2015年度党员个人总结
2015/02/14 职场文书
检讨书怎么写?
2019/06/21 职场文书
matlab xlabel位置的设置方式
2021/05/21 Python