html中的分离式布局,前后端完全分离中页面布局问题

翻翻过去那场雪

Angular应用中的布局设计与管理(w/ui.router)话不多说，直接上代码：//我们是这样定义路由的(节省篇幅，开头写一遍后面不重复了)angular.module('demo',['ui.router']).config(function($stateProvider){$stateProvider.state(...)})场景一：应用大部分时候都是HeaderMainFooter的上中下三行布局这是模版：......这是路由：$stateProvider.state('application',{abstract:true,//WHYabstracthere?READTHEFUCKIN'MANAUL!!!url:'/',templateUrl:'template/main-layout.html'})以上就是布局，然而这并没有做完，因为目前为止我们还没有一个可访问的应用了此布局的入口路由，所以接着往下：这是模版：Welcometomyapp,idiot这是路由：$stateProvider.state('application.childOne',{//parent:'application',因为我们用了application.childOne的命名规则，所以无需显式指定parent……RTFMurl:'one',templateUrl:'template/child-one.html'})于是，当用户访问/one的时候：通过UrlMatching，angular知道(实际上是ui.router知道)当前路由是application.childOne由此向上寻找此路由树的根找到application，开始渲染template/main-layout.html布局模版，得到header和footer布局模板中有一个ui-view，所以其下的子路由要渲染自己的模版到这个里面去这就是你得到三行布局的办法。场景二：需要一个没有Header和Footer的白板布局前面的布局覆盖了应用大部分的界面，但是个别界面(比如登录注册之类的)不需要HeaderFooter怎么办？有N种办法！这里介绍最简单最蠢(其实也很巧，只是不需要什么技巧的暴力实现)的办法：新的布局模版：应用于此模版(比如登录)SignInHere新的路由体系：$stateProvider.state('plain',{abstract:true,//Again,RTFMurl:'/',templateUrl:'template/plain-layout.html'}).state('plain.signin',{url:'signin',templateUrl:'template/signin.html'})就这么简单。何为Partial？怎么用？partial是HTML的片段，它有这样几个特征：可复用，不解释和应用整体状态变化无关(这是和布局最大的区别，布局是和应用状态挂钩的，比如说登录前是一个布局，登录后是一个布局等等。当然你可以从头到尾都用一样的布局，但只要有变化，我们就要从概念上把这种变化看作是状态的变化，这就是为什么要用路由的缘故。仔细想想后端模板渲染不就是这么回事吗？状态！)自身是没有状态管理的(如果有，请用directive)拿上例来说，假如部分里面有一个LOGO是可以复用的HTML片段，我们可以抽取出来：...于是你可以把这段代码复用在不同的布局里面，这才是ng-include的正确使用场景，拿ng-include来布局的，让人家一看就知道你没学到家。