angularJs とは何ですか? angularjs の概要 (一部のバージョン)-jsチュートリアル-php.cn

1 AngularJS とは何ですか?

4 AngularJS 表达式

5 AngularJS 应用

ホームページ

ウェブフロントエンド

jsチュートリアル

angularJs とは何ですか? angularjs の概要 (一部のバージョン)

寻∝梦

Sep 08, 2018 pm 03:13 PM

angularjs html

この記事では主に angularjs の紹介、angularjs 拡張機能 HTML、angularjs の命令、式、アプリケーションの紹介を紹介します

では、この記事を一緒に見ていきましょう。

AngularJS の紹介

1 AngularJS とは何ですか?

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

AngularJS はアプリケーションデータを HTML 要素にバインドします。
AngularJS は HTML 要素を複製して繰り返すことができます。
AngularJS は HTML 要素を非表示にしたり表示したりできます。
AngularJS は HTML 要素の「後ろ」にコードを追加できます。
AngularJS は入力検証をサポートしています。

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

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

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

AngularJS は JavaScript ファイルとして公開され、script タグを通じて Web ページに追加できます:

scriptsrc="http://cdn . static.runoob.com/libs/angular.js/1.4.6/angular.min.js">script>これにより、HTML の読み込みはスクリプトの読み込みの影響を受けないため、Web ページの読み込み速度が向上します。

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

2 AngularJS は HTML を拡張します

AngularJS は ng-directives を通じて HTML を拡張します。

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

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

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

3 AngularJS ディレクティブ

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

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

<png-app=""ng-init="firstName=&#39;John&#39;">
<p>姓名为<spanng-bind="firstName"></span></p>
</p>

ログイン後にコピー

スクリプトは要素の最後に配置することをお勧めします。

	HTML5 では、 data- から始まる拡張 (自家製) 属性が許可されています。 AngularJS 属性は ng- で始まりますが、 data-ng- を使用してページを HTML5 で有効にすることができます。

4 AngularJS 表达式

AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<scriptsrc="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script></head>
<body>
<png-app=""><p>我的第一个表达式：
 {{ 5 + 5 }}</p></p>
</body>
</html>

ログイン後にコピー

5 AngularJS 应用

AngularJS 模块（Module）定义了 AngularJS 应用。

AngularJS 控制器（Controller）用于控制 AngularJS 应用。

ng-app指令定义了应用, ng-controller 定义了控制器。（想看更多就到PHP中文网AngularJS开发手册中学习）

png-app="myApp"ng-controller=" myCtrl"> 名前: inputtype="text"ng-model=" 名「>」 br>姓:inputtype="text" NGモデル= "姓">br>br>姓: {{名 + " " + 姓}}p>スクリプト>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe";}); script>

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

varapp =angular.module ('マイアプリ ',[]);

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

アプリ.コントローラー('myCtrl',関数($スコープ) { $スコープ.名=「ジョン」; この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイトAngularJS ユーザーマニュアルにアクセスしてください)。ご質問がある場合は、以下にメッセージを残してください。