详解Angular路由 ng-route和ui-router的区别
什么是路由？
路由是AngularJS构建单页面应用的基础。
路由，就是网络数据或者请求进行分发的一个网络组件。
路由就是一个用于请求URL分发和跳转的一个应用组件，Angular中通过$routeProvider路由服务提供者进行核心的配置处理。
ng路由
ng 路由是 AngularJS 官方提供的一种简单的路由操作。
ng 路由主要分三个组成部分：路由指令、路由服务、路由服务提供者
路由指令:ng-view
ngView指令主要用于将路由指向的页面渲染到当前页面的布局中。
语法：
<ng-view [onload=”string”] [autoscroll]=”string”></ng-view>
- onload:当视图发生改变时执行属性值中的表达式
- autoscroll:当视图发生改变时自动触发$anchorScroll事件
事件：
路由视图一旦加载时，就会自动触发$viewContentLoaded 事件
路由提供者：$routeProvider
描述：
内置服务对象 内置服务对象 $routeProvider $routeProvider $routeProvider 主要用于进行路由配置 主要用于进行路由配置
该服务的使用必须依赖 该服务的使用必须依赖 该服务的使用必须依赖 ngRoute 模块，也就是项目中必须添加 模块，也就是项目中必须添加 animate-route.js
主要方法：
when( path, route); 用于在访问 path 路径时，跳转到 route 指定的视图 |-- path：路由跳转的径 |-- route：路由对象 <组件 对象 >，一个 JSON对象 otherwise(params);用于在访问不存的路径时，跳转的默认路径或者视图 |-- params：指定路径或者路由对象
内置服务<路由服务>：$route &$routeParams
$route 服务被用于进行深层超链接信息的描述， 它会监听 它会监听 $location.url() 地址并进行url 地址和指定的路由视图之间映射关系。
$routeParams服务允许开发人员可以进行路由中参数的处理。
ui路由
Angular官方提供的 ng 路由已经具备了非常强大的功能，但是在某些情况下存在一些不太好用的地方，项目中如果出现大量路由深层嵌套话官方的ng路由来处理就不是非常适合了。
第三方提供了一种强大的路由处理功能，对于路由嵌套也可以非常简单的进行处理。
ui-route：ui路由，第三方路由
ui路由，主要的功能是项目中的路由操作，和官方的ng路由相比较，它的处理方式更加简洁和易用，尤其是涉及到项目中大量路由嵌套时，使用ui路由能更加快捷方便的完成项目中路由的跳转处理。
ui-view：指令
ui -view是 ui 路由中模板页面用于数据展示的指令，可以作为标签的属性出现，同样也可以作为标签的属性出现
<div ui -viewviewviewview></div>> <ui -view></uiview>
同时可以给 ui -view 指令命名，用于在路由跳转时对应名称的 ui -view 上展示对应的数据
总结：两者区别
① ng路由实现不了多页面应用
② ui路由：更加方便地处理路由嵌套，在state（）函数中进行即可。
③ngRoute 和 ui-route 相比:
$when —> $state 路由状态配置的时候
$routeParams —> $stateParams 带参数的时候的配置
$routeProvider —> $stateProvider 依赖注入的模块
<div ng-view></div> —> <div ui-view></div> 页面中绑定的指令
④ uiRoute中可以嵌套更深层次的路由，也就是路由中可以有路由（大致有两种情况：1.横向的 2.纵向的）。
（1）嵌套路由
（2）多视图路由
ngRoute中就不能嵌套更深的路由。
用代码看一下两者的区别：
ng路由：首先要配置注册 ngRoute
代码如下：
var app = angular.module(“myApp", ['ngRoute']);
app.config(["$routeProvider",function($routeProvider){
}]);
ui路由：用hello world举例子：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>ui-route</title>
<script src="js/lib/angular.min.js" ></script>
<script src="js/lib/angular-ui-router.min.js"></script>
</head>
<style type="text/css">
.active{
color:red;
font-weight:bold;
}
</style>
<body>
<ul>
<li><a ui-sref="hello" ui-sref-active='active'>Hello</a></li>
<li><a ui-sref="world" ui-sref-active='active'>world</a></li>
</ul>
<div>
<ui-view></ui-view>
</div>
</body>
<script>
var app=angular.module("myApp",["ui.router"]);
/*
$stateProvider: Ui路由中的状态服务提供者
*/
app.config(["$stateProvider","$urlRouterProvider",function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/hello");
$stateProvider.state({
name:"hello",
url:"/hello",
template:"<h1>这是hello对应的内容</h1>"
}).state({
name:"world",
url:"/world",
template:"<h1>这是world跳转之后对应的内容</h1>"
});
}]);
</script>
</html>
效果如下：
这是简单的一个单页面跳转，有兴趣可以思考一下多页面应用。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
angular基于路由控制ui-router实现系统权限控制
前端去实现权限控制听起来有点扯淡(实际也有点扯淡),掩耳盗铃,主要是担心安全问题,但是如果在前后端分离的情况下,需要做一个带有权限控制的后台管理系统,angular基于ui-router应该怎么做呢? 权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限. 一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配
-
AngularJS路由Ui-router模块用法示例
本文实例讲述了AngularJS路由Ui-router模块用法.分享给大家供大家参考,具体如下: 由于某些设计原因,AngularJS原生的路由模块有一些缺点,比如说不支持view的嵌套等,所以有许多社区开始自己设计路由模块,最有代表性的就是ui-route了. ui-route是一个功能强大的路由模块,它在原生的ng-route模块上加强了其他方面的功能. 现在就开始做几个DEMO接触一下ui-route. <!--初始页面--> <!doctype html> <meta
-
浅析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详解
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="
-
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自带的路由: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
-
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路由之子路由
目录 一.子路由语法 二.实例 1.新建2个组件修改其内容 2.修改路由配置 3.修改product.component.ts的模版 一.子路由语法 二.实例 在商品详情页面,除了显示商品id信息,还显示了商品描述,和销售员的信息. 通过子路由实现商品描述组件和销售员信息组件展示在商品详情组件内部. 1.新建2个组件修改其内容 ng g component productDesc ng g component sellerInfo 重点是修改销售员信息组件,显示销售员ID. import { C
-
详解Angular路由动画及高阶动画函数
一.路由动画 路由动画需要在host元数据中指定触发器.动画注意不要过多,否则适得其反. 内容优先,引导用户去注意到某个内容.动画只是辅助手段. 在router.animate.ts中定义一个进场动画,一个离场动画. 因为进场动画和离场动画用的特别频繁,有一个别名叫:enter和:leave. import { trigger, state, transition, style, animate} from '@angular/animations'; export const slideToR
-
详解Angular路由 ng-route和ui-router的区别
什么是路由? 路由是AngularJS构建单页面应用的基础. 路由,就是网络数据或者请求进行分发的一个网络组件. 路由就是一个用于请求URL分发和跳转的一个应用组件,Angular中通过$routeProvider路由服务提供者进行核心的配置处理. ng路由 ng 路由是 AngularJS 官方提供的一种简单的路由操作. ng 路由主要分三个组成部分:路由指令.路由服务.路由服务提供者 路由指令:ng-view ngView指令主要用于将路由指向的页面渲染到当前页面的布局中. 语法: <ng-
-
详解Angular路由之路由守卫
一.路由守卫 当用户满足一定条件才被允许进入或者离开一个路由. 路由守卫场景: 只有当用户登录并拥有某些权限的时候才能进入某些路由. 一个由多个表单组成的向导,例如注册流程,用户只有在当前路由的组件中填写了满足要求的信息才可以导航到下一个路由. 当用户未执行保存操作而试图离开当前导航时提醒用户. Angular提供了一些钩子帮助控制进入或离开路由.这些钩子就是路由守卫,可以通过这些钩子实现上面场景. CanActivate: 处理导航到某路由的情况. CanDeactivate: 处理从当前路由
-
详解angular路由高亮之RouterLinkActive
路由高亮是什么?有什么好处? 当你在做一个后台管理系统,左边是一排路由导航,点击可以进入不同的页面,那么这个路由所在dom元素会添加上样式表示当前是位置. 但是一刷新你会发现,这个样式没了... 怎么办? 采用路由高亮:当路由被激活时允许你添加一个class在你添加路由的dom元素上,只有url变化时才会移除此样式. 当前路由被激活或者当前路由处于激活状态表示页面的url中路由和当前dom标签里的路由想匹配. // 用法概览 @Directive({ selector: '[routerLink
-
详解Angular之路由基础
目录 一.路由相关对象 二.路由对象的位置 三.路由配置 四.代码中通过Router对象导航 五.配置不存在的路径 六.重定向路由 七.在路由时候传递数据 一.路由相关对象 Router和RouterLink作用一样,都是导航.Router是在Controller中用的,RouterLink是在模版中用到. 二.路由对象的位置 1.Routes对象 配置在模块中.Routes由一组配置信息组成,每个配置信息至少包含两个属性,Path和Component. 2.RouterOutlet 在模版中
-
详解Angular中$cacheFactory缓存的使用
最近在学习使用angular,慢慢从jquery ui转型到用ng开发,发现了很多不同点,继续学习吧: 首先创建一个服务,以便在项目中的controller中引用,服务有几种存在形式,factory();service();constant();value();provider();其中provider是最基础的,其他服务都是基于这个写的,具体区别这里就不展开了,大家可以看看源码:服务是各个controller之间通话的重要形式,在实际项目中会用的很多,下面是代码: angular.module
-
详解Angular结构型指令模块和样式
一,结构型指令 *是一个语法糖,<a *ngIf="user.login">退出</a>相当于 <ng-template [ngIf]="user.login"> <a>退出</a> </ng-template> 避免了写ng-template. <ng-template [ngIf]="item.reminder"> <mat-icon > alar
-
详解vue 路由跳转四种方式 (带参数)
1. router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to="{name:'home', para
-
详解vue路由
前端路由和后端路由: 后端路由:对于普通的网站,所有的超链接都是url地址,所有url都对应服务器上对应的资源 前端路由:对于单页面应用程序来说,主要通过url的hash(#)来实现不同页面的切换,同时hash还有一个特点HTTP请求中不会包含hash相关的内容,所以单页面程序中的页面跳转主要用hash实现 在单页面应用程序中这种通过hash来改变页面的方式称作前端路由区别于后端路由 路由的使用 1.创建一个路由对象,当导入vue-router包之后,在window全局对象中就有一个路由的构造函