angularjsでui-layoutを使ってsplit barで画面分割された綺麗なSPAを作る #Angular

以前にAngular Material で split bar を実現するというしょぼい記事を書いたが、もっと簡単綺麗にスプリットバーを実現するライブラリを発見したので紹介したい。
というか、以前からいろいろあるのは知っていたが、AngularMaterialを使っている以上、余計なライブラリを入れずにMaterialだけで完結させようとしていたが、どうやらPCデスクトップ向けのSPA画面をMaterialの思想に準拠して作るのは多分に無理がある気がしてきたので、よそのライブラリを導入することにした。

ui-layout
ui-layout
angular-uiに属するプロジェクトで、開発が今も続いている。
AngularMaterialとui-routerと同居させてしばらくたつが、とくに副作用なく正常に動作している。

まずライブラリをインストール

bower install angular-ui-layout

HTMLのヘッダーで指定

index.html

<script src="bower/angular-ui-layout/src/ui-layout.js"></script>   
<link rel="stylesheet" href="bower/angular-ui-layout/src/ui-layout.css">

モジュールで指定

index.js

angular.module('MyApp', ['ui.layout'])

お望みのレイアウトを記述

index.html

<div ui-layout="{flow:'row', dividerSize:8, disableToggle:true}"
    style="overflow-x: hidden; overflow-y: hidden;">      
    <div ui-layout-container size="100px" style="overflow-x: hidden; overflow-y: hidden;" ></div>
    <div ui-layout-container="central" style="overflow-x: hidden; overflow-y: hidden;"></div>
    <div ui-layout-container size="10px" style="overflow-x: hidden; overflow-y: hidden;"></div>
</div>

これで完成。
ポイントがいくつかある。
一点目はui-layoutに含まれるui-layout-containerのうちどれか一つに"central"を指定すること。ウィンドウ全体をリサイズするとcentralに指定したdivのサイズが変化する。centralがどこにもないと動きがおかしくなる。
もう一点はWindowsではoverflow:hidden;を指定しないとスクロールバーがちらつくので、スクロールバーが必要なdiv以外は全て指定すること。レイアウトを入れ子にしていくとこの現象が顕著になる。もちろんスタイルシートに書いてしまってもいい。

以上なのだが、angularMaterialとui-routerとの同居例もあげておく

angularMaterialと同居

    <div ui-layout-container>
        <div layout="row">
            <div flex align="center">hoge</div>
            <div>hage</div>
            <div>hoge</div>
        </div>
    </div>

ui-layoutの下でangulaMaterialのlayoutを使っているが全く問題ない。
ちなみにanuglarMaterialのlayoutは横幅を指定するのは便利だが、縦については100%に広げることができない。
よって縦のレイアウトはdividerSize:0のui-layoutで行い、細かい横のレイアウトはanuglaMaterialのlayoutにさせるといい。

ui-routerと同居、親

    <body ng-controller="IndexController">
        <div ui-view></div>
    </body>

ui-routerと同居、子

<div ui-layout="{flow:'row', dividerSize:8, disableToggle:true}">      
    <div ui-layout-container size="100px"></div>
    <div ui-layout-container="central">               
        <div ui-view></div>
    </div>
    <div ui-layout-container size="100px"></div>
</div>

ui-routerと同居、孫

<div ui-layout="{flow:'column', dividerSize:8, disableToggle:true}">                
    <div ui-layout-container></div>
    <div ui-layout-container></div>
</div>

こんなかんじ。
画面の切り替え等含め驚くほど完ぺきに動作してくれる。