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 id="自定义指令">自定义指令!</h1>"
};
});
</script>
</body>

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

カスタム手順!

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

要素名:

属性:

クラス名:

コメント:

使用を制限する

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

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

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

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

M はコメント専用です

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

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

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

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

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

声明

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

JavaScriptの文字列文字を交換しますMar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi

独自のAjax Webアプリケーションを構築しますMar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

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

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

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

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

jQueryマトリックス効果Mar 10, 2025 am 12:52 AM

マトリックスの映画効果をあなたのページにもたらしましょう！これは、有名な映画「The Matrix」に基づいたクールなJQueryプラグインです。プラグインは、映画の古典的な緑色のキャラクター効果をシミュレートし、画像を選択するだけで、プラグインはそれを数値文字で満たされたマトリックススタイルの画像に変換します。来て、それを試してみてください、それはとても面白いです！それがどのように機能するかプラグインは画像をキャンバスにロードし、ピクセルと色の値を読み取ります。 data = ctx.getimagedata（x、y、settings.greasize、settings.greasize）.data プラグインは、写真の長方形の領域を巧みに読み取り、jQueryを使用して各領域の平均色を計算します。次に、使用します

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

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

シンプルなjQueryスライダーを構築する方法Mar 11, 2025 am 12:19 AM

この記事では、jQueryライブラリを使用してシンプルな画像カルーセルを作成するように導きます。 jQuery上に構築されたBXSLiderライブラリを使用し、カルーセルをセットアップするために多くの構成オプションを提供します。今日、絵のカルーセルはウェブサイトで必須の機能になっています - 1つの写真は千の言葉よりも優れています！画像カルーセルを使用することを決定した後、次の質問はそれを作成する方法です。まず、高品質の高解像度の写真を収集する必要があります。次に、HTMLとJavaScriptコードを使用して画像カルーセルを作成する必要があります。ウェブ上には、さまざまな方法でカルーセルを作成するのに役立つ多くのライブラリがあります。オープンソースBXSLiderライブラリを使用します。 BXSLiderライブラリはレスポンシブデザインをサポートしているため、このライブラリで構築されたカルーセルは任意のものに適合させることができます

Angularを使用してCSVファイルをアップロードおよびダウンロードする方法Mar 10, 2025 am 01:01 AM

データセットは、APIモデルとさまざまなビジネスプロセスの構築に非常に不可欠です。これが、CSVのインポートとエクスポートが頻繁に必要な機能である理由です。このチュートリアルでは、Angular内でCSVファイルをダウンロードおよびインポートする方法を学びます

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

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

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。