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跨页面保存变量做菜单的方法
Jan 17 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 Javascript
Vue官方文档梳理之全局配置
Nov 22 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 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
js下函数般调用正则的方法附代码
2008/06/22 PHP
php发送邮件的问题详解
2015/06/22 PHP
使用PHP编写发红包程序
2015/07/22 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
jQuery 使用手册(四)
2009/09/23 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
微信小程序生成二维码的示例代码
2019/03/29 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
详解px单位html5响应式方案
2018/03/08 HTML / CSS
介绍一下Linux文件的记录形式
2013/09/29 面试题
信息专业个人的自我评价
2013/12/27 职场文书
商场促销活动方案
2014/02/08 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
《美丽的黄昏》教学反思
2014/02/28 职场文书
财务总监管理职责范文
2014/03/09 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
2014年检验科工作总结
2014/11/22 职场文书
简单介绍Python的第三方库yaml
2021/06/18 Python
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
基于redis+lua进行限流的方法
2022/07/23 Redis