【angular1.x】お世話になっているライブラリ3種類

前置き

この記事はSpeee Advent Calendar 2016 - Qiitaの9日目の記事です。

前日の記事はこちらです。

eva-hashimoto.hatenablog.com

本題

自分で機能作るのは何かと大変ですよね。 今回はangular使う上でお世話になったライブラリを紹介します。

※angular1.x系を対象としていますので、angular2使ってる方は対象外となります。

ngImgCrop

ソースコード

https://github.com/alexk111/ngImgCrop

デモサイト

http://jsfiddle.net/alexk111/rw6q9/

特徴

  • 画像の切り取りが簡単にできる
  • リアルタイムの切り取り後の表示ができる

使い方

ライブラリを読み込んだ後、img-cropディレクトリを記述します。

<img-crop
    image="{string}"
    result-image="{string}"
></img-crop>

image : 読み込んだ画像 result-image : 切り取った後の画像 ここではcroppedImageとする

切り取った後の画像を表示

<img ng-src="{{croppedImage}}">

wu.masonry

ソースコード

https://github.com/passy/angular-masonry

デモサイト

http://passy.github.io/angular-masonry/

特徴

  • jqueryのmasonryと同様で、並べた要素をいい感じに整列してくれます。

使い方

公式にあるとおりですが、ライブラリを読み込んだ後、masonryディレクティブを配置し、その下でng-repeatで繰り返すものを表示するだけです。

<div masonry>
    <div class="masonry-brick" ng-repeat="brick in bricks">
        <img ng-src="{{ brick.src }}" alt="A masonry brick">
    </div>
</div>

ngDialog

ソースコード

https://github.com/likeastore/ngDialog

デモサイト

http://likeastore.github.io/ngDialog/

特徴

  • ポップアップを実現するのに適しています。
  • データの受け渡しが容易
  • 終了時のコールバック受取が容易

使い方

今回は、アラートをポップアップで出すことを例にします。

ライブラリを読み込む(app.jsとかにいれてください)

controllerで宣言したあと

angular.module('xxx')
  .controller('ModalAlertCtrl',['$scope', function ($scope) {
  }]);

ポップアップの見た目のhtmlを置いておきます。(今回はalert.htmlとします。)

<div class="modal">
    <div class="modal-container">
        <div class="modal-head">
            <h2>{{ngDialogData.alertHead}}</h2>
        </div>
        <div class="modal-body">
            {{ngDialogData.alertBody}
        </div>

        <div class="modal-button">
            <button class="form-submit" ng-cloak ng-click="closeThisDialog()">OK</button>
        </div>
    </div>
</div>

ポップアップ呼び出し側で、下記のように呼び出すことでアラートが出せます。

ngDialog.open({
            template: 'alert.html',
            data: { alertHead: 'エラーやで' , alertBody: '保存に失敗しました'},
            className: 'class-name',
            controller: "ModalAlertCtrl",
            preCloseCallback: function(value) {
              window.onbeforeunload = function(){};
              location.href='/';
            }
          });

data : データの受け渡しの時にここにいれます。 preCloseCallback : ポップアップが閉じられた時に動作します。上記例だと強制的に / に戻させています。

まとめ

自分で作るよりもライブラリを使うと、短時間で機能ができていいですよね。 特にngDialogなどは自分でカスタマイズして使うことで、より時間の短縮が可能になります。