Latest web development tutorials

AngularJSアプリケーション

これからが本当のAngularJS単一ページのWebアプリケーション(単一ページのWebアプリケーション、SPA)Aを作成するための時間があります。


AngularJS応用例

あなたがAngularJSについて十分な知識を学んできた、今、あなたの最初のAngularJSアプリケーションの作成を開始することができます。

マイノート



残りのワード数:100



アプリケーションの説明

AngularJS例

<HTML ngのアプリ= "myNoteApp ">
<ヘッド>
<メタ文字セット= "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」:

VARアプリ= angular.module( "myNoteApp」、[]);

コントローラファイル」myNoteCtrl.js」:

app.controller(「myNoteCtrl」、関数($スコープ){
$ Scope.message = "";
; - $ Scope.left =関数(){$ scope.message.length 100を返します;}
$ Scope.clear =関数(){$のscope.message = "";};
$ Scope.save =関数(){アラート(「注保存されました ");};
});

NG-アプリ= "myNoteApp「コンテナます。<html>要素はAngularJS アプリケーションです。

<HTML ngのアプリ= "myNoteApp ">

コントローラ内の<div>のHTMLページ:NG-コントローラー= "myNoteCtrl"スコープ:

<DIVのNG-コントローラ= "myNoteCtrl ">

NG-モデルディレクティブバインド<TEXTAREA>コントローラ変数メッセージ

<テキストエリアNG-モデル= "メッセージ " colsの= "40"行= "10"> </ TEXTAREA>

ngのクリックイベントは明確なコントローラ機能を呼び出し(保存):

<ボタンの「保存= ngがクリック保存</ボタン>() ">
<ボタン=「クリアngがクリッククリア</ボタン>() ">

NG-bindコマンドは、<スパン>にコントローラ機能を左に()バインドするために、残りの文字を表示するために使用されます。

数は、文字の左:<スパンNG = "左()" -bind> </ span>の

AngularJsのロード後に実行するために必要なアプリケーションのライブラリファイル:

<スクリプトSRC = "myNoteApp.js"> </スクリプト>
<スクリプト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のアプリを見つけた場合は、アプリケーションのルートがコンパイルされるように。

それは小さな部品が速くコンパイルと実行されますされている場合、ルートアプリケーションは、ページ全体、またはページの小さな一部であってもよいです。