ホームページ  >  記事  >  ウェブフロントエンド  >  angularJs とは何ですか? angularjs の概要 (一部のバージョン)

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

寻∝梦
寻∝梦オリジナル
2018-09-08 15:13:491537ブラウズ

この記事では主に 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>
angularJs とは何ですか? angularjs の概要 (一部のバージョン)スクリプトは 要素の最後に配置することをお勧めします。
angularJs とは何ですか? angularjs の概要 (一部のバージョン) 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 ユーザー マニュアル にアクセスしてください)。ご質問がある場合は、以下にメッセージを残してください。

以上がangularJs とは何ですか? angularjs の概要 (一部のバージョン)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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