angularjsの概要

angularの概要

jQuery:ライブラリ

は、コードの利用を向上させ、コード後期のメンテナンス

を向上させるための一般的な方法をアクティブに呼び出します.

Angular:フロントエンドフレーム

フレームワークは、いくつかの構造またはモードを提供し、

フレームワークによって提供される構造またはモードに基づいてコード

を書く.

は、フレームワークによって対応する操作を実行するのに役立ちます.

angularとは

1、非常に優秀なフロントエンドの高級JSフレームワークです.

2、このようなフレームワークがあれば簡単にSPA(single page application)アプリケーションを構築することができます.

3、その核心は命令によってHTMLを拡張し、式によってHTMLにデータをバインドすることである.

4、AngularはDOM操作を推奨しない.つまりNGではDOM操作はほとんど見つからない.

Angularのコア特性

指令

MVC

モジュール化angular.module()

双方向データバインディング

インストラクション

angularのng-で始まる属性を命令

と呼ぶ.

ng-appはhtmlコードを管理するためにangularに伝え、ng-appが存在する要素とそのサブ要素を管理する.

ng-clickクリックイベントを登録するために使用されます.
var add = document.getElementById('add'); add.onclick=function(){ val = (val-0)+1;//num.value = (num.value - 0) +1 } $scope.add = { $scope.num = ($scope.num - 0 )+ 1; }

ng-model:var num = document.getElementById('num').value

ng-init:初期化操作を行う:ng-init=「user.name='小明」

モジュール

angular.module('myApp',[])

第1のパラメータはモジュールの名前であり、第2のパラメータは配列であり、配列の要素はモジュールが依存する他のモジュールの名前である.モジュールに依存しなくても、第2のパラメータに空の配列を渡す必要がある.そうしないとangular.module('myApp')はmyAppという名前のモジュールオブジェクトを取得することです
コントローラ

angular.module('myApp',[]).controller('demoController',function($scope){})

最初のパラメータは、コントローラの名前の2番目のパラメータで、コールバック関数で、コールバック関数に私たちが望んでいるjsコードを書きます.
双方向データバインド

データモデルの値が変化するとページ値が変化する.ページ値の変更は、データ・モデル値の変更をもたらし、これらの相互影響の関係は双方向データ・バインディングです.

ng-modelの使用

MVC思想

M:Modelモデル:データストレージ、いくつかのビジネスロジック

V:Viewビュー:データを表示するための

C:Controllerコントローラ:スケジューリングビジネスロジック

常用命令

ng-bind

式点滅の問題を解決するために使用される

注意:ng-bind命令

はダブルラベルでのみ使用可能である.

ng-cloak

式点滅の問題を解決するために使用される

{{name}}

は、angularがロードするとページから削除されるので、ng-cloakというスタイル名の特性を利用する.

ngSanitizeモジュールnpm install angular-sanitize

は、ng-bind-html命令を使用してデータモデルをレンダリングする.

ng-repeat

は、出力配列

を循環するために用いることができる.

どの要素に書いてあるかは、どの要素を循環するかです.

構文:forinループに似ています {{item}}+track by$index配列中のデータが重い問題を解決+

はkey、value対

をレンダリングするためにも使用できます.

ng-repeatは遍歴の中でいくつかのデータモデルを暴露します.

$even:trueの場合、現在のデータが偶数番目のデータであることを示すブール値を提供し、インデックス0から

を計算する.

$odd:trueの場合、現在のデータが奇数番目のデータであることを示すブール値を提供し、インデックス0から

を計算する.

$first,$last ,$middle ng-class:

複数のスタイルから1つのスタイルを選択

構文:1つのkeyからvalueオブジェクトから1つの属性を取得する値

と同様

ng-class="{'A':'red','B':'blue','C':'green'}"

複数のスタイルから複数を選択

構文:key、valueオブジェクトも書きます.ここでkeyは私たちが提供したクラススタイル名です.valueはブール値で、trueの場合、対応するkeyはclassにスタイル名として追加されます.

ng-hide/ng-show

ng-hide:ブール値が必要です.trueの場合、現在の要素を非表示にする

です.

ng-show:ブール値が必要です.trueの場合、現在の要素

が表示されます.
ng-if:ブール値が必要です.trueの場合、現在の要素がfalseの場合、現在の要素が削除されます.
ng-switch:jsのswitch caseと同様にng-switch-whenと同様に使用

その他の共通命令

ng-checked:

ラジオ/チェックがオンかどうかは、一方向データバインディング

です.

ng-selected:

が選択されているかどうか

ng-disabled:

を無効にするかどうか

ng-readonly:

読み取り専用かどうか

共通イベント命令
以上の機能命令とは異なり、Angularはイベントにバインドするための命令もいくつか定義しています.

ng-blur:フォーカスを失う

ng-focus:フォーカス

を取得

ng-change:変更イベント

ng-copy:レプリケーションイベント

ng-click: ng-click="add()"

ng-dblclick:ダブルクリックイベント

ng-submit:フォームコミットイベント