Angular.js中angular-ui-router的简单实践

开始之前

一些说明

  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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解AngularJs ui-router 路由的简单介绍

    之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router呢?这里简单明了的说明下ngRoute和ui-router的区别吧,其实也没很大的区别,主要的就是ngRoute针对于单视图,而ui-router可用于多视图(这里说的视图是指在页面内我们可控制的,可变化的区域). 比如我们点击了一个link,我们需要在视图中跳转到指定的一个页面,那么ngRoute

  • Angularjs中UI Router全攻略

    首先给大家介绍angular-ui-router的基本用法. 如何引用依赖angular-ui-router angular.module('app',["ui.router"]) .config(function($stateProvider){ $stateProvider.state(stateName, stateCofig); }) $stateProvider.state(stateName, stateConfig) stateName是string类型 stateCon

  • 浅析angularJS中的ui-router和ng-grid模块

    浅析angularJS中的ui-router和ng-grid模块

    在家里闲着无聊,正好在网上找到了一个关于angular的教程,学习了一下angular的ui-router和ng-grid这两个模块,顺便模仿着做了一个小小的东西. 代码已经上传到github上,地址在这里哟https://github.com/wwervin72/Angular. 有兴趣的小伙伴可以看看.那么然后这里我们就先来了解一下这两个模块的用法. 我们先来说说ui-router这个模块,这个模块主要是用来实现深层次的路由的.其实angular有个内置的指令ng-route,如果在项目中没

  • angular基于路由控制ui-router实现系统权限控制

    前端去实现权限控制听起来有点扯淡(实际也有点扯淡),掩耳盗铃,主要是担心安全问题,但是如果在前后端分离的情况下,需要做一个带有权限控制的后台管理系统,angular基于ui-router应该怎么做呢? 权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限. 一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配

  • 深究AngularJS之ui-router详解

    深究AngularJS之ui-router详解

    1.配置使用ui-router 1.1导入js文件 需要注意的是:必须导入angular.min.js这个文件,且angular.min.js必须导入在angular-ui-router.min.js前面. <script type="text/javascript" src="JS/angular.min.js"></script> <script type="text/javascript" src="

  • 详解Angular路由 ng-route和ui-router的区别

    详解Angular路由 ng-route和ui-router的区别

    什么是路由? 路由是AngularJS构建单页面应用的基础. 路由,就是网络数据或者请求进行分发的一个网络组件. 路由就是一个用于请求URL分发和跳转的一个应用组件,Angular中通过$routeProvider路由服务提供者进行核心的配置处理. ng路由 ng 路由是 AngularJS 官方提供的一种简单的路由操作. ng 路由主要分三个组成部分:路由指令.路由服务.路由服务提供者 路由指令:ng-view ngView指令主要用于将路由指向的页面渲染到当前页面的布局中. 语法: <ng-

  • Angularjs中UI Router的使用方法

    学习使用angular中,ui-route是其中的一个难点,简单使用没什么问题,但涉及到多级嵌套,就感觉有茫然,查了很多资料,踩过很多坑,到目前为止也不能说对ui-route有全面了解:这里只是把填补的几个坑记录一下备忘: 1.abstract的使用: $stateProvider .state('shop',{ resolve:{ "shoplist":function($http){ return $http({ url:"/bookApp/data/shoplist.p

  • AngularJS路由Ui-router模块用法示例

    本文实例讲述了AngularJS路由Ui-router模块用法.分享给大家供大家参考,具体如下: 由于某些设计原因,AngularJS原生的路由模块有一些缺点,比如说不支持view的嵌套等,所以有许多社区开始自己设计路由模块,最有代表性的就是ui-route了. ui-route是一个功能强大的路由模块,它在原生的ng-route模块上加强了其他方面的功能. 现在就开始做几个DEMO接触一下ui-route. <!--初始页面--> <!doctype html> <meta

  • Angular中使用ui router实现系统权限控制及开发遇到问题

    前端去实现权限控制听起来有点扯淡(实际也有点扯淡),掩耳盗铃,主要是担心安全问题,但是如果在前后端分离的情况下,需要做一个带有权限控制的后台管理系统,angular基于ui-router应该怎么做呢? 权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限. 一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配

  • Angular.js中$resource高大上的数据交互详解

    本文主要给大家介绍的是关于Angular.js中$resource数据交互的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: $resource 创建一个resource对象的工厂函数,可以让你安全的和RESFUL服务端进行数据交互. 需要注入 ngResource 模块.angular-resource[.min].js 默认情况下,末尾斜杠(可以引起后端服务器不期望出现的行为)将从计算后的URL中剥离. 这个可以通过$resourceProvider配置: app.config(

  • 浅谈angular.js中实现双向绑定的方法$watch $digest $apply

    Angular.js 中的特性,双向绑定. 多么神奇的功能,让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $apply 他们的区别是什么,我们来介绍下: $watch 这是一个监听 scope 上数据的监听器 方法说明: $scope.$watch('参数',function(newValue,oldValue){ //逻辑处理 }) 上面我们就是创建了一个监听器. '参数' 就是$scope

  • Angular.js中window.onload(),$(document).ready()的写法浅析

    一,问题发现: 最近公司有个微信公众号项目,为了方便直接使用anular.js+ionic进行开发,里面有使用到echarts图表,具体开发中发现echarts在初始化绑定图表的DOM节点时,一直提示该节点不合法;可是明明已经把代码写在了window.onload()中了,又改成$(function(){})结果还是不行. 二,解决方案 1使用angular.element <script type="text/javascript"> angular.element(wi

  • Angular.js中数组操作的方法教程

    前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢.最近在学习Angular.js,将自己学习的一些经验技巧分享给大家,下面本文将给大家介绍关于Angular.js中数组操作的相关资料,话不多说了,来一起看看详细的介绍. 1:ng-click,ng-model,ng-bind,ng-class,ng-hide,ng-app 2:placeholder, 3:{}中加入代码":true|false",使用逗号隔开,可以

  • Angular.JS中select下拉框设置value的方法

    Angular.JS中select下拉框设置value的方法

    前言 本文主要给大家介绍的是关于Angular.JS中select下拉框设置value的相关内容,非常出来供大家参考学习,下面来一起看看详细的介绍: 最近在系统中增加一个查询的筛选条件,通过下拉框选取,用的是Angular常见的ng-options 指令: <select id="selectDetectUnit" class="form-control" ng-model="detectUnits" ng-options="de

  • 解决Angular.js中使用Swiper插件不能滑动的问题

    我们都知道swiper是交互体验十分好的轮播插件 但是通过angular(ng-repeat)循环出来的swiper不能轮播的解决方案 通常我们都是通过以下方法来执行: html <div class="swiper-container" ng-controller="swiperController"> <div class="swiper-wrapper"> <div class="swiper-sli

  • js中获取键盘事件的简单实现方法

    <script type="text/javascript" language=JavaScript charset="UTF-8"> document.onkeydown=function(event){ var e = event || window.event || arguments.callee.caller.arguments[0]; if(e && e.keyCode==27){ // 按 Esc //要做的事情 } if(

  • js中遍历Map对象的简单实例

    实例如下: console.log(jsonData);//火狐控制台打印输出: Object { fileNumber="文件编号", fileName="文件名称"} for(var key in jsonData) console.log("属性:" + key + ",值:"+ jsonData[key]); } 打印输出: 属性:fileNumber, 值:文件编号 属性:fileName, 值:文件名称 以上这篇j

  • Angular.js中angular-ui-router的简单实践

    开始之前 一些说明 angular-ui-router的使用方法有很多,此文中,我们直接在控制器中使用,并完成一个简单的路由. 文中 Angular.js 的版本为 1.5.2 下载和安装 直接通过 bower 来安装 angular-ui-router 使用 bower 安装 angular-ui-router 之前,首先需要安装 npm 和 bower .npm 是node.js的包管理工具,下载安装node.js,即可完成 npm 的安装 通过 npm 安装 bower (如果未安装 bo

随机推荐