Bootstrap3のサンプルOffcanvasのJavaScriptをAngularJSで書き換え | VPSサーバーでWebサイト公開　備忘録　~Linux、MySQLからAJAXまで

Bootstrap3のOffcanvasのサンプルのJavaScriptの機能をBootstrap3同梱のものからAngularJSに変更する手順をまとめました。
　
ここでは、以下のバージョンを使用して動作確認しています。
・Bootstrap：v3.3.7
・AngularJS：v1.6.5
・UI Bootstrap：v2.5.0

（１）ファイルの入手

　
１）BootstrapのOffcanvas
　
①ブートストラップの公式サイトから”source”版をダウンロード。
　
②”docs”→”examples”→”offcanvas”を開く
　
③index.html、offcanvas.js、offcanvas.cssを適宜配置。
　
２）AngularJS
　
angular.min.jsを入手し、適宜配置。
　
３）UI Bootstrap
　
ui-bootstrap-tpls-2.5.0.min.jsを入手し、適宜配置。
　

（２）index.html内のインクルード設定

　
１）cssファイル
　
bootstrap.min.css、offcanvas.cssのURLを適宜変更します。
例）
<link href=”../../dist/css/bootstrap.min.css” rel=”stylesheet”>
<link href=”offcanvas.css” rel=”stylesheet”>
　　　↓
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
<link href=”css/offcanvas.css” rel=”stylesheet”>
　
２）JavaScriptファイル
　
jquery、bootstrap.min.jsは使用せず、AngularJS、UI-Bootstrap使用します。
　
例）
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>
<script>window.jQuery || document.write(‘<script src=”../../assets/js/vendor/jquery.min.js”><\/script>’)</script>
<script src=”../../dist/js/bootstrap.min.js”></script>
<script src=”offcanvas.js”></script>
　　　↓
<script src=”js/angular.min.js”></script>
<script src=”js/ui-bootstrap-tpls-2.5.0.min.js”></script>
<script src=”js/offcanvas.js”></script>
　

（３）AngularJSスクリプト作成

　
offcanvas.js内にjqueryのコードが記述されていますが、このコードを消去し、AngularJSのコードで書き換えます。
　
例）

var MyApp = angular.module('MyApp', ['ui.bootstrap']);

MyApp.controller("OffcanvasCtrl", function($scope) {
  $scope.isCollapsed = true;
  $scope.tgl = true;
});

・var MyApp = angular.module(‘MyApp’, [‘ui.bootstrap’]);
AngularJSのスクリプトでUI Bootstrapを利用するので、モジュールの依存性の指定で’ui.bootstrap’を記述。
　
・$scope.isCollapsed = true;
以下の（４）３）で使用。
　
・$scope.tgl = true;
以下の（４）４）で使用。
　

（４）HTMLファイルの修正

　
１）AngularJSモジュールを適用
　
<html lang=”en”>
　　　↓
<html ng-app=”MyApp” lang=”en”>
　
２）AngularJSのコントローラの記述を追加
　

<body>
  <div ng-controller="OffcanvasCtrl">
　　：
　　：
  </div><!--/.ng-controller-->
</body>

　
３）折りたたみの機能をBootstrapの記述からAngularJSに変更
　

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
　　：
<div id="navbar" class="collapse navbar-collapse">
　　　↓
<button type="button" class="navbar-toggle"
        ng-click="isCollapsed = !isCollapsed">
　　：
<div id="navbar" class="collapse navbar-collapse" uib-collapse="isCollapsed">

　
４）”Toggle nav”の機能をAngularJSを使って変更
　
ブラウザのウィンドウサイズが小さくなった場合に左右に画面を移動できる”Toggle nav”の部分は、Bootstrap3のOffcanvasのサンプルではjQueryを使って記述されています。ここでは、AngularJSのng-classを使って書換えています。
　

<div class="row row-offcanvas row-offcanvas-right">
　　：
  <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
　　　↓
<div ng-class="tgl ?  'row row-offcanvas row-offcanvas-right' : 
                      'row row-offcanvas row-offcanvas-right active'">
　　
  <button type="button" class="btn btn-primary btn-xs"
          ng-click="tgl = !tgl">Toggle nav</button>

関連記事の目次

Bootstrap

Angular-ui bootstrap

ng-bootstrap（Angular2、Angular4）

（１）ファイルの入手

（２）index.html内のインクルード設定

（３）AngularJSスクリプト作成

（４）HTMLファイルの修正

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル