Clever Geek Handbook

アプリケーション例-AngularJS + Bootstrap v3の電話帳

Angularコミュニティには、最新のチュートリアルと、最新のライブラリバージョンの簡単な例を含むチュートリアルが必要です。 Angular v0.Xで働いていたルールはすべて有効ではなく、見やすいですが、サイトの教科書の フィルターや実装例のTODOリスト（v1の場合など）よりも複雑なものを解析したい.0.3： jsfiddle.net/dakra/U3pVM ）。 そのような例が単純すぎるように思える場合、問題のステートメントの開発と、いくつかのスタイルデザインを使用して現実に近いアプリケーションを調べたいと思います。



サンプルアプリケーションを提供します。メインリストと「スパム」の2つのリストで電話帳を操作します。 各リストは、フィルタリング（最も単純で最も組み込みのフレームワーク）、要素の編集、新しい要素の追加、および既存の要素の削除の対象となります。 ワンクリックで要素をあるリストから別のリストに転送し、要素の強調表示はBootstrap v.3のスタイルで行われます。



チュートリアルを読んで最初のAngularアプリケーションの1つまたは2つの作業を調べたとき、分析のための例が推奨され、どのオプション（より簡単）がまだ機能するかという疑問が生じました。 通常、彼らはインターネットを見て、シンプルなページの実装例を探しますが、非常にシンプルであるか、特定の種類のアニメーションを分析する古いオプションがたくさんあります。



この例は、Hello Worldからかなり遠く、TODOリストからそれほど遠くありません。 ディレクティブ（ng-model属性を除く）などの曲技飛行技術はありません。サービスで動作するコントローラーはありませんが、2つのコントローラーが存在し（ng-controller =“ addressController”、ng-controller =“ addressEditController”）、それぞれ独自の変数があります$ scope-各コントローラーのオブジェクトのメインルート。 モジュールはありません（純粋に形式的なvar ddd2 = angular.module（ "ddd"、[]）;は省略可能です）。 つまり、この例では、Angularテクニックの一部を説明して他のパーツから分離し、他のパーツの多くはビューやコントローラーを操作する必要がないことを示しています。



主な傾向



変数とメソッドは、$スコープオブジェクト（ハッシュ）の下で各コントローラーで結合されます。 コントローラーは、ng-controller属性にコントローラーの名前を含むHTML要素に基づいています。



コードでは、リストテンプレートの使用を確認できます。リストテンプレートは、個別の説明や別のファイルからの読み込みを必要としません。 代わりに、そのようなテンプレート（ディレクティブ）は、将来のリストの構造を非常に明確に記述します。ループを持つプログラムは、その作業のロジックを記述するからです。



イベントサブシステムからの例では、ボタンの明確なクリックと1つの場所-ブロックのタイトルのクリックのみが含まれます（そして、ブロック自体はスタイルによってポップアップに変わります）。



さらに、フレームワークに縛られずに単体テストのパネルがあります-単純な自己テストで、カルマとジャスミンがなくても、手動でテストでき、結果のリストに簡単に配置できることを示します。 デバッグパネルには、リストのJSON表現が表示されます。 すべてが相互接続されており、予想どおりに変更されます。デバッグパネルの依存ビュー（リストとJSON）をドラッグします。 変更の場合、最初のリストは2番目とは異なる方法（CSS経由）でフィルターされ、設計オプションの相対的な柔軟性が示されます。



ケーススタディで予想されているように、ソリューションの複雑さは最初のTODOリストと比較して増加していますが、最終的なアプリケーションではなく、最終的なアプリケーションです。 Angularの例はサーバーに関連付けられておらず、変更はブラウザー内でのみ有効であり、開始データはJSコード（メインデータリストのコントローラー）から取得した小さなリストから始まります。 localStorageさえも関与しませんが、難しくはありませんが、Angularをさらに理解するために何も提供しません。 この例は、WebサーバーとAJAXリクエストなしで実行されます。



コード



リンクまたはコンピューターで実際に動作を確認し、jsfiddleまたは自宅で変更し、 APIを使用して機能を追加し、ブラウザーで何が起こるかを監視することをお勧めします 。







どのくらいのコード？



すべてのコードは300行のCSS（20％）、HTMLおよびJS（50％、150行）であり、残りは意図的に圧縮されていないライブラリであり、AngularのjQueryおよびjqLit​​eは使用されていません。



テストは何をしますか？



3つのテストチェック：

1.リスト配列の各エントリにすべての空でない名前（fname）が存在する。 データに空の名前を書き込むことはエラーと見なされます。

2.新しいリスト項目（「連絡先」）を記録するプロセスは、データの正しい場所を確認し、すぐにテスト記録を削除します。

3.すべての空でない電話番号の存在（ダイヤルの正確性および一般に番号の存在については検証されませんが）。 最初は、「データベース」でいくつかの欠落した番号が許可されていたため、「内部電話の検証」テストが失敗します...これで、コードを変更せずにテストを修正できるように、データベースの処理方法がわかりました。 （はい、電話または何かを「電話」フィールドに追加するか、単に不適切なエントリを削除します。）



テストのボリュームは、JSの40行です。



次に何ができますか？



この企業の方法論的価値を向上させるというアイデアによって、高品質のコードに熱心になっています。 彼には成長する余地があります。

1）多言語サポートを追加します。

2）Angularのスタイルでテストを記述します。

3）サーバーを接続します（ただし、サーバーがなければ壊れないようにします）。



いずれにせよ、Angularチュートリアルで行われているように、複雑なデモのチェーンの形で改善を行うことが望ましいです。 Githubの隣接するページで、このページの開発のための改善された徐々に複雑なオプションを確認したいと思います。これは、優れた実践を増やしながら、アプローチの単純さを維持しています。



この例が、AngularJS 1.2.Xの標準チュートリアルとAPIの解析に役立つことを願っています。



関連文献：



事前：


More articles:


All Articles