AngularJS カスタム〜BootStrapと合わせて画面の調節をする〜

今回は、BootSrapとAngularJSを併用して画面をカスタムしてみようと思います。目的はのちに、「$http」オブジェクトを使用してデータなどを表示するためです。「$hhtp」オブジェクトの主な用途としては、以下のようなことです。

  1. 他のHTMLとかページを取得する。
  2. WebAPIでオープン・データを取得する。
  3. postリクエストでサーバー側のAP(Loginなど)を起動する。

参考サイトはこちらです。

上のことを実現するために、まずは表示方法を変えなくてはいけないのでそちらの方を先にやります。
そして、今回作成するものは「技術ポータル」サイトを作成したいと思っております。のんびりやるつもりです。

作成したもの

現状のやること

  1. 画面の左サイドバーを横スクロールメニューにする
  2. それに合わせて右サイドバーの幅を広げる
  3. AngularJSでコントロールしたいので変数で調節

なので以下のような修正を加えました。
<HTMLの修正>

        <div class="scrollmenu" style="display:{{leftSideBar_disp}}">
      <a ng-repeat="categ in techCategories" href="#">{{categ}}</a>
    </div>
      <div class="col-sm-3 text-left panel panel-default">
        {{secondMessage}}
      </div>
      <div class="col-sm-3 text-left panel panel-default">
          {{thirdMessage}}
      </div>
      <div class="col-sm-3 text-left panel panel-default">
          {{fourthMessage}}
      </div>

<JSの修正>

    // 左のサイドバー
    $scope.leftSideBar_disp = "block";
    $scope.leftSideBar_size = 2;
    // 右のサイドバー
    $scope.rightSideBar_disp = "block";
    $scope.rightSideBar_size = 3;
    var messArray = [];
    // メッセージテキスト設定する
    if (docLang == 'ja') {
        messArray = JAPANESE_MESSAGE;
        $scope.techCategories = JAPANESE_CATEGORIES;
    } else {
        messArray = ENGLISH_MESSAGE;
        $scope.techCategories = ENGLISH_CATEGORIES;
    }

見た目は下のようになりました。

エラーが出たところ

表示するデータ(日本語、英語など)を別のJSファイルに分けたのですが、従来のように「var」で宣言した変数は定数として認識されないようなので「const」で宣言したら直りました。

カスタムの結果

ヘッダメニューの下にカテゴリを選択するような横スライド式のカテゴリ選択する部分を作成しました。
今後はこれらを押下すると、それぞれに対応する画面をメイン部分に表示する。。。というイメージです。

でわでわ。。。



投稿者:

takunoji

音響、イベント会場設営業界からIT業界へ転身。現在はJava屋としてサラリーマンをやっている。自称ガテン系プログラマー(笑) Javaプログラミングを布教したい、ラスパイとJavaの相性が良いことに気が付く。 Spring framework, Struts, Seaser, Hibernate, Playframework, JavaEE6, JavaEE7などの現場経験あり。 SQL, VBA, PL/SQL, コマンドプロント, Shellなどもやります。

コメントを残す