AngularJSをプロジェクトに統合し、HelloWorldアプリケーションを作成します
この記事では、angularJSを使用してHelloworldプログラムを開始します
Mục lục
AngualarJSをダウンロード
AngularJSのホームページに移動し、[ダウンロードANGULARJS ]をクリックして、フレームワークをダウンロードします。
https://angularjs.orgにアクセスし、AngularJSフレームワークをダウンロードします。
実行環境設定（オプション）
Angularの使用を開始するには、HTMLプロジェクトディレクトリに配置して実行することは完全に可能ですが、このソリューションで使用する場合、Angularでテンプレートを使用するとエラーが発生するため、サーバーローカルホスト環境をインストールすることをお勧めしますランタイム環境としてXAMPPやNodeJSなど。 xamppを使用してlocalhostをインストールする方法に関する記事を見ることができます
Helloworldプログラムの作成を開始します
angleJSの使用を開始するには、モデル、ビュー、コントローラー、およびフレームワークプロパティの組み合わせが必要であるため、問題を理解する前に、このサンプルソースコードを最初に実行してから、次の記事で問題の詳細を確認します。
ステップ1：プロジェクトディレクトリを作成し、index.htmlファイルを初期化し、次のようにAngularライブラリをインポートします（以下の方法でCDNを使用します）。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello world angular</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> </body> </html>ステップ2：次のようにコード構造を開始します。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello world angular</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> <div ng-app="toanngo92App"> <div ng-controller="toanngo92Controller"> <h1>Hello {{name}}</h1> <p>You are {{age}} years old, your score is {{score}}</p> <input type="text" ng-model="name"> </div> </div> <script> var app = angular.module('toanngo92App', []); app.controller('toanngo92Controller', function($scope) { $scope.name = 'Toanngo92'; $scope.age = 18; $scope.score = 9.5; }); </script> </body> </html>ブラウザでコードを実行したときの結果：
順番に記述されたコードを分析します。
- 8行目のプロジェクトにAngularフレームワークを統合する
- 11行目： <div ng-app = "Toanngo92App"> Angularがng-app属性を介して要素fragment（tags）を理解し、通信できることをAngularに通知します。値「toanngo92App」はアプリケーションの名前です。任意に設定できます。 HTML構造で属性を使用する場合、属性を含むタグから内部の要素までの要素のみを角度でクエリできることは理にかなっています。これに注意してください！
- 19行目：関数angular.module（'toanngo92App'、[]）を介して角度オブジェクトを初期化します。最初のパラメーターはアプリケーション名で、次のパラメーターは空の配列です。これについては、次の記事で詳しく説明します。
- 20行目：コントローラーメソッドの呼び出し、内部には2つのパラメーター、最初のパラメーターはコントローラー名'toanngo92Controller'を定義する文字列、2番目のパラメーターは無名関数でパラメーターは組み込み変数（$ scope）であり、この関数内で$の3つのプロパティを定義しますスコープ変数名、年齢、スコア、これはモデルです
- 12〜16行目： ng-appタグ構造内には、属性ng-controller = "toanngo92Controller"を持つタグ構造があります。ここでは、これが「tonngo92Controller」という名前のコントローラーから返されるビューであることがわかります。コントローラは$scopeを介してビューを通過します。変数
次に、tonngo92データを表示する入力ボックスにさらにデータを入力してみましょう。入力したデータに従って、単語helloの後のh1タグのデータが、jsコードの追加行を記述せずに更新されていることがわかります。これがデータです。 -バインディングメカニズムとangularJSの能力、純粋なjavascriptまたはJqueryを使用すると、次の手順を実行する必要があります。ユーザーのonkeyupイベントをキャッチし、フォーカスのある入力からデータを取得して、<h1>タグで更新します。
以下は、angularJSを使用した単純な課金アプリケーションのサンプルコードです。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello world angular</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> <div ng-app="calculateApp" ng-controller="calculateController"> <label>Quantity:</label> <input type="number" min="1" max="10" ng-model="qty" /> <label>Price</label> <input type="number" min="0" max="5000" ng-model="price" /> <div>Total: {{total | currency: '$ '}}</div> <button ng-click="calculate()">Calculate</button> </div> <script> var app = angular.module('calculateApp', []); app.controller('calculateController',function($scope){ $scope.qty = 0; $scope.price = 0; $scope.total = 0; $scope.calculate = function(){ this.total = this.qty * this.price; } }); </script> </body> </html>ブラウザでテストを実行したときの結果：
上記の例では、angularJSのいくつかの概念を組み合わせています。
- html構造内のng-app、ng-controller、ng-model、ng-clickはタグ属性であり、angularJSによって認識および使用され、ディレクティブと呼ばれます。
- {{合計|通貨：'$'}}この概念は、angularJSのデフォルトフィルターと呼ばれます（表示時にモデルの値を再フィルター処理します）
- $ scopeはangularjsの組み込み変数であり、コントローラーとビューの間で共通データを通信するために使用されます
- angle.module（）、app.controller（）、これらは、次の記事でアプローチするangularJS構造の組み込みメソッドです。
この記事では、後の記事で理論的な概念に飛び込む前に、独自の最初のhelloworldプログラムを作成してください。
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
