详解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获取网页中的js、css、Flash等文件
Dec 20 Javascript
jQuery实现长文字部分显示代码
May 13 Javascript
js实现基于正则表达式的轻量提示插件
Aug 29 Javascript
js滚动条平滑移动示例代码
Mar 29 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
微信小程序实现给循环列表添加点击样式实例
Apr 26 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 Javascript
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 Javascript
修改vue+webpack run build的路径方法
Sep 01 Javascript
解决Vue router-link绑定事件不生效的问题
Jul 22 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
es6在react中的应用代码解析
2017/11/08 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
vue组件横向树实现代码
2018/08/02 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
vue实现购物车小案例
2019/09/27 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
行政人员工作职责
2013/12/05 职场文书
寄语是什么意思
2014/04/10 职场文书
环境保护标语
2014/06/20 职场文书
大四毕业生自荐书
2014/07/05 职场文书
党员自我对照检查材料
2014/08/19 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript