+角度コードはday03をいいます

A、AngularJs

AngularJSは、 JavaScriptフレームワーク。指示 HTMLを拡張し、によって表現 HTMLにデータをバインド。

4の1の特徴

MVCパターン、結合モジュール式の、自動化された双方向のデータ、依存性注入

2.

　　1）まず、コアパッケージのページで紹介しました

　　　　<スクリプトSRC = "../プラグイン/ angularjs / angular.min.js"> </ SCRIPT>

　　2）bodyタグにNG-アプリを記述する必要があります

　　　　<ボディNG-アプリ= "">

　　3）{} {}可変式またはインプレッションデータ

　　モデルをngの4）：透過値に対応する名前、遠位端は、NG-モデル$スコープに格納された値に応じて取得することができます

　　5）$範囲：AngularJs内蔵されているオブジェクト、対応するデータ要求データもあります

　　6）$ NG-INIT：長いページの実装は、最初にNG-INITで操作を実行します

　　7）VARアプリ= angular.module（「アプリ」は、[]）==「、bodyタグで使用後宣言モジュール名を定義する必要があり、アプリケーションと呼ばれるモジュールを定義します

　　　ここで、[]には、プラグインああを置くことは困難です

　　8）NG-クリック：マウスのクリックイベント==「onclickの

　　9）NG-リピート=「リストにおけるX」、Xの各リストのトラバースに対応

　　10）$のhttp：組み込みオブジェクトAngularJs、httpリクエストを送信する主な役割、およびAJAXを送ります

　　　　$ http.get $ http.post

　　11）$イベント：どのようなイベント入手することができ、現在の操作は、一般的にボックス内に使用されている==「チェックボックスがチェックされています

二、demo

1.小さな問題

1）あなたが追加し終わったら、次の新しいデフォルト値の最後の増加があるときに増加し、成功の値の増加は、ウィンドウを残して後、

ときに、新しいエコー、それが新たなNG-クリックで宣言する必要があります=「実体= {}」明らかに、我々は、このデータを必要としません

如：<ボタンタイプ= "ボタン"クラス= "BTN BTN-デフォルトの"タイトル= "新建" NG-クリック= "実体= {}"データトグル= "モーダル"データ・ターゲット= "＃editModal"> <Iクラス= "FA FA-FILE-O"> </ I>新建</ボタン>

2）ボタンをクリックして無効

NG-クリック= "DELE（）" を忘れないでください（）

2.すべてのクエリのJS

VARアプリ= angular.module（ 'brandApp'、[ 'ページネーション']）// []中为插件
app.controller（ 'brandController'、関数（$範囲、$ HTTP）{// $ HTTP发送AJAX 
	$スコープ。 findAll =関数（）{ 
	     $ http.get（ '../ブランド/ findAll.do'）成功（関数（応答）{ 
		 $ scope.list =応答; 
	    }）
	} 
}）。

3.ページングクエリjsのコード

<！ -ページングコンポーネントスタート- >
<SCRIPT SRC = "../プラグイン/ AngularJS / pagination.js"タイプ= "テキスト/ JavaScriptを"> </ SCRIPT>
<リンクのrel = "このスタイルシート"のhref =」.. /plugins/angularjs/pagination.css「>
<！ -コンポーネントの端をページング- >


リスト//リロードデータ
            $ scope.reloadList =関数（）{ 
                //スイッチページ
                $ scope.findPage（scope.paginationConf.currentPage $、$ scope.paginationConf.itemsPerPageを）; 
            } 
			//ページングコントロールが配置
            scope.paginationConf = $を{ 
                //これは、ページ
                currentPageに:. 1、
                //のデフォルトページ番号
                totalItems：10、
                //どのように多くのページ表示データ
                itemsPerPage：10、
                //手動で調整あたりのデータの何個表示するドロップダウンボックス
                perPageOptionsた：[10 、20]、40、30、50 
                のonChange：関数（）{ 
                    $ scope.reloadList（）; //リロード 
                }
            };


			ページ表示データ量：//最初のパラメータは、第二引数現在のタブページで
            $ scope.findPage =機能（ページ、行）{ 
                $ Http.get（」../ブランド/ findPage.doます？ = '+ +ページ'行=＆「+行）.successは（
                    関数（応答）{ 
                        //データセットリスト<ブランド>返す
                        $ scope.list = response.rows; 
                        レコードの総数クエリ// 
                        $ scope.paginationConf。 totalItems = response.total; //レコードの総数を更新
                    } 
                ）; 
            }

JS保存4.追加および変更

クエリIDで裁判官は、新規または変更されている存在

         　 scope.save機能= $（）{ 
                VARのmethodName = '追加'; 
		IFは（！$ scope.entity.id = NULL）{//ヌルIDがまだない表し、ブランド変更しなければならない
		　　のmethodName = 'アップデート' ; 
		} 

                $ http.post（ 'やる' '../ブランド/' + methodNameの+、$ scope.entity）.success（
                    機能（応答）{ 
                        IF（response.success）{ 
                            //再クエリ
			　　 の警告（response.message ）; 
                            $ scope.reloadList（）; //再読み込み
                        }他{ 
                            アラート（response.message）; 
                        } 
                    } 
                ）; 
            }

　　　　　　//クエリ修正実体
　　　　　　　　$ scope.findOne =機能（言及ID以上）{
　　　　　　　　　　$ http.get（ '../ブランド/ findOne.do？上記のid =' +上記ID上記）.success（
　　　　　　　　　　　　　機能（応答）{
　　　　　　　　　　　　　　　　$ scope.entity =応答;
　　　　　　　　　　　　　}
　　　　　　　　　　）;
　　　　　　　　}

削除5.バッチ

　　　　　　　$ scope.selectIds = []; //選択されたIDのセットは、

	　　//更新チェック
            $ scope.updateSelection =関数（$イベント ID）{// $イベントは、 イベントの現在の操作が何得ることができる
                （$ event.target場合.checkedを）{//はいを選択した場合に、アレイが増加
                    $ scope.selectIds.push（ID）; 
                }他{ 
                    VAR IDX = $ scope.selectIds.indexOf（ID）; 
                    $ scope.selectIds.splice（IDX、 1）; //削除
                } 
            } 

	　　//バルク削除
            $ scope.dele =関数（）{ 
                //選択されたチェックボックス取得
                $ http.get（+ $の範囲'../ブランド/ delete.do IDS =か？' .selectIds）.success（
                    関数（応答）{ 
                        IF（response.success）{
                            警告（response.message）。
                            $ scope.reloadList（）; //刷新列表
                        }他{ 
                            警告（response.message）。
		　　　　　} 
                    } 
                ）。
            }