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生成asp.net服务器控件的代码
Feb 04 Javascript
jquery中动态效果小结
Dec 16 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
jQuery代码优化 事件委托篇
Nov 01 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
js实现感应鼠标图片透明度变化的方法
Feb 20 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
Mar 06 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 Javascript
微信小程序request请求封装,验签代码实例
Dec 04 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写出自己的BLOG系统 2
2010/04/12 PHP
PHP下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
Prototype ObjectRange对象学习
2009/07/19 Javascript
比较搞笑的js陷阱题
2010/02/07 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
Python实现二分法算法实例
2015/02/02 Python
Python制作数据导入导出工具
2015/07/31 Python
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
python实现按行分割文件
2019/07/22 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
银行实习人员自我鉴定
2013/09/22 职场文书
红色故事演讲稿
2014/05/22 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫
Java界面编程实现界面跳转
2022/06/16 Java/Android
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers