WebフロントエンドJSフレームワークAngularJS
6263 ワード
詳細
AngularJSはGoogleが開発した優れたフロントエンドJSフレームワークで、HTMLの構築アプリケーションにおけるダイナミック性の不足を克服するために設計され、現在はGoogleの複数の製品に使用されている.
通常、動的アプリケーションの構築における静的Webテクノロジーの不足を解決するために、以下の方法を使用します.
クラスライブラリ-クラスライブラリはいくつかの関数の集合で、WEBアプリケーションを書くのに役立ちます.独自のコアコードでクラスライブラリを呼び出す方法で、jQueryなどの機能を実現します.
フレームワーク-フレームワークは特殊で、すでに実現されたWEBアプリケーションで、このフレームワークを組み合わせて具体的な論理的な充填を行うだけでいいです.ここでフレームワークは、特定のアプリケーションロジックに基づいてコードを呼び出す主導的な役割を果たします.フレームワークは、knockout、sproutcoreなどです.
AngularJSは、HTML自体のアプリケーション構築における欠陥を補完しようとする異なる方法を使用しています.AngularJSは,我々が識別子(directives)と呼ぶ構造を用いることで,ブラウザが新しい構文を認識できるようにする.AngularJSの最も核心的な特性はMVC、自動化双方向データバインディング、モジュール化、ルーティング、意味化ラベルなどである.
1、AngularJS MVC
MVCは、MVC(Model ViewControllerモデル-ビュー-コントローラ)設計を使用してWebアプリケーションを作成するモードである.
AngularJSプログラムのMVCは,テンプレート(View),表現層論理(Controller),データ(Model)の3つの部分に分けられる.
1)テンプレート:
AngularJSの命令、式を含むHTML、CSSで書かれたUIビューコードです.これらの命令、式はmodelをviewにマッピングするのに役立ちます.
AnjularJSのメカニズムは,HTMLテンプレートがブラウザによってDOMに解析されることである.DOMはAngularJSコンパイラの入力となります.AngularJSはDOMテンプレートを巡回していくつかの命令を生成します.すべてのコマンドはviewに対してデータバインドを設定する責任を負います.入力としてDOMを使用するのは、文字列ではなく、AngularJSが他のフレームワークと区別される最大の理由です.DOMを使用すると、命令語彙を拡張し、独自の命令を作成したり、再利用可能なコンポーネントを開発したりすることができます.AngularJSの命令は後で詳しく紹介します.
AngularJSコンパイルメカニズムといえばDOMと言わざるを得ません.DOMファイルオブジェクトモデル(Document Object Model)は、w 3 c組織が推奨する拡張可能なフラグ言語を処理する標準的なプログラミングインターフェースである.ページの何かを変更するには、JavaScriptがHTMLドキュメントのすべての要素にアクセスするエントリを取得する必要があります.このエントリは、HTML要素を追加、移動、変更または削除する方法および属性とともに、ドキュメントオブジェクトモデルDOMによって得られる.
2)表現層ロジック(コントローラ):
アプリケーションの論理と動作が含まれます.javascriptで定義し、ビューコントローラロジックとして使用します.コントローラにはDOMレベルのイベントリスニングを追加する必要はありません.これらはAngularJSに組み込まれています.UIノードDOMイベントが発生した後(buttonイベントをクリックするなど)、AngularJSは自動的にscope上の動作(Action)論理に移動します(すなわち、自動的にDOMを内蔵してイベントを取得し、対応するscope範囲を見つけてJS関数論理アプリケーションを行います).
3)データ:
ビューオブジェクト(viewobject)はAngularJS Scopeによって参照される必要があります.javascriptオブジェクト、配列、基本タイプのオブジェクトのいずれかです.AngularJSは、UIが変更されると自動的にモデルが更新され、逆にモデルが変更されると自動的にUIが更新されます.ここではgetter,setterのような形を定義する一連の方法は必要ありません.AngularJSは、双方向データバインディングにより、JavaScriptオブジェクト(モデル)を持つUI(ビュー)からデータを自動的に同期させることができる.
2、双方向データバインディングの自動化
双方向データバインディングとは、バインディングオブジェクトの属性がユーザインタフェースの変化に変化する能力を指し、逆も同様である.ここでコマンドng-modelを使用してデータモデル「activity_name」を作成し、所在するラベル「input」と双方向にバインドし、インタフェース入力の値がいつ変化しても対応するデータモデルが変化します(例えば$scope.activity_nameの値は入力したデータに従って変化します).逆に、$scopeの場合、「activity_name」属性をng-disabledの属性値として使用する.activity_nameの値が変更されると(値があっても値がない)、buttonがインタフェースUIに点として表現できるかどうか.双方向データバインディング命令はModelをViewに投影する方法を提供し,従来,Modelが変化すると開発者はDOM要素を手動で処理し,これらの変化に属性を反映する必要がある.これは双方向のプロセスであり,一方ではModelの変化がDOMにおける要素の変化を駆動する一方で,DOM要素の変化もModelに影響を及ぼす.
3、ルーティングメカニズム
ngのルーティングメカニズムはngRouteによって提供され,hashとhistoryの2つの方法でルーティングが実現され,ブラウザがhistoryをサポートしているかどうかを検出して対応する方法を柔軟に呼び出すことができる.ngのルーティング(ngRoute)は、使用するモジュールごとに参照される個別のモジュールであり、以下のアプリケーションは6つのモジュールを参照している.形式は次のとおりです.
ルーティングモジュールには、次のものがあります.
サービス$routeProviderは、アドレスバーとビューテンプレートのマッピングというルーティングテーブルを定義します.
サービス$routeParamsはアドレスバーのパラメータを保存します.たとえば{id:1,name:'tom'}
サービス$routeはルーティングマッチングを完了し、現在のルーティングに対応するcontrollerにアクセスするなどのルーティング関連属性アクセスおよびイベントを提供する.
コマンドngViewは、メインビューでサブビューをロードする領域を指定するために使用されます.
indexでhtmlでの使用
モジュールにngRouteへの を します
2)ルーティングテーブルの
$routeProviderはルーティングテーブルを するサービスを し、when(path,route)とotherwise(params)の2つのコアメソッドがあります.
3)ルーティングプロセス
$locationを ります.pathページジャンプ はジャンプの をルーティングテーブルと させ、たとえば、「/」、 する「/」を つけて、 のテンプレートで されているcontroller を つけて、 しいscopeを します.templateUrlの はng-viewで され、 たちのサブビューはここでスキップされます.otherwise(params)メソッドは、パスが しない に し、404ページまたはトップページにリダイレクトするredirectToパラメータを することができます.
4、AngularJS とタグ
「 プロパティ」は、メソッドの び し、 の 、controllerおよび$scopeオブジェクトのバインド、DOMの など、DOM にバインドされた です.ブラウザが してHTMLの を すると(いつものように)、DOM の は の と じように されます.Angular.jsアプリケーションが すると、AngularコンパイラはDOMツリー(ng-app のあるDOM から)を り、HTMLを し、これらの を します.
1)ng-model
ng-model は、DOMの をControllerの$scope modelにバインドするために される. な は、JavaScriptのイベントリスニング のような$watch をこの にバインドすることです.$watch ( )はAngularで する.jsのイベントループ($digestループ)でAngular.jsはDOMに して の を うことができる.
2){{ }}タグ
この カッコ プロパティは、$watch() を して、カッコ の にリスナーを します.この$watch こそAngular.にjsはviewをリアルタイムで に できます.
3)ng-show / ng-hide
ng-showおよびng-hide は、それらに えられた の の に づいて、それらが するDOMの を および にする.
4)ng-app
ng-appはAngular の を し、 するng-appがあるラベルを するだけです.Angular の を します.
5)ng-repeat
のカードのまとめでng-repeatを しましたが、ここで します. のscopeで (model)を してデータを し、ng-repeatを してDOMにバインドし、 し、リストを します.
AngularJSはGoogleが開発した優れたフロントエンドJSフレームワークで、HTMLの構築アプリケーションにおけるダイナミック性の不足を克服するために設計され、現在はGoogleの複数の製品に使用されている.
通常、動的アプリケーションの構築における静的Webテクノロジーの不足を解決するために、以下の方法を使用します.
クラスライブラリ-クラスライブラリはいくつかの関数の集合で、WEBアプリケーションを書くのに役立ちます.独自のコアコードでクラスライブラリを呼び出す方法で、jQueryなどの機能を実現します.
フレームワーク-フレームワークは特殊で、すでに実現されたWEBアプリケーションで、このフレームワークを組み合わせて具体的な論理的な充填を行うだけでいいです.ここでフレームワークは、特定のアプリケーションロジックに基づいてコードを呼び出す主導的な役割を果たします.フレームワークは、knockout、sproutcoreなどです.
AngularJSは、HTML自体のアプリケーション構築における欠陥を補完しようとする異なる方法を使用しています.AngularJSは,我々が識別子(directives)と呼ぶ構造を用いることで,ブラウザが新しい構文を認識できるようにする.AngularJSの最も核心的な特性はMVC、自動化双方向データバインディング、モジュール化、ルーティング、意味化ラベルなどである.
1、AngularJS MVC
MVCは、MVC(Model ViewControllerモデル-ビュー-コントローラ)設計を使用してWebアプリケーションを作成するモードである.
AngularJSプログラムのMVCは,テンプレート(View),表現層論理(Controller),データ(Model)の3つの部分に分けられる.
1)テンプレート:
AngularJSの命令、式を含むHTML、CSSで書かれたUIビューコードです.これらの命令、式はmodelをviewにマッピングするのに役立ちます.
AnjularJSのメカニズムは,HTMLテンプレートがブラウザによってDOMに解析されることである.DOMはAngularJSコンパイラの入力となります.AngularJSはDOMテンプレートを巡回していくつかの命令を生成します.すべてのコマンドはviewに対してデータバインドを設定する責任を負います.入力としてDOMを使用するのは、文字列ではなく、AngularJSが他のフレームワークと区別される最大の理由です.DOMを使用すると、命令語彙を拡張し、独自の命令を作成したり、再利用可能なコンポーネントを開発したりすることができます.AngularJSの命令は後で詳しく紹介します.
AngularJSコンパイルメカニズムといえばDOMと言わざるを得ません.DOMファイルオブジェクトモデル(Document Object Model)は、w 3 c組織が推奨する拡張可能なフラグ言語を処理する標準的なプログラミングインターフェースである.ページの何かを変更するには、JavaScriptがHTMLドキュメントのすべての要素にアクセスするエントリを取得する必要があります.このエントリは、HTML要素を追加、移動、変更または削除する方法および属性とともに、ドキュメントオブジェクトモデルDOMによって得られる.
2)表現層ロジック(コントローラ):
アプリケーションの論理と動作が含まれます.javascriptで定義し、ビューコントローラロジックとして使用します.コントローラにはDOMレベルのイベントリスニングを追加する必要はありません.これらはAngularJSに組み込まれています.UIノードDOMイベントが発生した後(buttonイベントをクリックするなど)、AngularJSは自動的にscope上の動作(Action)論理に移動します(すなわち、自動的にDOMを内蔵してイベントを取得し、対応するscope範囲を見つけてJS関数論理アプリケーションを行います).
3)データ:
ビューオブジェクト(viewobject)はAngularJS Scopeによって参照される必要があります.javascriptオブジェクト、配列、基本タイプのオブジェクトのいずれかです.AngularJSは、UIが変更されると自動的にモデルが更新され、逆にモデルが変更されると自動的にUIが更新されます.ここではgetter,setterのような形を定義する一連の方法は必要ありません.AngularJSは、双方向データバインディングにより、JavaScriptオブジェクト(モデル)を持つUI(ビュー)からデータを自動的に同期させることができる.
2、双方向データバインディングの自動化
双方向データバインディングとは、バインディングオブジェクトの属性がユーザインタフェースの変化に変化する能力を指し、逆も同様である.ここでコマンドng-modelを使用してデータモデル「activity_name」を作成し、所在するラベル「input」と双方向にバインドし、インタフェース入力の値がいつ変化しても対応するデータモデルが変化します(例えば$scope.activity_nameの値は入力したデータに従って変化します).逆に、$scopeの場合、「activity_name」属性をng-disabledの属性値として使用する.activity_nameの値が変更されると(値があっても値がない)、buttonがインタフェースUIに点として表現できるかどうか.双方向データバインディング命令はModelをViewに投影する方法を提供し,従来,Modelが変化すると開発者はDOM要素を手動で処理し,これらの変化に属性を反映する必要がある.これは双方向のプロセスであり,一方ではModelの変化がDOMにおける要素の変化を駆動する一方で,DOM要素の変化もModelに影響を及ぼす.
3、ルーティングメカニズム
ngのルーティングメカニズムはngRouteによって提供され,hashとhistoryの2つの方法でルーティングが実現され,ブラウザがhistoryをサポートしているかどうかを検出して対応する方法を柔軟に呼び出すことができる.ngのルーティング(ngRoute)は、使用するモジュールごとに参照される個別のモジュールであり、以下のアプリケーションは6つのモジュールを参照している.形式は次のとおりです.
angular
.module('yoDemoApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])ルーティングモジュールには、次のものがあります.
サービス$routeProviderは、アドレスバーとビューテンプレートのマッピングというルーティングテーブルを定義します.
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/activity_list.html',
controller: 'activity_listCtrl'
})
});サービス$routeParamsはアドレスバーのパラメータを保存します.たとえば{id:1,name:'tom'}
サービス$routeはルーティングマッチングを完了し、現在のルーティングに対応するcontrollerにアクセスするなどのルーティング関連属性アクセスおよびイベントを提供する.
コマンドngViewは、メインビューでサブビューをロードする領域を指定するために使用されます.
indexでhtmlでの使用
来加载。以上内容再加上$location服务，我们就可以实现一个单页面应用了。
具体跳转机制：
1）引入文件和依赖
モジュールにngRouteへの を します
angular
.module('yoDemoApp', [
'ngRoute'
])2)ルーティングテーブルの
$routeProviderはルーティングテーブルを するサービスを し、when(path,route)とotherwise(params)の2つのコアメソッドがあります.
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/activity_list.html',
controller: 'activity_listCtrl'
})
});3)ルーティングプロセス
$locationを ります.pathページジャンプ はジャンプの をルーティングテーブルと させ、たとえば、「/」、 する「/」を つけて、 のテンプレートで されているcontroller を つけて、 しいscopeを します.templateUrlの はng-viewで され、 たちのサブビューはここでスキップされます.otherwise(params)メソッドは、パスが しない に し、404ページまたはトップページにリダイレクトするredirectToパラメータを することができます.
.otherwise({
redirectTo: '/'
});4、AngularJS とタグ
「 プロパティ」は、メソッドの び し、 の 、controllerおよび$scopeオブジェクトのバインド、DOMの など、DOM にバインドされた です.ブラウザが してHTMLの を すると(いつものように)、DOM の は の と じように されます.Angular.jsアプリケーションが すると、AngularコンパイラはDOMツリー(ng-app のあるDOM から)を り、HTMLを し、これらの を します.
1)ng-model
ng-model は、DOMの をControllerの$scope modelにバインドするために される. な は、JavaScriptのイベントリスニング のような$watch をこの にバインドすることです.$watch ( )はAngularで する.jsのイベントループ($digestループ)でAngular.jsはDOMに して の を うことができる.
2){{ }}タグ
この カッコ プロパティは、$watch() を して、カッコ の にリスナーを します.この$watch こそAngular.にjsはviewをリアルタイムで に できます.
3)ng-show / ng-hide
ng-showおよびng-hide は、それらに えられた の の に づいて、それらが するDOMの を および にする.
4)ng-app
ng-appはAngular の を し、 するng-appがあるラベルを するだけです.Angular の を します.
5)ng-repeat
のカードのまとめでng-repeatを しましたが、ここで します. のscopeで (model)を してデータを し、ng-repeatを してDOMにバインドし、 し、リストを します.