AngularJS|コンセプト

AngularJS

JavaScriptで作成されたクライアントMVCアーキテクチャフレームワーク.単一ページアプリケーション(SPA)は、単一ページアプリケーションのWeb開発の真髄である.
データ管理、論理、表示を分離し、シームレスな接続を実現します.
特に、データベースの作成、読み取り、更新、削除を中心としたアプリケーションです.

ng-命令を使用してHTMLを拡張します.

を使用してHTMLにデータをバインドします.

特長

作成するjavaスクリプトの数が減少しました.

MVC構造を提供し、MVC構造のコードを記述する必要はありません.

モデルは簡単なJavaScriptオブジェクトであり、setterとgetter関数を記述する必要はありません.

ビューとモデル間の双方向データバインドをサポートし、相互同期コードを記述する必要はありません.

コールバック関数登録から解放されます.

データのモデルは簡単なJavaScriptオブジェクトです.
モデルが

双方向データバインディングに変更されると、ビューも変更されます.
(逆も同様)

再利用しやすい静的UIコンポーネントを作成できます.

より複雑なUIコンポーネント(地図、グラフィック、並べ替え可能なテーブルなど)をHTMLタグとして作成できます.

<map> , <graph> , <table sortable = "true"> 등등

依存関係注入を使用したWebアプリケーションの開発

単位をテストすることができ、より分離された形式に開発することができる.

HTML、CSS開発者、JavaScript開発者の明確な区分

以前は、DOMの操作やイベントの処理のためにJavaScriptはHTMLをよく知っていたはずですが、HTML、CSS開発者との分離は難しいです.

Angular.jsはjavascriptがHTMLの構造を知る必要はなく、ビューコードとLogicコードが明らかに分離されています.

コンポーネントとコンセプト

Model
-単純JavaScriptオブジェクトとしてのデータとデータ構造
-変形されていない単純なJavaScriptオブジェクトの使用
View
-テンプレートとモデルを結合して画面に表示するDOMオブジェクト.
-テンプレートはHTMLであるため、直接DOMと解釈される
-DOMのDirectivesは、テンプレートエンジン$compileコマンドで$watchを設定し、モデルの変更を監視し続けます.
Controller
-データを格納するモデルを、ユーザーに表示されるビューに関連付けます.
-JavaScriptからなる制御ロジック
-$scope(組み込みコンポーネント)によるViewへのデータ転送
Scope
-特定のDOM領域のモデル
-モデルとビューを監視、反映し、コントローラにイベントを送信する役割
-DOMに近い階層でDOMを理解する必要がない
Template
-テンプレートとしてHTML自体を使用
-命令、式、フィルタなどの制御テンプレートを使用
Directives
-HTMLを展開するAngularJS命令のみ
(ex-{expressions}、ng-app、ng-controllerなど)
-ユーザーの定義を許可
Expressions(式)
-scopeから関数または変数にアクセスする式としてテンプレートで使用します.
-繰り返し、条件、および関連式は存在せず、指示語として存在します.
-でマーク
Filer
-式が画面に表示される形式
-{式|フィルタとして使用
-ユーザー定義の許可
Data Binding
-モデルをビューのデータにリアルタイムで関連付ける
-双方向データのバインド

Compiler
-テンプレート内のAngularJSのみの命令または式の役割を処理します.
Module
-コントローラ、サービス、フィルタ、コマンドなどの主要な機能を含む、アプリケーションの異なる機能を構成するコンテナです.
-すべてのJavaScript機能は、ng-app=「モジュール名」からモジュールユニットの管理を開始します.
Service
-特定の機能を担当するオブジェクト.
-一部の共通タスクを実行するSingletonオブジェクト(1つのインスタンスの設計モードのみ)

リスト
$compile, $controller, $filter, $log, $document, ....等

依存注入
-ソースコードではなく、外部設定ファイルにコンポーネント間の依存関係を注入できるようにする設計モードです.
-モジュールの結合度を下げる
Injector
-Dependency Injectionを含むコンテナロール

さぎょうげんり

DOM Content Loaded Event
-スタイルシート、画像、サブフレームワークのロードが完了するまで待つことなく、ドキュメントの完全なロードと解析時に開始します.
原理はこうです.
1.ブラウザがHTMLをロードします.(DOMパーティション)
2.AngularJSをロードします.
3.DOM Content Loaded Eventを待ちます.
4.DOMをすべてロードした後、ng-app(インジケータ)を検索します.
5.ng−appは、注入に依存する$injectorを生成する.
6.インジェクタ命令アプリケーションのモデルのコンテキストrootScopeを作成します.
7.最終的には、ng−appを基準としてサブDOMをコンパイルし、rootScopeにリンクする.