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


Posted in Javascript onMay 22, 2017

什么是路由?

路由是AngularJS构建单页面应用的基础。

路由,就是网络数据或者请求进行分发的一个网络组件。

路由就是一个用于请求URL分发和跳转的一个应用组件,Angular中通过$routeProvider路由服务提供者进行核心的配置处理。

ng路由

ng 路由是 AngularJS 官方提供的一种简单的路由操作。

ng 路由主要分三个组成部分:路由指令、路由服务、路由服务提供者

路由指令:ng-view

ngView指令主要用于将路由指向的页面渲染到当前页面的布局中。

语法:

<ng-view [onload=”string”] [autoscroll]=”string”></ng-view>
  1. onload:当视图发生改变时执行属性值中的表达式
  2. 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路由 ng-route和ui-router的区别

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

这是简单的一个单页面跳转,有兴趣可以思考一下多页面应用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
Sep 23 Javascript
javascript中的缓动效果实现程序
Dec 29 Javascript
jquery实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
JS控制日期显示的小例子
Nov 23 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
Aug 18 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
超全面的JavaScript开发规范(推荐)
Jan 21 Javascript
node.js部署之启动后台运行forever的方法
May 23 Javascript
element-ui 实现响应式导航栏的示例代码
May 08 Javascript
vue实现公共方法抽离
Jul 31 Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 #Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 #Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 #Javascript
JS实现上传图片实时预览功能
May 22 #Javascript
详解Angular 4.x NgIf 的用法
May 22 #Javascript
JS实现无缝循环marquee滚动效果
May 22 #Javascript
jQuery表单验证之密码确认
May 22 #jQuery
You might like
生成静态页面的PHP类
2006/07/15 PHP
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
Python中__call__用法实例
2014/08/29 Python
Python脚本处理空格的方法
2016/08/08 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
应用心理学个人的求职信
2013/12/08 职场文书
矫正人员思想汇报
2014/01/08 职场文书
感恩节寄语2015
2015/03/24 职场文书
经营目标责任书
2015/05/08 职场文书
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL