ホームページ

ウェブフロントエンド

jsチュートリアル

AngularJS 入門チュートリアル AngularJS 説明書_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:05 PM

HTML に詳しい友人は、HTML には多くの属性があることを知っています。たとえば、タグの href 属性はリンクの URL アドレスを指定するために使用でき、タグの type 属性は入力の種類を指定するために使用できます。 AngularJS ディレクティブは、HTML 属性を拡張することにより、AngularJS アプリケーションに機能を追加します。

AngularJS ディレクティブは HTML を拡張するために使用されます。これらは、ng- 接頭辞で始まる特別なプロパティです。次のディレクティブについて説明します:

一般的な AngularJS コマンド

ng-app ディレクティブは、AngularJS アプリケーションを初期化します。

ng-init ディレクティブはアプリケーションデータを初期化します。

ng-model ディレクティブは、要素の値 (入力フィールドの値など) をアプリケーションにバインドします。

ng-app ディレクティブ

ng-app ディレクティブは、AngularJS アプリケーションを開始します。ルート要素を定義します。 AngularJS アプリケーションを含む Web ページを読み込むアプリケーションを自動的に初期化または起動します。また、さまざまな AngularJS モジュールを AngularJS アプリケーションにロードするためにも使用されます。以下の例では、div 要素の ng-app 属性を使用してデフォルトの AngularJS アプリケーションを定義します。

<div ng-app="">
...
</div>

ログイン後にコピー

ng-init コマンド

ng-init ディレクティブは、AngularJS アプリケーションのデータを初期化します。アプリケーションで使用する変数に値を入れるために使用されます。次の例では、countries 配列を初期化します。 JSON 構文を使用して国の配列を定義します。

<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">

...
</div>

ログイン後にコピー

ng-model ディレクティブ

ng-model ディレクティブは、AngularJS アプリケーションで使用されるモデル/変数を定義します。以下の例では、「name」という名前のモデルを定義します。

<div ng-app="">
...
<p>Enter your Name: <input type="text" ng-model="name"></p>
</div>

ログイン後にコピー

ng-repeat ディレクティブ

ng-repeat ディレクティブは、HTML 要素のコレクション内の各項目を繰り返します。以下の例では、配列の国を反復処理しています。

<div ng-app="">
...
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat="country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>

ログイン後にコピー

AngularJS ディレクティブの例

<div ng-app="" ng-init="firstName='John'">
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你输入的为： {{ firstName }}</p>
</div>

ログイン後にコピー

ng-app ディレクティブは、現在の

要素が AngularJS アプリケーションであることを AngularJS に伝えます。ng-init ディレクティブは、JavaScript で変数を定義するのと同じです。 AngularJS のデータバインディングは、AngularJS 式と AngularJS データを同期します。 {{ firstName }} は ng-model="firstName" を通じて同期されます。上記の例では、入力ボックスに入力した内容がページ上に同時に表示されます。

注意

Web ページには、さまざまな要素で実行される複数の AngularJS アプリケーションを含めることができます。
ng-init を使用してデータを初期化することはあまり一般的ではありません。データを初期化するより良い方法については、後続の章で学習します。

ng-repeat ディレクティブ

ng-repeat ディレクティブは HTML 要素を繰り返します。これは JavaScript の each ループに相当します

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>

ログイン後にコピー

上記の例は次の HTML に解析されます

<ul>
<li>Jani</li>
<li>Hege</li>
<li>Kai</li>
</ul>

ログイン後にコピー

ng-repeat はオブジェクト配列で動作します:

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>

ログイン後にコピー

は次の HTML に解析されます:

<ul>
<li>Jani, Norway</li>
<li>Hege, Sweden</li>
<li>Kai, Denmark</li>
</ul>

ログイン後にコピー

カスタム手順

AngularJS の組み込みディレクティブに加えて、カスタムディレクティブも作成できます。 .directive 関数を使用してカスタムディレクティブを追加できます。カスタムディレクティブを呼び出すには、カスタムディレクティブ名を HTMl 要素に追加する必要があります。キャメルケースを使用してディレクティブに名前を付けます askh5Directive ですが、使用する場合は - で区切る必要があります: askh5-directive

<body ng-app="myApp">
<askh5-directive></askh5-directive>
<script>
var app = angular.module("myApp", []);
app.directive("askh5Directive", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>

ログイン後にコピー

上記の例は次のように解析されます。

カスタム手順!

命令は次の方法で呼び出すことができます:

要素名:

属性:

クラス名:

コメント:

使用を制限する

制限値は次のとおりです:

E は要素名でのみ使用できます

A は属性にのみ使用できます

C はクラス名でのみ使用できます

M はコメント専用です

restrict のデフォルト値は EA です。つまり、命令は要素名と属性名を通じて呼び出すことができます。

var app = angular.module("myApp", []);
app.directive("askh5Directive", function() {
return {
restrict : "A",
template : "<h1>自定义指令!</h1>"
};
});

ログイン後にコピー

上記の AngularJS ではプロパティ呼び出しのみが許可されます。

AngularJS 入門チュートリアル - AngularJS 式

上記の内容は、編集者が紹介するAngularJS入門チュートリアルのAngularJS手順です。皆様のお役に立てれば幸いです。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7549

CakePHP チュートリアル

1382

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？ Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか？ Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか？ Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。