AngularJとBootstrapを使用して、フロントエンドアプリケーションの例を作成します。この単純なプロジェクトの実践を通じて、私たちは全員をAngularjsのフロントエンド開発の宮殿に導き、あなたにいくつかの知識ポイントを紹介します。
1.MVCの基本は、プロジェクトの例を通じて、MVC設計モデルの適用を誰もが予備的に理解できるようにします。
2。最初のAngularJSアプリケーションを構築します。実際のユースケースの開発を通じて、誰もがフロントエンド開発の特定の知覚的理解を得ることができます。
3. AngularJの3つの最も重要なコンポーネント、つまりモデル、ビュー、およびコントローラーの予備的な理解。
4. AngularJSスコープオブジェクトの使用に関する予備的な理解。
MVCモードの基本的な紹介：
MVCはUIアーキテクチャモデルです。その目的は、アプリケーションの機能を特別なモジュールに分解し、モジュールの再利用性を実現し、モジュール間の結合を減らし、システムの堅牢性を高めることです。 MVCモードは、主に3つの部分に分割されます。
モデル：システムデータの保存に使用されます
表示：システムのUIインターフェイスを実装するために使用されます
コントローラー：モデルとビューを接続するために使用されます。
私の意見では、学ぶための最良の方法は練習です。フロントエンドアプリケーションの例を作成します。この例を通じて、一方では、AngularJSフレームワークの理解を深めることができ、同時に、MVCモデルが開発プロセスにどのように埋め込まれているかを感じることもできます。
アプリケーションの紹介（コードパス：http：//xiazai.vevb.com/201608/yuanma/bootstrap-mooc(vevb.com).rar）
インターフェイスを次のように、数字を推測するWebアプリケーションを作成します。
アプリケーションの背景は、1〜1000の範囲で乱数をランダムに生成します。ユーザーはテキストボックスに推測された数を入力します。入力が正しい場合、アプリケーションは以下の緑のプロンプトをポップアップします。たとえば、それが間違っている場合、入力数はバックグラウンドで生成された数値よりも大きいか小さい場合、アプリケーションは対応するプロンプトをポップアップします。
下部に示されている数字は、推測した回数を示しています。
アプリケーション全体のコードディレクトリ構造は次のとおりです。
現在、簡単なアプリケーションの例に取り組んでいるため、各モジュールのコードをまとめます。将来的には、大規模なフロントエンドアプリケーションを構築するとき、プロジェクト全体のコードディレクトリ構造を手配するように非常に注意します。
上の図に示されているファイル構成では、Angular.jsはアプリケーションを開発するために依存するフレームワークファイルであり、bootstrap.min.cssはUIインターフェイスの設計に使用されるインターフェイスライブラリファイルであり、NumberSguessing.htmlが開発したいメインアプリケーションファイルになります。次に、numberguessing.htmlにコードを段階的に追加し、アプリケーションの機能を徐々に増やします。
まず第一に、私たちがしなければならないことは、シンプルなHTMLテンプレートを構築することです。このテンプレートでは、ゆっくりと関数を追加できます。テンプレートコードは次のとおりです。
< src = "angular.js"> </script> </body> </html>
上記のテンプレートコードには、「メタ... charset = "utf = 8」という行があることに注意してください。
このラインの目的は、ブラウザが中国語を正しく表示できるようにすることです。この行が利用できない場合、ブラウザは中国語を表示します。テンプレートでは、最初にFrameworkコードとUIインターフェイスライブラリコードを導入し、後で使用します。それが完了した後、ブラウザにロードして、エラーがあるかどうかを確認します。それが正しい場合、私たちが現在見ているのは空白です：
次に、アプリケーションのバックグラウンドロジックコードを作成し、まず使用するいくつかの変数を決定します。
生成された乱数を保存するために使用されるOriginalVal
Userguess、現在ユーザーが入力している推測番号を保存します
数字、ユーザーが試した回数を記録します
偏差：ユーザーが入力した数とバックグラウンド乱数の違いを記録します。ユーザーが入力した番号が大きい場合、定義> 0;入力は小さく、定義<0;入力が正しい場合、定義== 0
コントローラーモジュールの実装
コントローラーは、モデルとビューの2つのモジュールを接続するために使用され、システムのビジネスロジックもコントローラーに実装されています。ユーザーがボタンをクリックしてコンテンツの入力など、インターフェイスでいくつかの操作を実行すると、コントローラーはビュー側から対応する情報を受信し、コントローラーが対応するイベント処理ロジックをトリガーします。たとえば、ユーザーがインターフェイス内に数字を入力し、[OK]ボタンをクリックし、コントローラーはビューから入力値を取得し、モデルからアプリケーションによって生成された乱数を取り出し、2つのハッチバックと比較し、比較結果をビューに戻します。ビューは、返された偏差値に基づいて対応するインターフェイスの変更を表示します。コントローラーの論理ボディがどのように実装されているかを見てみましょう。
関数[$ scope）{$ scope.verifyguess = function（）{$ scope.deviation = $ scope.originalval- $ scope.userguess; $ scope.numoftries = $ scope.numoftries + 1; } $ scope.initializegame = function（）{$ scope.numoftries = 0; $ scope.originalval = math.floor（（math.random（） * 1000） + 1）; $ scope.userguess = null; $ scope.deviation = null; } $ scope.initializegame（）; }yeasshenumberController関数は、モデルオブジェクトの数値特性を設定します。これらの値の意味は前に言及されています。同時に、このコントローラー関数は2つのインターフェイス呼び出しも導出されます。1つは検証です。インターフェイスの確認ボタンがクリックされると、ビューモジュールはインターフェイスを呼び出して、ユーザーが入力したデータが正しいかどうかを判断します。同時に、コールは2つの属性、偏差、および数字の値を更新します。
初期化ゲームは、システムアプリケーション全体を初期化し、最初に乱数を生成し、次にいくつかの変数を空にするために使用します。
コントローラーボディ機能では、パラメーター$スコープが渡されます。このパラメーターは、AngularJSによって渡されます。基本的には、MVCモードであるMと同等です。これはモデルです。これは、アプリケーションデータと論理コードの保存に特別に使用されるデータベースに似ています。ご覧のとおり、初期化ゲームコールでは、コントローラーがnumoftres、originalval、その他のデータを$ scopeオブジェクトに入れます。 VerifyGuessコールでは、これらのデータを計算と変更のために$範囲から取得します。
上記のコントローラーコードがテンプレートファイルNumberGuessing.htmlに追加された後、結果は次のとおりです。
< src = "angular.js"> </script> <script type = "text/javascript"> function suseTheNumberController（$ scope）{$ scope.verifyguess = function（）{$ scope.deviation = $ scope.originalval- $ scope.userguess; $ scope.numoftries = $ scope.numoftries + 1; } $ scope.initializegame = function（）{$ scope.numoftries = 0; $ scope.originalval = math.floor（（math.random（） * 1000） + 1）; $ scope.userguess = null; $ scope.deviation = null; } $ scope.initializegame（）; } </script> </body> </html>アプリビューアプリケーションインターフェイス設計
ビュー、つまり、MVCでのビューは、実際にグラフィカルインターフェイスを介してモデルにデータを表示することです。現在のアプリケーションはシンプルで、シンプルさの原則に基づいて、インターフェイスデザインのユーザーエクスペリエンスはあまり良くないかもしれませんが、AngularJSとBootstrapを使用してプログラム用のフロントエンドインターフェイスをすばやく構築する方法を迅速に理解するだけで十分です。
インターフェイスの構築を見て、コントローラーとインターフェイスのロジックを統合しましょう。
<body ng-app = "app"> <div ng-controller = "buessthenumbercontroller"> <h2>数字を推測してください！</h2> <p>コンピューターによって生成された乱数を推測してください。これは1から1000の範囲です。 ng-click = "verifyguess（）">確認</button> <button ng-click = "initializegame（）"> return </button> <p> <p> <p ng-show = "deviation <0"> mr。 </p> <p ng-show = "deviation> 0">私の男、もしあなたが少ないなら、ポイントを追加し、ポイントを追加します。
MVCのC、つまりコントローラーは、インターフェイス（ビュー）とデータ（モデル）の間のブリッジです。これら3つを関連付けるには、それらの3つすべてをAngularJSフレームワークに埋め込み、3つの間の相互接続を実現するためにAngularJSフレームワークメカニズムに依存する必要があります。
ビューをAngularJSに埋め込むために、上記のコードステートメント：
<body ng-app = "app">
ng-appこのプロパティは、ボディタグのHTMLコードがAngulajsフレームワークにビュー部分として埋め込まれ、「APP」がNG-APPプロパティ値として使用され、AngularJSフレームワークに「APP」という名前のモジュールをロードすることを通知することをAngularに伝えます。このモジュールは、ストレージウェアハウスに相当します。フロントエンドアプリケーションのさまざまな機能をさまざまなユニットに分解します。これらのユニットは、アプリと呼ばれるモジュールに保存されます。コントローラーとモデルも機能ユニットです。後で、それらがアプリと呼ばれるモジュールに追加されることがわかります。 AngularJSフレームワークは、使用するためにこのモジュールから2つのコントロールラーとモデルを取り出します。
次に、最初にAPPと呼ばれるこのモジュールをAngularJSフレームワークに入れます。コードは次のとおりです。
<Script Type = "text/javascript"> angular.module（ 'app'、[]）function suessthenumbercontroller（$ scope）{....} <script>このようにして、AngularJSフレームワークにAPPと呼ばれるモジュールがあり、NG-APP = "APP"を介してモジュールをインターフェイスに関連付けます。次に、コントローラーユニットをアプリモジュールに入れる必要があります。コードは次のとおりです。
<script type = "text/javascript"> angular.module（ 'app'、[]）.controller（ 'buessTheNumberController'、buessTheNumberController）;関数[$ scope）{....} </script>Angular.module関数は、モジュールオブジェクトを生成および返します。このオブジェクトには、コントローラーと呼ばれるインターフェイスが含まれています。このインターフェイスを通じて、開発したコントローラー機能ユニットをモジュールに配置できます。上記のコードから、コントローラーユニットをモジュールに配置することがわかります。このユニットの名前は、コントローラー関数の最初の入力パラメーターであるsuessTheNumberControllerです。 2番目の入力パラメーターは、コントローラーユニットの関数ロジック本体です。これは、以前に開発した推測値コントローラー関数です。
上記の手順を完了した後、アプリケーションが開発されます。この時点で、HTMLはブラウザからロードできるため、特定の効果を確認できます。
最後に、Codeを深く掘り下げて、AngularJSがさまざまなモジュールを統合して完全なフロントエンドアプリケーションを形成する方法を確認しましょう。コードには、いくつかの特別なシンボルと属性、{{{}}などの特別なシンボル、およびng-app、ng-controllerなどの特別な属性があります。角度コンテキストでは、{{and}}は補間記号と呼ばれ、ng*の形式の特性と呼ばれます。 Angularは、{{および}}にサンドイッチされた変数を、次のコードスニペットなどの変数に対応する値に変換します。
<p>推測した回数は：<span> {{numoftries}} </span> <p>です
数字とは、ユーザーが推測しようとした回数を意味します。数字の値が0の場合、Angularjsは上記のコードを次のように逃がします。
<p>推測した回数は次のとおりです。<span> 0 </span> <p>
ブラウザは、インターフェイスを次の状況にレンダリングします。
AngularJS指令は、複雑な技術的知識ポイントです。その後の議論では、詳細に説明します。ここでは、主にHTMLの構文関数を拡張するAngularJS指令の役割を簡単に紹介します。ディレクティブは、AngularJSフレームワークの中で最も強力な部分です。コードで使用されるAngularJS指令を簡単に紹介しましょう。
NG-Controller：この指令は、HTMLで表されるコントローラーとビューを接続します。このディレクティブのみでのみ、ビューはコントローラーによって設定された変数とインターフェイスにアクセスできます。コードに入れてみることができます。
ng-model = ng-controller =” susethenumbercontroller”
この文を削除して、結果が何であるかを確認してください。
ng-model：視界にコントロールを備えたモデルの双方向バインド変数、例：
<入力型= "number" ng-model = "userguess"/>
このステートメントは、モデルの変数ユーザーエルスをインターフェイス上の入力テキストボックスに結合します。テキストボックスの値が変更されると、USERGUESSの対応する値も変更されます。それどころか、推測の値がバックグラウンドで変化した場合、テキストボックスのコンテンツもそれに応じて変更されます。
ng-click：インターフェイスによって生成されたクリックイベントをコントローラーの処理ロジックに接続します。たとえば
<button ng-click = "verifyguess（）">確認</button>
上記のコードは、コントローラーのverifyguess（）関数を使用して「OK」ボタンクリックイベントを接続します。ボタンがクリックされると、機能が実行されます。
ng-show：表示されるビューを制御するためにコントロールを制御するかどうかを制御するために使用されます。 NG-Showの対応する式の値が真である場合、コントロールが表示されます。偽の場合、コントロールは表示されません。例えば：
<p ng-show = "deviation <0"> mr。、あなたの入札が高すぎます！ </p>
上記のコードの関数は、変数定義の値が0未満の場合、パラグラフ要素Pの内容がインターフェイスに表示されることです。
AngularJSは、強力だが比較的複雑なフロントエンド開発フレームワークです。私たちの例の役割は、誰もがAngularjsの強力な機能を理解し、最初に特定の知覚的理解を得るのを助けることだけで、将来のAngularJSフロントエンド開発技術全体を合理的に分析し、マスターするための強固な基盤を築くことです。
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。