続き

無事にblurAdminがローカルで起動できたら、
ページの追加

以下にページの追加方法が書いてありますが、
https://akveo.github.io/blur-admin/articles/013-create-new-page/

英語が苦手の場合には読み飛ばすので、ひとまずメモします。

新ページの追加

以降の操作で’My New Page’ というページを作成します。

フォルダの作成

myNewPageをsrc/app/pages配下に作成します。

モジュールファイルの作成

myNewPage.module.jsファイルを新たに作成し、以下のコードを書く

(function () {
  'use strict';

  angular.module('BlurAdmin.pages.myNewPage', [])
      .config(routeConfig);

  /** @ngInject */
  function routeConfig() {

  }
})();

page.modules.jsファイルへモジュール参照を追加

  angular.module('BlurAdmin.pages', [
    'ui.router',

    'BlurAdmin.pages.dashboard',
    'BlurAdmin.pages.ui',
    'BlurAdmin.pages.components',
    'BlurAdmin.pages.form',
    'BlurAdmin.pages.tables',
    'BlurAdmin.pages.charts',
    'BlurAdmin.pages.maps',
    'BlurAdmin.pages.profile',

    'BlurAdmin.pages.myNewPage',
  ])

viewファイルの作成

my-new-page.htmlを作成する。

モジュールファイルにviewへの参照を追加する

(function () {
  'use strict';

  angular.module('BlurAdmin.pages.myNewPage', [])
      .config(routeConfig);

  /** @ngInject */
  function routeConfig($stateProvider) {
    $stateProvider
        .state('myNewPage', {
          url: '/myNewPage',
          templateUrl: 'app/pages/myNewPage/my-new-page.html',
          title: 'My New Page',
          sidebarMeta: {
            order: 10,
          },
        });
  }
})();

sidebarMetaが無いとサイドメニューに表示されないので注意

サイドメニューのオプションは以下
https://akveo.github.io/blur-admin/articles/051-sidebar/

確認

タスクランナーからビルドを実行し、出来上がったファイルをブラウザにて確認する。
メニューにができてたら成功

あとはよきにはからえで機能を追加していく。

検索機能の実装

検索BOXは以下のpageTopにある。

src\app\theme\components\pageTop

view（pageTop.html）にはサーチボタンとstartSearch()が設定されているが、
startSearch()メソッドはどこにも実装されていない。

よってコントローラーを作成して、startSearchメソッドを追加する。

    angular.module('BlurAdmin.theme.components')
        .controller('PageTopCtrl', PageTopCtrl);
    /** @ngInject */
    function PageTopCtrl($scope, $rootScope) {
        $scope.startSearch = function () {
        }
    }

startSearchメソッドとview側のstartSearchがバインドされたので、検索処理が可能となった。
このままではPageTopCtrlのみでしか処理できないので、startSearchをブロードキャストしてみる。
以下のようなコードになる。


(function () {
    'use strict';

    angular.module('BlurAdmin.theme.components')
        .directive('pageTop', pageTop);

    /** @ngInject */
    function pageTop() {
        return {
            restrict: 'E',
            templateUrl: 'app/theme/components/pageTop/pageTop.html',
            controller: 'PageTopCtrl',
        };
    }

    angular.module('BlurAdmin.theme.components')
        .controller('PageTopCtrl', PageTopCtrl);
    /** @ngInject */
    function PageTopCtrl($scope, $rootScope) {
        $scope.startSearch = function () {
            $rootScope.$broadcast('startSearch', $scope.searchString);
        }
    }

そもそもトップバーの検索BOXの処理をどこで処理するか、（どの機能が検索を受け持つのか）
むしろ何を検索したい（させたい）と思って検索BOXを設置するのか？によっても処理が変わるであろうが、
ひとまず、ここでは先ほど追加したMy New Pageに対して検索（絞込）を行う事を想定した。

myNewPageモジュールにコントローラーmyNewPageCtrlを作成して、$onを追加しブロードキャストされたイベントを受け取ります。

angular.module('BlurAdmin.pages.myNewPage')
    .controller('myNewPageCtrl', myNewPageCtrl);

/** @ngInject */
    function myNewPageCtrl($scope) {
        //startSearchイベントを受け取る
        $scope.$on('startSearch', function (event, searchString) {
            $scope.searchString = searchString;
        });
    }

これで、My New Pageが表示されている時に検索BOXで検索を行うと、
myNewPageCtrl内でイベントをキャッチして処理が実行可能となりました。

BlurAdmin スタートアップメモ2

続き