BlurAdmin スタートアップメモ2


# 続き

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


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

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


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

### フォルダの作成
myNewPageをsrc/app/pages配下に作成します。
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/80adc683-d3b1-fc75-ed85-1886df715302.png)

### モジュールファイルの作成
myNewPage.module.jsファイルを新たに作成し、以下のコードを書く
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/d3e8c227-d261-8581-7408-7821e1fb431c.png)

```js
(function () {
  'use strict';

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

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

  }
})();
````

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

```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を作成する。
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/6c2165cc-6974-9c9d-1da5-8f46dd4785cd.png)

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

```js
(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/


## 確認

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

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/09d26b3f-e92c-0fa8-7f57-bc5bcad9d140.png)


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


# 検索機能の実装

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/e20c06d1-9ceb-b699-a052-fdded9cb4f13.png)

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

src\app\theme\components\pageTop

view（pageTop.html）にはサーチボタンとstartSearch()が設定されているが、
startSearch()メソッドはどこにも実装されていない。
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/7e56c593-fc2e-a908-b2a1-5278709426f8.png)

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

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

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

```js

(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を追加しブロードキャストされたイベントを受け取ります。


```js
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内でイベントをキャッチして処理が実行可能となりました。