この記事では、AngularJS フレームワークによって実装された hello world コードの例を示します。
Hello World の例と次のコード例を参照する際に注目する必要があるいくつかの側面を以下に示します。
ステップ 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">
に適用します ng-model ディレクティブを使用して、入力をモデルにバインドできます。
<input type="text" name="name" ng-model="name"/>
以下は、「name」という名前のモデルのモデル値を表示するテンプレート コードです。「name」という名前のモデルがステップ 4 の入力にバインドされていることに注意してください。
Hello {{name}}! How are you doing today?
ステップ 6:
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
