Latest web development tutorials

AngularJSはじめに

AngularJSは、JavaScriptのフレームワークです。 これは、<スクリプト>タグを使用してHTMLページに追加することができます。

AngularJS ディレクティブは、 HTMLを拡張し、貫通式 HTMLへのバインドデータ。

AngularJS JavaScriptフレームワークであります

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

AngularJSのJavaScriptファイルには、リリースのフォームがページにスクリプトタグにより添加してもよいです。

<SCRIPT SRC = "http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js"> </スクリプト>

ノート 私たちは、<body>要素の下でスクリプトを提案します。
HTMLをロードするためのスクリプトをロードする対象ではないので、これは、ページの読み込み速度が向上します。

各angular.js版ダウンロード： https://github.com/angular/angular.js/releases

AngularJSは、HTMLを拡張します

NG-ディレクティブによりAngularJSは、HTMLを拡張しました。

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

NGモデルは、（例えば、入力フィールドの値として）要素値は、アプリケーションにバインドコマンド。

NG-bindコマンドは、HTMLビューにアプリケーションデータをバインドします。

AngularJS例

<！DOCTYPE HTML>
<HTML>
<ヘッド>
<メタ文字セット= "UTF-8 ">
<SCRIPT SRC = "http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js"> </スクリプト>
</ HEAD>
<ボディ>

<DIV ngのアプリ= "" >
<P> 名称：の<input type = "text" NGモデル= "名前"> </ P>
<H1>こんにちは{{名前} } </ H1>
</ DIV>

</ BODY>
</ HTML>

»をお試しください

説明する例：

ページがロードされると、自動的にAngularJS。

NG-アプリディレクティブは、<div>要素はのAngularJS アプリケーションであるAngularJSを伝える「所有者」。

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

アプリケーション変数名にNG-bindコマンドは、段落innerHTMLプロパティにバインドされています。

ノート あなたはngのアプリディレクティブを削除した場合、HTMLは、結果の式を評価するのではなく、式に直接表示されます。

AngularJSとは何ですか？

簡単に：AngularJSは、近代的な単一ページのアプリケーション（単一ページのアプリケーションのSPA）の開発を行います。

  • AngularJSは、HTML要素にアプリケーションデータをバインドします。
  • AngularJS HTML要素をクローン化し、繰り返すことができます。
  • AngularJSは非表示にし、HTML要素を表示することができます。
  • AngularJSは、HTML要素にコードを追加することができます "の背後にあります。」
  • AngularJSは、入力検証をサポートしています。

AngularJSディレクティブ

あなたが見ることができるように、AngularJS命令がNGの HTML属性を付けられます。

NG-initコマンドは、AngularJSアプリケーション変数を初期化します。

AngularJS例

<div ng-app="" ng-init="firstName='John'">

<p>姓名为 <span ng-bind="firstName"></span></p>

</div>

»をお試しください

ノート HTML5を使用すると、 データー先頭に（自家製）プロパティを拡張することができます。
AngularJSプロパティはng-に始めていますが、有効なHTML5のWebページを作るために、データ-ng-を使用することができます。

有効なHTML5と：

AngularJS例

<div data-ng-app="" data-ng-init="firstName='John'">

<p>姓名为 <span data-ng-bind="firstName"></span></p>

</div>

»をお試しください

AngularJS表現

{{式}}：中括弧で書かれた式をAngularJS。

AngularJS表現はNG-bindコマンドは、同じ目的を持っているHTMLにデータをバインドします。

書込み位置「出力」データでAngularJS表現。

JavaScript式のような式をAngularJS：彼らは、テキスト、演算子、および変数を含めることができます。

例5 + 5 {{}}または{{firstNameの+ "" + lastNameの}}

AngularJS例

<！DOCTYPE HTML>
<HTML>
<ヘッド>
<メタ文字セット= "UTF-8">
<SCRIPT SRC = "http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js"> </スクリプト>
</ HEAD>
<ボディ>

<DIV ngのアプリ= "">
<P>私の最初の式：{{5 + 5}} </ P>
</ DIV>

</ BODY>
</ HTML>

»をお試しください

AngularJSアプリケーション

AngularJS モジュール（モジュール）AngularJSアプリケーションを定義します。

AngularJSアプリケーションを制御するためのAngularJS コントローラ（コントローラ）。

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

AngularJS例

<div ngのアプリ= "て、myApp " NG-コントローラ= "myCtrl">

名前：の<input type = "text" NG-モデル= "firstNameの"> <BR>
姓：の<input type = "text" NG-モデル= "lastNameの"> <BR>
<BR>
名前：{{firstNameの+ "" + lastNameの}}

</ DIV>

<スクリプト>
VARアプリ= angular.module（ 'て、myApp' 、[]）;
app.controller（ 'myCtrl'、関数（ $スコープ）{
$ Scope.firstName = "ジョン"。
$ Scope.lastName = "ドウ";
}）;
</スクリプト>

»をお試しください

AngularJSのアプリケーション・モジュール定義：

AngularJSモジュール

VARアプリ= angular.module（ 'て、myApp'、[]）;

コントローラアプリケーションAngularJS。

AngularJSコントローラ

app.controller（ 'myCtrl'、関数（$スコープ）{
$ Scope.firstName = "ジョン"。
$ Scope.lastName = "ドウ";
}）;

次のチュートリアルでは、より多くの知識とアプリケーションモジュールを学びます。