详解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 指南/入门基础
Nov 30 Javascript
IE bug table元素的innerHTML
Jan 11 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 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
我的论坛源代码(七)
2006/10/09 PHP
php 获取远程网页内容的函数
2009/09/08 PHP
php 获取本机外网/公网IP的代码
2010/05/09 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
javascript定时器完整实例
2015/02/10 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
利用python代码写的12306订票代码
2015/12/20 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
Python项目跨域问题解决方案
2020/06/22 Python
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
linux系统都有哪些运行级别
2012/04/15 面试题
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
三年级音乐教学反思
2014/01/28 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
详解flex:1什么意思
2022/07/23 HTML / CSS