前后端完全分离中页面布局问题

Question

尝试项目中前后端分离，注意这里不是中间加一个所谓的nodejs的那种“分离”，我的意思是前端就是纯html页面+js，后台java或者其他后端语言通过http接口提供服务。所有的操作比如用户验证、数据存取都通过ajax进行，但是目前觉得不好操作的是页面布局，页面通过后端渲染的话，过去习惯用apachetiles，一些页头、页脚等通用的内容可以横跨n个页面重用，非常方便，布局什么的都可以重用。但是如果换到前端呢？好像没有找到类似的替代方法，大家都是怎么做的？补充：我是准备前端用angularjs的，另外即使做SPA，也不意味着全站一个页面，还是会按照模块划分页面，比如用户管理跟项目管理页面就不一样，但是在用户管理页面会把用户列表、更新、等全部放到一起。

Answer 1

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……RTFM
url:'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,RTFM
url:'/',
templateUrl:'template/plain-layout.html'
})
.state('plain.signin',{
url:'signin',
templateUrl:'template/signin.html'
})
就这么简单。
何为Partial？怎么用？
partial是HTML的片段，它有这样几个特征：
可复用，不解释
和应用整体状态变化无关（这是和布局最大的区别，布局是和应用状态挂钩的，比如说登录前是一个布局，登录后是一个布局等等。当然你可以从头到尾都用一样的布局，但只要有变化，我们就要从概念上把这种变化看作是状态的变化，这就是为什么要用路由的缘故。仔细想想后端模板渲染不就是这么回事吗？状态！）
自身是没有状态管理的（如果有，请用directive）
拿上例来说，假如
部分里面有一个LOGO是可以复用的HTML片段，我们可以抽取出来：
...
于是你可以把这段代码复用在不同的布局里面，这才是ng-include的正确使用场景，拿ng-include来布局的，让人家一看就知道你没学到家。
                            

Answer 2

弱智的方法：复制粘贴复制粘贴。常用的方法：类似JSP或者PHP的include功能。变态的方法：把HTML分离出来，用JS进行再次加载。