アンギュラー

アンギュラー

原作者	ミシュコ・ヘヴェリー
開発者	グーグル
初回リリース	2010年10月20日; 14年前[1] ( 2010-10-20 )
安定リリース	1.8.3 [2]  / 2022年4月7日; 2年前 ( 2022年4月7日)
リポジトリ	AngularJS リポジトリ
書かれた	JavaScript
プラットフォーム	JavaScript エンジン
サイズ	167 kB 制作 1.2 MB 開発
タイプ	ウェブフレームワーク
ライセンス	MITライセンス
Webサイト	AngularJS.org 日本語

AngularJS は、シングルページ アプリケーションを開発するための、廃止された無料のオープン ソース JavaScriptベースのWeb フレームワークです。主にGoogleと個人および企業のコミュニティによって保守されていました。クライアント側のモデル - ビュー - コントローラー(MVC) およびモデル - ビュー - ビューモデル(MVVM) アーキテクチャのフレームワークと、 Web アプリケーションおよびプログレッシブ Web アプリケーションで一般的に使用されるコンポーネントを提供することで、このようなアプリケーションの開発とテストの両方を簡素化することを目的としていました。

AngularJS は、 MongoDBデータベース、Express.js Web アプリケーション サーバー フレームワーク、AngularJS 自体 (またはAngular )、およびNode.jsサーバー ランタイム環境で構成されるMEANスタックのフロントエンドとして使用されました。

2022年1月1日以降、Googleはセキュリティ、ブラウザの互換性、jQueryの問題を修正するためにAngularJSを更新しなくなりました。^{[3] [4] [5]} Angularチームは、Angular（v2+）へのアップグレードを最善の策として推奨していますが、他の選択肢もいくつか提供しています。^[6]

AngularJS フレームワークは、最初に追加のカスタムHTML 属性が埋め込まれたハイパーテキスト マークアップ言語(HTML) ページを読み取ることによって機能します。Angular は、これらの属性をディレクティブとして解釈し、ページの入力部分または出力部分を標準の JavaScript変数で表されるモデルにバインドします。これらの JavaScript 変数の値は、コード内で手動で設定することも、静的または動的JSONリソースから取得することもできます。

AngularJSは、宣言型プログラミングはユーザーインターフェイスの作成とソフトウェアコンポーネントの接続に使用すべきであり、命令型プログラミングはアプリケーションのビジネスロジックの定義に適しているという信念に基づいて構築されました。^[7]このフレームワークは、モデルとビューの自動同期を可能にする双方向データバインディングを通じて動的なコンテンツを提示するために、従来のHTMLを適応および拡張しました。その結果、AngularJSはテスト容易性とパフォーマンスの向上を目的として、 明示的なドキュメントオブジェクトモデル（DOM）操作を重視しなくなりました。

AngularJS の設計目標は次のとおりです。

• DOM 操作をアプリケーション ロジックから分離します。この難しさは、コードの構造によって大きく左右されます。
• アプリケーションのクライアント側をサーバー側から分離します。これにより、開発作業を並行して進めることができ、両側を再利用できるようになります。
• UI の設計からビジネス ロジックの記述、テストまで、アプリケーション構築のプロセスに構造を提供します。

AngularJSは、プレゼンテーション、データ、ロジックコンポーネントを分離するMVCパターンを実装しました。^[8]依存性注入を使用して、Angularは、ビュー依存コントローラなどの従来のサーバー側サービスをクライアント側のWebアプリケーションにもたらしました。その結果、サーバーの負荷を大幅に軽減することができました。

AngularJS では、コンピュータ サイエンスの基礎に似た方法で「スコープ」という用語を使用しました。

コンピュータサイエンスにおけるスコープは、プログラム内で特定のバインディングが有効である時期を表します。ECMA -262仕様では、スコープを次のように定義しています。クライアント側のWebスクリプトでFunctionオブジェクトが実行される語彙環境。^[9]ラムダ計算におけるスコープの定義に似ています。^[10]

「MVC」アーキテクチャの一部として、スコープは「モデル」を形成し、スコープで定義されたすべての変数は「ビュー」と「コントローラー」からアクセスできます。スコープは接着剤として動作し、「ビュー」と「コントローラー」を結び付けます。

AngularJSブートストラッパーによって実行されるタスクは、DOMがロードされた後に 3つのフェーズ^{[11]で発生しました。}

1. 新しいインジェクターの作成
2. DOMを装飾するディレクティブのコンパイル
3. すべてのディレクティブをスコープにリンクする

AngularJS ディレクティブを使用すると、開発者は、データ バインディングとプレゼンテーション コンポーネントの動作を定義する、カスタムかつ再利用可能な HTML のような要素と属性を指定できます。最もよく使用されるディレクティブは次のとおりです。

ng-animate

モジュールは、既存のコアおよびカスタム ディレクティブ内で JavaScript、CSS3 トランジション、および CSS3 キーフレーム アニメーション フックのサポートを提供します。

ng-app

AngularJS アプリケーションのルート要素を宣言します。この要素の下でディレクティブを使用してバインディングを宣言し、動作を定義できます。

ng-aria

一般的なARIA 属性のアクセシビリティ サポート用のモジュール。

ng-bind

DOM 要素のテキストを式の値に設定します。たとえば、<span ng-bind="name"></span>span 要素内の 'name' の値を表示します。アプリケーションのスコープ内の変数 'name' への変更は、DOM に即座に反映されます。

ng-class

ブール式の値に応じて、条件付きでクラスを適用します。

ng-controller

HTML 式を評価する JavaScript コントローラー クラスを指定します。

ng-if

条件が true の場合に次の要素をインスタンス化する基本的な if ステートメント ディレクティブ。条件が false の場合、要素は DOM から削除されます。true の場合、コンパイルされた要素のクローンが再挿入されます。

ng-init

要素が初期化されるときに 1 回呼び出されます。

ng-model

と似ていますng-bindが、ビューとスコープの間に双方向のデータ バインディングを確立します。

ng-model-options

モデルの更新方法のチューニングを提供します。

ng-repeat

コレクションの項目ごとに要素を 1 回インスタンス化します。

ng-show＆ng-hide

ブール式の値に応じて、条件に応じて要素を表示または非表示にします。表示と非表示は、CSS 表示スタイルを設定することによって実現されます。

ng-switch

選択式の値に応じて、選択肢のセットから 1 つのテンプレートを条件付きでインスタンス化します。

ng-view

^{指定されたコントローラによって駆動されるテンプレートをレンダリングする前にJSONを解決するルート[12]}を処理する基本ディレクティブ。

ng-*属性は HTML 仕様では有効ではないため、data-ng-*をプレフィックスとして使用することもできます。たとえば、 とng-appはどちらもdata-ng-appAngularJS では有効です。

AngularJS の双方向データバインディングには、サーバーバックエンドのテンプレート作成の責任を大幅に軽減するという最も注目すべき機能がありました。代わりに、モデルで定義されたスコープに含まれるデータに従って、テンプレートがプレーン HTML でレンダリングされました$scope。Angular のサービスは、モデルセクションの変更を検出し、コントローラーを介してビュー内の HTML 式を変更しました。同様に、ビューの変更はモデルに反映されました。これにより、DOM を積極的に操作する必要がなくなり、Web アプリケーションのブートストラップとラピッドプロトタイピングが促進されました。^{[13] AngularJS は、モデル値が変更されたときにリスナーをトリガーする}Ember.jsやBackbone.js とは異なり、ダーティチェックのプロセスで現在の値と以前に保存された値を比較することでモデルの変更を検出しました。^[14]

$watch

はダーティチェックに使用されるAngularメソッドです。$scopeに割り当てられた変数または式は、 Angularで自動的に$watchExpressionを設定します。したがって、 $scopeに変数を割り当てたり、 ng-if、ng-show、ng-repeatなどのディレクティブを使用したりすると、 Angularスコープにウォッチが自動的に作成されます。Angularは、 $scopeオブジェクトに$$watchersの単純な配列を維持します。

AngularJS でウォッチャーを定義するさまざまな方法。

• $scopeの属性を明示的に $watch します。

  $scope.$watch('person.username', validateUnique);

• テンプレートに補間を配置します (現在の $scope にウォッチャーが作成されます)。
• ウォッチャーを定義するには、 ng-modelなどのディレクティブに依頼します。

  <input ng-model="person.username" />

$digest

AngularJS によって頻繁に内部的に呼び出される Angular メソッドです。$digestメソッドでは、Angular はスコープ/子スコープ内のすべての$watchesを反復処理します。

$apply

内部的に$digest を呼び出す Angular メソッドです。このメソッドは、Angular に手動でダーティ チェックを開始するように指示する場合に使用します (すべての$watchesを実行します)。

$destroy

は、AngularJS のメソッドとイベントの両方です。$destroy()メソッドは、スコープとそのすべての子をダーティ チェックから削除します。$destroyイベントは、$scope または $controller が破棄されるたびに Angular によって呼び出されます。

AngularJSはもともと2009年にBrat Tech LLC [ ^16]のMiško Hevery ^[15 ]によって、企業向けの簡単に作成できるアプリケーション向けに、メガバイト単位で価格が決まるオンラインJSONストレージサービスの基盤ソフトウェアとして開発されました。このベンチャーはWebドメイン「GetAngular.com」 ^[16]にあり、数人の加入者がいましたが、2人はビジネスアイデアを放棄し、Angularをオープンソースライブラリとしてリリースすることを決定しました。

1.6リリースでは、コンポーネントベースのアプリケーションアーキテクチャの概念を含む、Angularの多くの概念がAngularJSに追加されました。 ^[17]このリリースでは、サンドボックスをバイパスする多数の脆弱性が発見されたにもかかわらず、多くの開発者が追加のセキュリティを提供すると信じていたサンドボックスが削除されました。^[18] AngularJSの現在の（2023年11月現在）安定リリースは1.8.3です。^[19]

2018年1月、AngularJSの段階的廃止のスケジュールが発表されました。1.7.0のリリース後、AngularJSの積極的な開発は2018年6月30日まで継続されます。その後、1.7は長期サポートとして2021年12月31日までサポートされました。^{[4] [5]}

AngularJSのバージョン1.3以降はInternet Explorer 8以前をサポートしていませんでした。AngularJS 1.2はIE8をサポートしていましたが、そのチームはサポートしていませんでした。^{[20] [21]}

AngularJSの後続バージョンは単にAngularと呼ばれます。^[22] Angularは互換性のないTypeScriptベースのAngularJSの書き直しです。Angular 4は2016年12月13日に発表されました。ルーターパッケージのバージョンがすでにv3.3.0として配布されていたため、バージョン3がスキップされ、混乱を避けることができました。^[23]

AngularDartはDart上で動作します。DartはCスタイルの構文を使用するオブジェクト指向、クラス定義、単一継承のプログラミング言語であり、Angular JS（ JavaScriptを使用）やAngular 2/Angular 4（ TypeScriptを使用）とは異なります。Angular 4は2017年3月にリリースされ、フレームワークのバージョンは、使用したルーターのバージョン番号と一致しました。Angular 5は2017年11月1日にリリースされました。^[24] Angular 5の主な改善点には、プログレッシブウェブアプリのサポート、ビルドオプティマイザー、マテリアルデザインに関連する改善点が含まれます。^[25] Angular 6は2018年5月3日にリリースされ、^[26] Angular 7は2018年10月18日にリリースされ、Angular 8は2019年5月28日にリリースされました。Angularはセマンティックバージョニング標準に従っており、各メジャーバージョン番号は潜在的に互換性を破る変更を示しています。 Angularは、各メジャーバージョンに対して6か月間のアクティブサポートと、それに続く12か月間の長期サポートを提供することを約束しています。メジャーリリースは2年ごとに行われ、メジャーリリースごとに1〜3回のマイナーリリースが行われます。^[27]

通常のAngularアプリケーションはブラウザ内で実行されますが、Angular Universalはサーバー側レンダリング（SSR）を通じてサーバー上に静的なアプリケーションページを生成します。^[28]

AngularJS Material ^{[29] [30]}は、AngularJSでMaterial Designを実装したUIコンポーネントライブラリでした。 ^[31]このライブラリは、再利用可能で、十分にテストされ、アクセス可能なUIコンポーネントのセットを提供しました。 2022年1月、公式ウェブサイトで発表されたように、ライブラリは閉鎖されました。^[32] AngularJS Materialライブラリは、本番環境での使用に適した成熟した安定した製品であり、AngularJS 1.xでのみ動作します。 Angular Materialライブラリは、angular/material2 GitHubリポジトリで入手できます。

2012年7月、AngularチームはGoogle Chromeブラウザ用の拡張機能「Batarang」を開発し、^[33] Angularで構築されたウェブアプリケーションのデバッグエクスペリエンスを改善しました。この拡張機能は、パフォーマンスのボトルネックを簡単に検出できるようにすることを目的としており、アプリケーションのデバッグ用のGUIを提供しました。^[34] 2014年後半から2015年初頭にかけて、この拡張機能はAngularの最新リリース（v1.2.x以降）と互換性がありませんでした。^[35]この拡張機能の最終更新は2017年4月4日でした。

AngularJS はダイジェスト サイクルのパラダイムを設定しました。このサイクルはループと見なすことができ、その間に AngularJS はすべての によって監視されているすべての変数に変更があったかどうかを確認します$scopes。$scope.myVarがコントローラで定義され、この変数が監視対象としてマークされている場合、Angular は各ループ反復で myVar の変更を監視します。

このアプローチでは、AngularJSが毎サイクルでチェックする変数が多すぎると、レンダリングが遅くなる可能性があります$scope。Miško Heveryは、どのページでもウォッチャーを2000未満に抑えることを提案しました。^[14]

• リアクト
• js の
• ポリマー（ライブラリ）
• JavaScriptフレームワークの比較
• タイプスクリプト

Wikimedia Commons には、AngularJSに関連するメディアがあります。

• 公式サイト