AngularJSアプリケーション
これからが本当のAngularJS単一ページのWebアプリケーション(単一ページのWebアプリケーション、SPA)Aを作成するための時間があります。
AngularJS応用例
あなたがAngularJSについて十分な知識を学んできた、今、あなたの最初のAngularJSアプリケーションの作成を開始することができます。
マイノート
残りのワード数:100
アプリケーションの説明
AngularJS例
<ヘッド>
<メタ文字セット= "UTF-8 ">
<SCRIPT SRC = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </スクリプト>
</ HEAD>
<ボディ>
<DIVのNG-コントローラ= "myNoteCtrl ">
<H2>私のノート</ H2>
<P> <テキストエリアのNG-モデル = "メッセージ" colsの= "40"行= "10"> </ TEXTAREA> </ P>
<P>
<ボタンngのクリック= "保存 ()">保存</ button>の
<ボタン=「クリアngがクリック () ">クリア</ button>の
</ P>
<P>数は、文字の左: <スパンNG-バインド= ")(左"> </ SPAN> </ P>
</ DIV>
<スクリプトSRC = "myNoteApp.js"> </スクリプト>
<スクリプトSRC = "myNoteCtrl.js"> </スクリプト>
</ BODY>
</ HTML>
»をお試しください
アプリケーションファイル "myNoteApp.js」:
コントローラファイル」myNoteCtrl.js」:
$ Scope.message = "";
; - $ Scope.left =関数(){$ scope.message.length 100を返します;}
$ Scope.clear =関数(){$のscope.message = "";};
$ Scope.save =関数(){アラート(「注保存されました ");};
});
NG-アプリ= "myNoteApp「コンテナます。<html>要素はAngularJS アプリケーションです。
コントローラ内の<div>のHTMLページ:NG-コントローラー= "myNoteCtrl"スコープ:
NG-モデルディレクティブバインド<TEXTAREA>コントローラ変数メッセージへ:
二ngのクリックイベントは明確なコントローラ機能を(呼び出し)と(保存):
<ボタン=「クリアngがクリッククリア</ボタン>() ">
NG-bindコマンドは、<スパン>にコントローラ機能を左に()バインドするために、残りの文字を表示するために使用されます。
AngularJsのロード後に実行するために必要なアプリケーションのライブラリファイル:
<スクリプトSRC = "myNoteCtrl.js"> </スクリプト>
AngularJSアプリケーション・アーキテクチャ
上記の例は、完全なAngularJS単一ページのWebアプリケーション(単一ページのWebアプリケーション、SPA)です。
<HTML>要素は、AngularJSアプリケーション(ngのアプリを =)が含まれています。
<div>要素は、(NG-コントローラ =)AngularJSコントローラの範囲を定義します。
アプリケーションは、コントローラのロットで製造することができます。
アプリケーションファイル(私の ... App.js)は、モデルコードのアプリケーションを定義します。
1つまたは複数のコントローラファイル(私 ... Ctrl.js)は、コントローラのコードを定義します。
概要 - どのようにそれは動作しますか?
アプリケーションのルート要素でngのアプリディレクティブ。
単一ページのWebアプリケーション(単一ページのWebアプリケーション、SPA)、通常は<HTML>要素のルートアプリケーションの場合。
一つ以上のngのコントローラディレクティブは、アプリケーションのコントローラを定義します。 各コントローラには、自分のスコープ定義のHTML ::要素を持っています。
HTML DOMContentLoadedイベントに自動的に起動AngularJS。 あなたはngのアプリディレクティブ、AngularJSロード命令モジュール、およびngのアプリを見つけた場合は、アプリケーションのルートがコンパイルされるように。
それは小さな部品が速くコンパイルと実行されますされている場合、ルートアプリケーションは、ページ全体、またはページの小さな一部であってもよいです。