AngularJS路由Ui-router模块用法示例
本文实例讲述了AngularJS路由Ui-router模块用法。分享给大家供大家参考，具体如下：
由于某些设计原因，AngularJS原生的路由模块有一些缺点，比如说不支持view的嵌套等，所以有许多社区开始自己设计路由模块，最有代表性的就是ui-route了。
ui-route是一个功能强大的路由模块，它在原生的ng-route模块上加强了其他方面的功能。
现在就开始做几个DEMO接触一下ui-route。
<!--初始页面--> <!doctype html> <meta charset="UTF-8"> <html> <head> <link href="self.css" rel="external nofollow" rel="stylesheet"> </head> <body > <div ng-app="myApp"> <div><a ui-sref = "index">首页</a></div> <div ui-view></div><!--这里是路由视图存放的地方--> </div> <script src="angular.min.js"></script> <script src="angular-ui-router.js"></script> <script src="test2.js"></script> </body> </html>
首先必须引用angular-ui-router.js文件。这个文件是区别于AngularJs的angular-route.js文件的。而且必须把该文件放在angular.min.js下面。
观察一下Html的body代码，可以发现有三个地方与使用原生的ng-route时的body代码不同。他们分别是ui-sref ， index 以及ui-view 。先跳过，看一下如何初始化ui-route模块。
初始化ui-route模块：
var app = angular.module('myApp',['ui.router']);
app.config(["$stateProvider",function($stateProvider){
$stateProvider
.state("index",{
url:'/',
template:'<div>我是首页内容</div>'
})
}]);
首先，和原生ng-route路由模块相似的是，必须先把ui-route注入。然后再进行具体的配置。与原生的ng-route不同的是，ui-route用state() 代替了原生的when() ，它在when()，的基础上新增了一个参数，这里是index，用以区分这部分路由对哪一个命令进行响应。
回到之前的<div><a ui-sref = "index">首页</a></div> ，大概就知道他们视图和它之间的关系了。ui-view 代替了以往的ng-view ，ui-sref 替换掉了以前的ng-href，而它也不再是指向链接，而是指向“导航”的名字。
其中的url属性可以唯一标识改路由的后续地址，用以跟后面的路由进行区分。
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关推荐
-
详解AngularJs ui-router 路由的简单介绍
之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router呢?这里简单明了的说明下ngRoute和ui-router的区别吧,其实也没很大的区别,主要的就是ngRoute针对于单视图,而ui-router可用于多视图(这里说的视图是指在页面内我们可控制的,可变化的区域). 比如我们点击了一个link,我们需要在视图中跳转到指定的一个页面,那么ngRoute
-
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
-
详解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全攻略
首先给大家介绍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详解
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基于路由控制ui-router实现系统权限控制
前端去实现权限控制听起来有点扯淡(实际也有点扯淡),掩耳盗铃,主要是担心安全问题,但是如果在前后端分离的情况下,需要做一个带有权限控制的后台管理系统,angular基于ui-router应该怎么做呢? 权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限. 一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配
-
浅析angularJS中的ui-router和ng-grid模块
在家里闲着无聊,正好在网上找到了一个关于angular的教程,学习了一下angular的ui-router和ng-grid这两个模块,顺便模仿着做了一个小小的东西. 代码已经上传到github上,地址在这里哟https://github.com/wwervin72/Angular. 有兴趣的小伙伴可以看看.那么然后这里我们就先来了解一下这两个模块的用法. 我们先来说说ui-router这个模块,这个模块主要是用来实现深层次的路由的.其实angular有个内置的指令ng-route,如果在项目中没
-
AngularJS 使用 UI Router 实现表单向导
我们看到这项技术已经应用在了许多的网页上.比如购物车,注册表单,入职流程以及许多多步表单,让用户更容易在线填写表单. 下面我们将构建它: 使用UI Router,它能内嵌状态,为每个状态显示不同的view,我们能让多步表单变得相当的容易. 为了快速的理解UI Router是怎样工作的,看我们的文章:AngularJS使用UI-Router路由 让我们言归正传,开始创建我们的最棒的表单! 创建工程 创建工程有个模板结构. 需要个 布局文件 , 每个表单的视图文件, 格式文件, 以及JavaScri
-
python中hashlib模块用法示例
我们以前介绍过一篇Python加密的文章:Python 加密的实例详解.今天我们看看python中hashlib模块用法示例,具体如下. hashlib hashlib主要提供字符加密功能,将md5和sha模块整合到了一起,支持md5,sha1, sha224, sha256, sha384, sha512等算法 具体应用 #!/usr/bin/env python # -*- coding: UTF-8 -*- #pyversion:python3.5 #owner:fuzj import h
-
AngularJS路由Ui-router模块用法示例
本文实例讲述了AngularJS路由Ui-router模块用法.分享给大家供大家参考,具体如下: 由于某些设计原因,AngularJS原生的路由模块有一些缺点,比如说不支持view的嵌套等,所以有许多社区开始自己设计路由模块,最有代表性的就是ui-route了. ui-route是一个功能强大的路由模块,它在原生的ng-route模块上加强了其他方面的功能. 现在就开始做几个DEMO接触一下ui-route. <!--初始页面--> <!doctype html> <meta
-
nodejs入门教程六：express模块用法示例
本文实例讲述了nodejs入门教程之express模块用法.分享给大家供大家参考,具体如下: /** * Created by Dason on 2017/3/28. */ var express = require('express'); var morgan = require('morgan');//打印日志的中间件 //创建express 的实例 var app = express(); /** * 中间件: * Connect: Node.js的中间件框架 * 分层处理:每层实现一个功
-
Python pymongo模块用法示例
本文实例讲述了Python pymongo模块用法.分享给大家供大家参考,具体如下: MongoDB优点 MongoDB是一个为当代web应用而生的noSQL数据库,它有如下优点: 1.文档型存储.可以把关系型数据库的表理解为一个电子表格,列表示字段,每行的记录其实是按照列的字段顺序排列的值得元组.而存储在MongoDB中的文档被存储为键-值对的形式,值却可以是任意类型且可以嵌套.之前在用关系型数据库的时候,我们把产品信息打散到不同的表中,要通过关系表或者使用join拼接成复杂的SQL语句的方式
-
Python minidom模块用法示例【DOM写入和解析XML】
本文实例讲述了Python minidom模块用法.分享给大家供大家参考,具体如下: 一.DOM写XML文件 # -*- coding:utf-8 -*- #!python3 #导入minidom from xml.dom import minidom # 1.创建DOM树对象 dom=minidom.Document() # 2.创建根节点.每次都要用DOM对象来创建任何节点. root_node=dom.createElement('root') # 3.用DOM对象添加根节点 dom.ap
-
Python定时任务sched模块用法示例
本文实例讲述了Python定时任务sched模块用法.分享给大家供大家参考,具体如下: 通过sched模块可以实现通过自定义时间,自定义函数,自定义优先级来执行函数. 范例一 import time import sched schedule = sched.scheduler( time.time,time.sleep) def func(string1): print "now excuted func is %s"%string1 print "start"
-
NodeJS http模块用法示例【创建web服务器/客户端】
本文实例讲述了NodeJS http模块用法.分享给大家供大家参考,具体如下: Node.js提供了http模块,用于搭建HTTP服务端和客户端. 创建Web服务器 /** * node-http 服务端 */ let http = require('http'); let url = require('url'); let fs = require('fs'); // 创建服务器 let server = http.createServer((req, res) => { // 解析请求 le
-
Python logging模块用法示例
本文实例讲述了Python logging模块用法.分享给大家供大家参考,具体如下: logging模块 函数式简单配置 import logging logging.debug('debug message') logging.info('info message') logging.warning('warning message') logging.error('error message') logging.critical('critical message') logging.bas