[monaca]ui-routerでsplitterメニュー。

monacaの新規作成プロジェクト「Onsen UI V2 Angular 1 Splitter」を、ui-routerに対応させてみました。

# ベース

[[monaca][onsenui][AngularJS][ui-router]onsenui/ui-router最小限プロジェクト](https://qiita.com/miz21358/items/af9e6416caa9754c43f5)

# HTML

```index.html
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="script.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body ng-app="MyApp">
	
	<!-- 全体のページ設定 -->
	<ons-page>
		<!-- splitter に変数宣言をしておく(開閉用) -->
		<ons-splitter var="splitter">
			<!-- splitterメニュー設定 -->
			<ons-splitter-side page="menu.html" side="left" width="200px" collapse>
			</ons-splitter-side>
			<!-- splitterコンテンツ設定 -->
			<ons-splitter-content page="main.html">
			</ons-splitter-content>
		</ons-splitter>
	</ons-page>
	
	<!-- splitterメニューHTML-->
	<ons-template id="menu.html">
		<ons-page>
			<ons-list>
				<!-- リスト項目に遷移先を指定する -->
				<ons-list-item ui-sref="page-A" tappable>
					pageA
				</ons-list-item>
				<ons-list-item ui-sref="page-B" tappable>
					pageB
				</ons-list-item>
			</ons-list>
		</ons-page>
	</ons-template>
	
	<!-- splitterコンテンツHTML-->
	<ons-template id="main.html">
		<ons-page>
			<!-- ツールバー -->
			<ons-toolbar>
				<!-- ツールバー左 -->
				<div class="left">
					<!-- メニューアイコン -->
					<ons-toolbar-button>
						<!-- 押下時に、splitterを開閉する -->
						<ons-icon icon="fa-bars" ng-click="splitter.left.toggle();"></ons-icon>
					</ons-toolbar-button>
				</div>
				<!-- ツールバー真ん中 -->
				<div class="center">
					Splitter
				</div>
				<!-- ツールバー右 -->
				<div class="right">
					<!-- 何も記載しない場合は、空文字を入れる。（入れないとセンタリングレイアウトがずれる） -->
					&nbsp;
				</div>				
			</ons-toolbar>
			<!-- コンテンツ部分 -->
			<div style="padding: 20px 10px;" ui-view>メニューを選んでください。	</div>
		</ons-page>
	</ons-template>
	
	<!-- pageAの中身 -->
	<ons-template id="pageA.html">
		pageAだよ
	</ons-template>
	
	<!-- pageBの中身 -->
	<ons-template id="pageB.html">
		pageBだよ
	</ons-template>
</body>	
</html>
```

# javascript

```script.js
var myApp = angular.module('MyApp', ['onsen', 'ui.router']);

myApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

		$stateProvider
			.state('page-A', {
				url: '/pageA',
				templateUrl: 'pageA.html',
				onEnter: ['$rootScope', function($rootScope) {
					// 押下時に、splitterを閉じる
					$rootScope.splitter.left.close();
				}]
			})
			.state('page-B', {
				url: '/pageB',
				templateUrl: 'pageB.html',
				onEnter: ['$rootScope', function($rootScope) {
					// 押下時に、splitterを閉じる
					$rootScope.splitter.left.close();
				}]
			})
		
	}]);
```

# 処理の流れ

1. メニューアイコン押下
    2. ```ng-click="splitter.left.toggle();"```で、splitterを開く
3. ```menu.html```を表示
4. ```ons-list-item```を押下
    5. ```ui-sref```に設定された遷移先に移動
        6. ```state```内の```onEnter```で、```$rootScope.splitter.left.close();``` が実行され、splitterが閉じる
    7. 遷移先htmlを```ui-view```に表示

# ソースコード

https://github.com/miz21358/ui-router-splitter-sample