详解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 相关文章推荐
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
js处理表格对table进行修饰
May 26 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 Javascript
深入理解(function(){... })();
Aug 16 Javascript
DOM 事件的深入浅出(一)
Dec 05 Javascript
vue双向绑定简要分析
Mar 23 Javascript
Three.js基础学习之场景对象
Sep 27 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
vue.js 实现a标签href里添加参数
Nov 12 Javascript
JS继承最简单的理解方式
Mar 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 错误之引号中使用变量
2009/05/04 PHP
ajax实现无刷新分页(php)
2010/07/18 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
用console.table()调试javascript
2014/09/04 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
微信小程序开发之转发分享功能
2019/10/22 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
[00:14]护身甲盾
2019/03/06 DOTA
python实现简单的计时器功能函数
2015/03/14 Python
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
学年末自我鉴定
2014/01/21 职场文书
幼儿教师工作感言
2014/02/14 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
社区活动总结范文
2015/05/07 职场文书
捐书仪式主持词
2015/07/04 职场文书
关于分班的感言
2015/08/04 职场文书
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android