Clever Geek Handbook

FormStamp-AngularJSのウィジェットライブラリ

AngularJSは急速に成長しているJSフレームワークであり、複雑で動的なWebアプリケーションの開発を簡素化します。 私たちのチームは、複雑なユーザーインターフェースを備えた多くのプロジェクトでAngularJSを使用していますが、作業の過程で、日時ピッカー、選択、複数選択などの一連の均一なウィジェットを提供する優れたライブラリの不足を痛感しました。 もちろん、 Angular UIプロジェクトについては知っていましたが、AngularUIは必要なウィジェットを提供していませんでした。



さらに、フロントエンドにアナログレールフォームビルダーが必要でした。 フォームビルダーにより、プログラマはフォームを宣言的に記述し、マークアップとエラー出力の生成を行うことができます。



これらの問題の解決策は、私たちが開発したFormStampライブラリであり、以下を提供します。



開発中、次の原則がライブラリに組み込まれました。





インストール手順


FormStampは、Bowerパッケージシステムを使用してプロジェクトに接続できます。 

bower install angular-formstamp


フォームビルダー


AngularJSの表現力豊かな宣言的アプローチは、UIを作成するために記述する必要があるコードの量を削減します。 ただし、この方法を使用しても、フィールド補完チェックを使用して単純なフォームを作成し、エラーメッセージを表示する場合、多くの繰り返しコードを記述する必要があります。

コード 
 <form class="form-horizontal" role="form" name="form" ng-app="form-demo"> <div class="form-group" ng-class="{'has-error': form.username.$invalid}"> <label for="username" class="col-sm-2 control-label">Username</label> <div class="col-sm-10"> <input type="text" class="form-control" id="username" placeholder="Username" required="required" ng-pattern="/awesome/" name="username" ng-model="username" /> <p class="alert alert-danger" ng-show='form.username.$error.pattern'> Username should be awesome </p> </div> </div> <div class="form-group" ng-class="{'has-error': form.email.$invalid}"> <label for="email" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="email" placeholder="Email" required="required" name="email" ng-model="email" /> <p class="alert alert-danger" ng-show='form.email.$error.email'> Email should be valid </p> </div> </div> <div class="form-group" ng-class="{'has-error': form.password.$invalid}"> <label for="password" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="password" placeholder="Password" required="required" name="password" ng-model="password" ng-minlength='6' /> <p class="alert alert-danger" ng-show='form.password.$error.minlength'> Password should be longer </p> </div> </div> <div class="form-group"> <label for="birthDate" class="col-sm-2 control-label">Birth Date</label> <div class="col-sm-10"> <input type="date" class="form-control" id="birthDate" placeholder="Birth Date" ng-model="birthDate" /> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign up</button> </div> </div> </form>


フォームビルダーコンポーネントはこの問題を解決します-フォームを作成するには、次を指定するだけです：



Form Builderを使用すると、エラーを強調表示した上記のフォームを、はるかに少ないコードで作成できます。 

 <fs-form-for model="samurai"> <fieldset class="form-horizontal"> <fs-input as="text" name="username" required="" label="Name"></fs-input> <fs-input as="email" name="email" required="" label="Email"></fs-input> <fs-input as="password" name="password" required="" label="Email"></fs-input> <fs-input as="fs-date" name="birthdate" required="" label="Date of Birth"></fs-input> </fieldset> </fs-form-for>


説明：



他のすべての属性は、 as



属性で指定されたフォーム要素に委任さas



ます。



ウィジェットセット


アプリケーションが複雑であればあるほど、標準のフォーム要素を見逃すことは少なくなり、追加のウィジェットがすぐに必要になります。 現時点では、AngularJSとの統合用に設計されたウィジェットは多くありません。ウィジェットの一部は、jQueryウィジェットのラッパーです。 FormStampライブラリには、AngularJS APIを使用してゼロから記述されたウィジェットが含まれており、これにより作業中に最も頻繁に直面するタスクを解決できます。



選択ウィジェットの操作を検討してくださいfsSelect



ディレクティブを使用してfsSelect



ます。 このディレクティブは、属性freetext



、 items



、 ng-model



、 ng-required



、 ng-disabled



サポートしています。 



 freetext
属性（デフォルトではfalse）は、ウィジェットの動作を定義します。 freetext=false



ウィジェットはselectのように動作します。つまり、オプションのリストから1つの要素を選択できます。 freetext=true



ウィジェットはコンボボックスのように動作します。つまり、オプションのリストから値を選択するか、他の値を入力できます。 



 items
属性は、スコープのどのプロパティにウィジェットに表示されるオプションのリストが含まれているかを示します。 freetext=false



オプションはオブジェクトまたはプリミティブタイプのいずれかです。 freetext=true



オプションは文字列のみになります。 



 ng-model
属性は標準のngModelディレクティブです。 



 ng-disabled
この属性は、ウィジェットが無効か有効かを決定するスコーププロパティを示します。



オプションが$scope.arrayOfOptions



に含まれるコンボボックスを作成するには、選択されたオプションは$scope.selectedOption



に関連付けられ、無効/有効状態は$scope.flag



に依存し、次のようにディレクティブを記述します。 

 <div fs-select items=”arrayOfOptions” ng-disabled=”flag” ng-model=”selectedOption” freetext=”true”></div>




他のウィジェットとForm Builderの使用例は、ライブラリページで入手できます 。



指令


追加のウィジェットの作成を容易にするために、機能の一部を低レベルのディレクティブに割り当て始めました。



たとえば、 fsList



とfsInput



を使用して、プレーヤーのプレイリストを作成します。 fsList



操作は、 $scope



listInterface



プロパティとの相互作用によって行われ$scope



。 listInterface



には次のプロパティがあります。



html5からaudio



タグをラップするディレクティブを作成します。 

  app.directive("demoAudio", function() { return { restrict: "E", scope: { track: '=' }, template: "<audio controls />", replace: true, link: function($scope, $element, $attrs) { return $scope.$watch('track', function(track) { $element.attr('src', track.stream_url + "?client_id=8399f2e0577e0acb4eee4d65d6c6cce6"); return $element.get(0).play(); }); } }; });




SoundCloud SDKを接続する 

 <script src="http://connect.soundcloud.com/sdk.js"></script>


次に、これらの要素をバインドするコントローラーを作成します。 

 function ListDemoCtrl($scope) { //  SoundCloud SDK SC.initialize({ client_id: '8399f2e0577e0acb4eee4d65d6c6cce6' }); //    SoundCloud $scope.$watch('search', function () { SC.get('/tracks', { q: $scope.search, license: 'cc-by-sa' }, function(tracks) { $scope.$apply(function() { $scope.tracks = tracks }) }) }); $scope.search = 'bach'; $scope.tracks = []; //        fsList $scope.move = function (d) { $scope.listInterface.move(d); }; //      fsList $scope.listInterface = { onSelect: function (selectedItem) { $scope.select(selectedItem) } }; $scope.select = function(selectedItem) { $scope.selectedTrack = selectedItem || $scope.listInterface.selectedItem; }; }




そして、アプリケーション自体： 

 <div ng-controller="ListDemoCtrl" style="postion: relative;"> <div class="row"> <div class="col-xs-7"> <!--  fsInput     --> <input class="form-control" autofocus="1" fs-input fs-up="move(-1)" fs-down="move(1)" fs-enter="select()" ng-model="search"> <!--  fsList      --> <div fs-list="" items="tracks" class="no-popup"> <!--      --> <img src="{{ item.artwork_url }}" width="30" height="30"> {{item.title}} <small class="text-muted">{{item.genre}}</small> </div> </div> <div class="col-xs-5"> <!--     fsList  - --> <demo-audio track="selectedTrack"></demo-audio> <pre style="margin-top: 20px;">Selected Item: {{ selectedTrack | json }}</pre> </div> </div> </div>




その結果、次のようなプレーヤーが得られます。



ここでライブの例を見ることができます 。



次の記事では、FormStampを使用してフォームを作成する方法を詳しく見ていきます。



デモライブラリ



ライブラリコード


More articles:


All Articles