【angular1.x】お世話になっているライブラリ3種類
前置き
この記事はSpeee Advent Calendar 2016 - Qiitaの9日目の記事です。
前日の記事はこちらです。
本題
自分で機能作るのは何かと大変ですよね。 今回は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などは自分でカスタマイズして使うことで、より時間の短縮が可能になります。