笔者的学习进度比较慢,直到两年以前写的网站都还是以服务端为主导的,即网站的所有视图都由服务器视图模板来渲染,笔者使用的是 DotNet MVC,开发套路就是在Controller里面写Action,在Views里写对应的Action.cshtml,使用ajax发起请求已经是比较前端的事情了。这种时候由于DotNet MVC框架继承的微软风格的懒人模式,甚至不需要去知道其路由是如何实现的,给人一种感觉是只要在浏览器里敲进去Controller名与Action名,就访问到视图了。

后来笔者开始使用ng1前端框架,起初的开发完全放弃其路由功能,而使用服务端MVC路由来区分页面,在各自页面内写ng1代码。现在想来这样做实在是浪费了ng1的能力,因为.Net MVC的视图能力虽说有布局页这些概念,但其仍然是多页面的应用,视图间的切换都会造成页面的刷新,这会导致每切换一个页面都会重新加载一次ng1近两万行的代码。根本原因是没有利用这个强大的前端框架的精髓之一——前端路由。

抛开前端路由的底层,其所做的事情就是动态操作DOM来模拟页面的切换,带来的好处是巨大的,首先是不用再页面切换时重复加载大量的脚本依赖了,还有就是页面切换不再是白屏读条,而是可以加上接近原生应用的切换效果。而使用了前端路由后要解决的最大问题,自然是如何与服务端路由分离,至少不造成冲突。

前端路由有两种形式,一种是Html5的pushState风格,一种是使用#符号实现与服务端路由的分隔,笔者在基于微信公众号开发的时候涉及到了使用前端路由的SPA与微信API交互的各种情况,发现这两种形式各有问题,只能说微信以及传统的web服务器(至少IIS这个毒瘤)对现在这些前后端分离的SPA应用还不怎么友好。

一、ng2项目的部署

由于ng2采用了各种web新特性,包括TypeScript语法特性以及基于SystemJS或者webpack的代码模块化,已经是个彻底的客户端web体系,可以说若想要使用ng2来开发项目的话,就摆脱不了前后端分离的架构了。而说到web的前后端分离,其前端(客户端)虽说跟服务端(WebApi)分离了,但却也仍然需要一个服务器来支撑前端入口页面以及框架脚本的文件分发。这就涉及到如何部署ng2的网站了,笔者得到的总结是只要ng2使用webpack打包编译得到目标文件后,放到任何服务器上都可以——因为得到的全都是静态资源,需要的只是架设成一个静态网站就足够了。一种选择是直接使用node圈子提供的服务器,并使用nginx完成反向代理等工作,由于某些历史原因笔者将ng2网站部署到了IIS服务器上,也是可以运行的。

但是在IIS上部署ng2项目会有一个最直接的问题,那就是前后端路由冲突了(使用html5 pushState风格的情况下)!解决的办法有两个:

1. 老老实实使用#风格来区分前后端路由。其实前后端分离后没有了后端路由,此时的网站地址永远是 domain/#/url 格式的。

2. 笔者在使用#方式时发现此方式下发起微信网页授权的话会发生很尴尬的问题。

  配置给微信那边的回调地址应该是这样的格式:

domain/#/url?code=xxxxx&state=xxxxx

  但是至少目前的微信授权接口,会自作聪明处理#符号,导致其会回调到这样的路径:

domain/?code=xxxxx&state=xxxxx/#/url

也就是说微信这厮居然认为#后边的参数不再参与路由了,强行把回调参数提到#号之前,简直蛋疼。

所以使用pushState是不可避免了。(但其实在pushState风格下,微信的支付url配置又会有点问题,说多了都是泪)

网上大致有两种办法来防止被服务端路由影响:

1) 重写url(没去试过)

2) 笔者最后采用的办法是修改404的重定向到网站入口文件

  虽然感觉有一些暴力,但是仔细一想这也只是服务端的404页面,本身也没有任何意义了,真正的404页面也应该是在前端路由中导航才是,所以把所有的服务器端的404请求重定向了也没什么不妥的。

二、简单介绍ng2下的路由配置

原本写本文时只打算写点ng2路由是如何代码实现的,但是其实ng2的路由配置也就那么一点内容,感觉更麻烦的反而是整个的前端路由这个概念,所以到后半段才来讲讲ng2的路由配置。

路由的目标

首先要明确路由的目标,就是组件。

ng2的页面都是基于组件的,而路由要做的就是切换各个组件,其需要依赖的就是<router-outlet>标签,并在ng2模块的定义中声明即可。

比如一般我们的根模块做的事情除了加载核心依赖之外就是要做好根路由的配置,决定页面首先要显示哪个页面,以及哪几个url对应哪几个组件,当url匹配时就加载这些组件。而根组件中也是,除了其他全局标签之外,必不可少的就是一个<router-outlet>标签,所有的路由都是由这个路由插座展开的。

路由的跳转与参数

路由的跳转有两种方式,一是在界面中使用路由指令:

<a [routerLink]="['/url',参数]">Click Me</a>

二就是在脚本中手动跳转:

router.navigate(['/url', 参数])

而在新页面中获取路由参数也很简单,只要使用angular2的系统路由模块提供的ActivatedRoute服务即可。

懒加载路由

ng2的路由是支持懒加载的,确切的说懒加载的对象是ng2模块。

因为ng2应用规模变大以后会有多个模块,而这些模块不可能同时被使用,肯定是当路由指向到模块包含的某个组件(页面)后才真正需要加载这个模块,这时就要用到路由的懒加载能力了。其实现方式很简单:

{ path: 'url', loadChildren: '目标模块的文件路径#目标模块名' }

这样在url匹配时,才会先找到此模块文件的位置,然后加载此模块,好处就是不需要再应用一开始就加载所有模块,能节省资源,ng2甚至有模块预加载的能力,即后台异步提前加载好指定的懒加载模块,这样在需要此模块时,模块其实已经加载完毕,速度更加提升了。

至此笔者使用的路由配置一般是这样的形式:

1. 在应用的根模块中配置根路由,根路由只配置子页面所属模块的懒加载配置,以及必要的入口页面对应组件的直接加载。

 const routes: Routes = [
{ path: 'directive', loadChildren: './directive/directive.module#DirectiveModule' },
{ path: '', redirectTo: '/', pathMatch: 'full'},
{ path: '**', redirectTo: '/', pathMatch: 'full' }
]; @NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
declarations: [ ],
providers: [ ]
})
export class AppRoutingModule { }

2.具体的模块中配置子路由,在子路由中详细指定自路径对应的子组件

const routes: Routes = [
{
path: '', component: DirectiveComponent, children: [
{ path: 'home', component: DirectiveHomeComponent }
]
},
{ path: '**', component: DirectiveHomeComponent }
]; @NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
providers: []
})

具体的路径匹配规则与路由模块的声明方式等这里就不提了,没有什么难度可言,关键在于其路由方式的理解。

路由动画的问题

笔者遇到的目前ng2的路由体系的一个很大的问题就是路由动画。

由于ng2的路由依赖于一个<router-outlet>标签,而实际的组件(页面)的切换过程都是:

初始化页面1 -> 定向到页面2 -> 销毁页面1 -> 初始化页面2

ng2的路由组件切换非常尽职的会先销毁前一个组件再创建后一个组件,这导致即使你给组件配置了很酷炫的切换动画,前一个被销毁的组件也会直接蒸发,而后一个组件会正常按动画来出现。看到的效果就是,每次路由切换,页面都会先变成一片空白,然后新页面姗姗来迟,滑动进来也好,淡出显示也好,都给人一种尴尬的感觉。StackOverflow上有大牛给出了很厉害的解决方案,但给笔者的感觉是,仅为了路由的切换这也太不优雅了,期待ng2官方在未来的更新中给出一套更优雅的路由切换动画方案。

总结:

如本文的篇幅一样,ng2的路由其实没多少东西,但是却问题重重,通常要解决的不是路由路配置,而是如何让这个还比较新的前端路由体系适应于当前已有的互联网服务的大环境。

从Angular2路由引发的前后端路由浅谈的更多相关文章

  1. 理解Web路由(浅谈前后端路由与前后端渲染)

    1.什么是路由? 在Web开发过程中,经常会遇到『路由』的概念.那么,到底什么是路由?简单来说,路由就是URL到函数的映射. 路由的概念最开始是由后端提出来的,在以前用模板引擎开发页面的时候,是使用路 ...

  2. 淘宝玉伯引发Web前后端研发模式讨论

    淘宝玉伯是是前端基础类库 Arale 的创始人,Arale 基于 SeaJS 和 jQuery.不久前,淘宝玉伯在 Github 的 Arale 讨论页面上抛出了自己对于Web 前后端研发模式的思考. ...

  3. 前端路由、后端路由——想要学好vue-router 或者 node.js 必须得明白的两个概念

    前端路由和后端路由的概念讲解 引言 正文 一.路由的概念 二.后端路由 三.前端路由 四.其他知识 结束语 引言 无论你是正在学习vue 还是在学习node, 你一定会碰到前端路由和后端路由这两个概念 ...

  4. Laravel5.5+ 区分前后端用户登录

    Laravel 的用户认证是通过 Auth Facade 门脸实现的,手动认证可是使用  Auth::login() 或 Auth::attempt() 这两个方法实现. 以下内容纯属个人实现,也许有 ...

  5. 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 三十║ Nuxt实战:动态路由+同构

    上期回顾 说接上文<二九║ Nuxt实战:异步实现数据双端渲染>,昨天咱们通过项目二的首页数据处理,简单了解到了 nuxt 异步数据获取的作用,以及亲身体验了几个重要文件夹的意义,整篇文章 ...

  6. 前后端分离djangorestframework——路由组件

    在文章前后端分离djangorestframework——视图组件 中,见识了DRF的视图组件强大,其实里面那个url也是可以自动生成的,就是这么屌 DefaultRouter urls文件作如下调整 ...

  7. 实现真正意义上的前后端分离------由淘宝引入nodejs引发的思考

    说起前后端分离,大家包括我自己都会想到: 当今流行的MVC不就是最标准的前后端分离吗? 说到这里,我不禁要反问,MVC真正的实现了前后端分离了吗? 无论是PHP的MVC框架TP还是JAVA的MVC框架 ...

  8. angular2系列教程(十一)路由嵌套、路由生命周期、matrix URL notation

    今天我们要讲的是ng2的路由的第二部分,包括路由嵌套.路由生命周期等知识点. 例子 例子仍然是上节课的例子:

  9. 后端路由项目由 gulp 改为 webpack 的踩坑实录

    前言 公司有个后端路由的项目是用 gulp 作为前端自动化构建工具,最近学习了一下 webpack,深感其强大,一狠心将其改成了 webpack 构建,以下是踩坑实录. gulp 先来说说原来的架构. ...

随机推荐

  1. 11.TCP的交互数据流

          TCP报文段一般有两类,分别是成块数据和交互数据. 1.交互式输入     Rlogin连接上键入一个交互命令的数据流如下图所示.     每一个交互按键都会产生一个数据分组,每次从客户传 ...

  2. curl远程传输工具

    /** * curl远程传输工具 */ public function post_curl($url,$body,$header,$type='POST'){ $ch = curl_init(); c ...

  3. iOS 之 ARC 的内存泄露

    循环引用导致内存泄露,如block容易内存泄露

  4. QT第三天学习

    回顾: 布局: 绝对位置法: 手工布局:QLayout 可视化布局:设计器 VB MFC JAVA C# cocos QT信号和槽 ---------------------------------- ...

  5. 利用apache的mod_rewrite做URL规则重写

    使用mod_rewrite做url重写,伪静态,做过很多次,这次用几个例子记下来,便于后面查用. 使用方法: 1.在conf目录的httpd.conf文件中找到: LoadModule rewrite ...

  6. Android中的IPC机制

    Android IPC简介 IPC是Inter-Process Communication的缩写,含义就是进程间通信或者跨进程通信,是指两个进程之间进行数据交换的过程.那么什么是进程,什么是线程,进程 ...

  7. Java内存回收优化及配置

    原文链接:http://eol.cqu.edu.cn/eol/jpk/course/preview/jpkmaterials_folder_txtrtfview.jsp?resId=23156& ...

  8. 不要怂,就是GAN (生成式对抗网络) (四):训练和测试 GAN

    在 /home/your_name/TensorFlow/DCGAN/ 下新建文件 train.py,同时新建文件夹 logs 和文件夹 samples,前者用来保存训练过程中的日志和模型,后者用来保 ...

  9. ArcGIS Pro 简明教程(2)基础操作和简单制图

    ArcGIS Pro 简明教程(2)基础操作和简单制图 By 李远祥 本章主要介绍ArcGIS Pro如何加载数据并进行简单的地图制作,以基本的操作为主. 上一章节介绍过,ArcGIS Pro是可以直 ...

  10. JAVA传值与传址

    要了解JAVA中的传值与传址问题,必要先要了解JVA中的栈内存和堆内存,>>>>点些查看<<<<昨天写的学习记录 栈:基本数据类型.数据的引用变量,这两 ...