详解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 相关文章推荐
JS 去除Array中的null值示例代码
Nov 20 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
Feb 20 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
Mar 03 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 Javascript
在HTML5 localStorage中存储对象的示例代码
Apr 21 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
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
JS中IP地址与整数相互转换的实现代码
2017/04/10 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
python3使用urllib模块制作网络爬虫
2016/04/08 Python
python命令行工具Click快速掌握
2019/07/04 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
django中间键重定向实例方法
2019/11/10 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
如何写出高性能的JSP和Servlet
2013/01/22 面试题
保险专业大专生求职信
2013/10/26 职场文书
消防器材管理制度
2014/01/28 职场文书
中学生获奖感言
2014/02/04 职场文书
先进工作者获奖感言
2014/02/08 职场文书
优秀本科生求职推荐信
2014/02/24 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
python 逐步回归算法
2021/04/06 Python
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python