ホームページ > 記事 > ウェブフロントエンド > JavaScript の AngularJS ライブラリを使用して Hello World を記述する方法_AngularJS
JavaScript の AngularJS ライブラリを使用して Hello World を記述する方法_AngularJS
- WBOYオリジナル
- 2016-05-16 15:53:261128ブラウズ
この記事では、AngularJS フレームワークによって実装された hello world コードの例を示します。
Hello World の例と次のコード例を参照する際に注目する必要があるいくつかの側面を以下に示します。
- ng-app、ng-controller、ng-model ディレクティブ
- 2 つの中括弧を含むテンプレート
ステップ 1: a1cd8158756fb9bed595cfa569b8a0139c3bca370b5104690d9ef395f2c5f8d1 に含めて、Angularjs JavaScript ファイルをインポートします。次の記述方法を使用して、Google 管理のライブラリから最新のコードを取得できます。
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
ステップ 2: ng-app ディレクティブを
要素に適用します。次のように ng-app ディレクティブを 100db36a723c770d327fc0aef2ce13b1 要素に適用します。このディレクティブは、Angular が認識することを示すために使用されます。これにより、アプリケーション開発者は、HTML ページ全体を Angular アプリケーションとして扱うか、その一部だけを Angular アプリケーションとして扱うかを自由に指定できるようになります。
<html ng-app="helloApp">
ステップ 3: ng-controller ディレクティブを 要素に適用します。
ng-controller ディレクティブを 要素に適用します。controller ディレクティブは、div などの任意の要素に適用できます。以下のコードでは、「HelloCtrl」はコントローラーの名前であり、3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 要素に配置されたコントローラー コードによって参照できます。
<body ng-controller="HelloCtrl">
に適用します ng-model ディレクティブを使用して、入力をモデルにバインドできます。
<input type="text" name="name" ng-model="name"/>
以下は、「name」という名前のモデルのモデル値を表示するテンプレート コードです。「name」という名前のモデルがステップ 4 の入力にバインドされていることに注意してください。
Hello {{name}}! How are you doing today?
ステップ 6: 2934a685527f5cd6bcb20a3dc28499e1
でコントローラー コードを作成する
以下に示すように、script 要素内にコントローラー コードを作成します。以下のコードでは、「helloApp」は、100db36a723c770d327fc0aef2ce13b1 要素の ng-app ディレクティブを使用して定義されたモジュールの名前です。 6c04bd5ca3fcae76e30b72ad730ca86d 要素の ng-controller ディレクティブを使用して定義された「HelloCtrl」という名前のコントローラーを作成します。コントローラー「HelloCtrl」は、このモジュール「helloApp」に登録されています。 $scope オブジェクトは関連しています
<script>
var helloApp = angular.module("helloApp", []);
helloApp.controller("HelloCtrl", function($scope) {
$scope.name = "Calvin Hobbes";
});
</script>
完全なコードは