Angular 应用中的布局设计与管理(w/ ui.router)
话不多说，直接上代码：
// 我们是这样定义路由的(节省篇幅，开头写一遍后面不重复了)
angular.module('demo', ['ui.router'])
.config(function($stateProvider) {
$stateProvider.state(...)
})
场景一：应用大部分时候都是 Header Main Footer 的上中下三行布局
这是模版：
...
...
这是路由：
$stateProvider.state('application', {
abstract: true, // WHY abstract here? READ THE FUCKIN' MANAUL!!!
url: '/',
templateUrl: 'template/main-layout.html'
})
以上就是布局，然而这并没有做完，因为目前为止我们还没有一个可访问的应用了此布局的入口路由，所以接着往下：
这是模版：
Welcome to my app, idiot
这是路由：
$stateProvider.state('application.childOne', {
// parent: 'application', 因为我们用了 application.childOne 的命名规则，所以无需显式指定 parent……RTFM
url: 'one',
templateUrl: 'template/child-one.html'
})
于是，当用户访问 /one 的时候：
通过 Url Matching，angular 知道(实际上是 ui.router 知道)当前路由是 application.childOne
由此向上寻找此路由树的根找到 application，开始渲染 template/main-layout.html 布局模版，得到 header 和 footer
布局模板中有一个 ui-view，所以其下的子路由要渲染自己的模版到这个 里面去
这就是你得到三行布局的办法。
场景二：需要一个没有 Header 和 Footer 的白板布局
前面的布局覆盖了应用大部分的界面，但是个别界面(比如登录注册之类的)不需要 Header Footer 怎么办？
有 N 种办法！这里介绍最简单最蠢(其实也很巧，只是不需要什么技巧的暴力实现)的办法：
新的布局模版：
应用于此模版(比如登录)
Sign In Here
新的路由体系：
$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 来布局的，让人家一看就知道你没学到家。
