AngularJS
ui-router
monaca
onsenui

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

More than 1 year has passed since last update.

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

ベース

[monaca][onsenui][AngularJS][ui-router]onsenui/ui-router最小限プロジェクト

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

ソースコード

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