JavaScript の AngularJS ライブラリを使用して Hello World を記述する方法

この記事では、AngularJS フレームワークによって実装された hello world コードの例を示します。

Hello World の例と次のコード例を参照する際に注目する必要があるいくつかの側面を以下に示します。

ng-app、ng-controller、ng-model ディレクティブ
2 つの中括弧を含むテンプレート

ステップ 1: セクションに Angular Javascript

を含めます。

次のコードをに含めて、Angularjs JavaScript ファイルをインポートします。次の記述方法を使用して、Google 管理のライブラリから最新のコードを取得できます。

<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>

ログイン後にコピー

ステップ 2: ng-app ディレクティブを

要素に適用します。

次のように ng-app ディレクティブを要素に適用します。このディレクティブは、Angular が認識することを示すために使用されます。これにより、アプリケーション開発者は、HTML ページ全体を Angular アプリケーションとして扱うか、その一部だけを Angular アプリケーションとして扱うかを自由に指定できるようになります。

<html ng-app="helloApp">

ログイン後にコピー

ステップ 3: ng-controller ディレクティブを要素に適用します。

ng-controller ディレクティブを要素に適用します。controller ディレクティブは、div などの任意の要素に適用できます。以下のコードでは、「HelloCtrl」はコントローラーの名前であり、<script></script> 要素に配置されたコントローラーコードによって参照できます。

<body ng-controller="HelloCtrl">

ログイン後にコピー

ステップ 4: ng-model ディレクティブを入力要素

に適用します ng-model ディレクティブを使用して、入力をモデルにバインドできます。

<input type="text" name="name" ng-model="name"/>

ログイン後にコピー

ステップ 5: テンプレートコードを作成する

以下は、「name」という名前のモデルのモデル値を表示するテンプレートコードです。「name」という名前のモデルがステップ 4 の入力にバインドされていることに注意してください。

Hello {{name}}! How are you doing today&#63;

ログイン後にコピー

ステップ 6:

人気のチュートリアル

詳細>

JavaScript の AngularJS ライブラリを使用して Hello World を記述する方法_AngularJS