AngularJS チュートリアルとサンプル コード分析

この記事では主にangularjsの関連知識を紹介しますので、興味のある方はぜひご覧ください。 AngularJS は、新しい属性と式を使用して HTML を拡張します。 AngularJS はシングルページ アプリケーション (SPA: シングル ページ アプリケーション) を構築できます。

angularjs の紹介

AngularJS は JavaScript フレームワークです。 <script> タグを介して HTML ページに追加できます。 </script>

AngularJS はディレクティブを通じて HTML を拡張し、式を通じてデータを HTML にバインドします。

AngularJS は JavaScript フレームワークです

AngularJS は JavaScript フレームワークです。 JavaScriptで書かれたライブラリです。

AngularJS は JavaScript ファイルとして公開され、スクリプト タグ:

注: スクリプトを

要素の下部に配置することをお勧めします。

これにより、HTML の読み込みはスクリプトの読み込みの影響を受けないため、Web ページの読み込み速度が向上します。

さまざまな angular.js バージョンをダウンロード: https://github.com/angular/angular.js/releases

AngularJS は HTML を拡張します

AngularJS は ng-ディレクティブを通じて HTML を拡張します。

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

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

ng-bind ディレクティブは、アプリケーション データを HTML ビューにバインドします。

AngularJS の例

nbsp;html>


<meta>
<script></script>

 
<p>
  </p><p>名字 : <input></p>
  <h1 id="Hello-name">Hello {{name}}</h1>

例の説明:

Web ページが読み込まれると、AngularJS が自動的に起動します。

ng-app ディレクティブは、

要素が AngularJS アプリケーションの「所有者」であることを AngularJS に伝えます。

ng-model ディレクティブは、入力フィールドの値をアプリケーション変数名にバインドします。

ng-bind ディレクティブは、アプリケーション変数名を段落の innerHTML にバインドします。

注: ng-app ディレクティブを削除すると、HTML は式の結果を計算せずに式を直接表示します。

AngularJS とは何ですか?

AngularJS を使用すると、最新のシングル ページ アプリケーション (SPA: シングル ページ アプリケーション) の開発が容易になります。

• AngularJS はアプリケーション データを HTML 要素にバインドします。

• AngularJS は HTML 要素を複製して繰り返すことができます。

• AngularJS は HTML 要素を非表示にしたり表示したりできます。

• AngularJS は HTML 要素の「後ろ」にコードを追加できます。

• AngularJS は入力検証をサポートしています。

AngularJS ディレクティブ

ご覧のとおり、AngularJS ディレクティブは ng というプレフィックスが付いている HTML 属性です。

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

AngularJS の例

<p>
</p><p>姓名为 <span></span></p>

注 HTML5 では、data- で始まる拡張 (自家製) 属性が許可されています。

AngularJS 属性は ng- で始まりますが、data-ng- を使用してページを HTML5 で有効にすることができます。

有効な HTML5 の場合:

AngularJS インスタンス

<p>
</p><p>姓名为 <span></span></p>

AngularJS 式

AngularJS 式は二重中括弧内に記述されます: {{ 式 }}。

AngularJS 式はデータを HTML にバインドします。これは ng-bind ディレクティブに似ています。

AngularJS は、式が記述された場所にデータを「出力」します。

AngularJS 式は JavaScript 式によく似ており、リテラル、演算子、変数を含めることができます。

インスタンス {{ 5 + 5 }} または {{ firstName + " " + lastName }}

AngularJS インスタンス

nbsp;html>


<meta>
<script></script> 


<p>
  </p><p>我的第一个表达式： {{ 5 + 5 }}</p>

AngularJS アプリケーション

AngularJS モジュール (Module) は AngularJS アプリケーションを定義します。

AngularJS コントローラー (Controller) は、AngularJS アプリケーションを制御するために使用されます。

ng-app ディレクティブはアプリケーションを定義し、ng-controller はコントローラーを定義します。

AngularJS の例

<p>
名: <input><br>
姓: <input><br>
<br>
姓名: {{firstName + " " + lastName}}
</p>
<script>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
 $scope.firstName= "John";
 $scope.lastName= "Doe";
});
</script>

AngularJS モジュール定義アプリケーション:

AngularJS モジュール

var app = angular.module('myApp', []);

AngularJS コントローラー制御アプリケーション:

AngularJS コントローラー

app.controller('myCtrl', function($scope) {
 $scope.firstName= "John";
 $scope.lastName= "Doe";
});

関連推奨事項:

AngularJS ファジー クエリ関数の実装コード

AngularJS を共有するショッピングカート内の全選択と選択を反転する機能の実現例

入力ボックスの文字数制限リマインダー機能をAngularJSで実現

以上がAngularJS チュートリアルとサンプル コード分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。