ホームページ  >  記事  >  ウェブフロントエンド  >  Angular の概要とその機能の紹介_AngularJS

Angular の概要とその機能の紹介_AngularJS

WBOY
WBOYオリジナル
2016-05-16 16:17:151141ブラウズ

以前は、フロントエンド開発 (Web またはモバイル) では主に jQuery ネイティブ JS が使用されていました。フロントエンド UI フレームワークを使用している場合は、使用できる API も提供されている場合があります。そして、現在、多くの UI フレームワークが jQuery に基づいているので、jQuery から angularjs までの大きな範囲について話しましょう。私が angularjs について勉強してきた全体的な感想について話しましょう:

jqueryとの比較について

まず、Angular は MVC フレームワークであり、jQuery との違いは、前者は MVC コードの分離に重点を置き、モデル、コントローラー、ビューを使用してコードを編成するのに対し、後者は多くの API 関数を提供することです。アニメーションや $.animate などのより複雑なエフェクトを実現するには、ネイティブ JS を大量に記述する必要があるため、コードの量は比較的多くなります。

第二に、jQuery はコードをどのように編成するかを定義しません。参照用に別の js ファイルに置くことも、ページに直接記述して script タグで囲むこともできます。 inline タグでは、angularjs は HTML ページを複数のモジュールに分割します。各モジュールは独自のスコープ、サービス、ディレクティブを持つことができますが、全体的な構造は比較的明確です。そのコード構成はモジュール式です。

最後に、jQuery の考え方は、最初にページを設計し、次に既存のページで dom 操作を実行してからページを表示することです。ただし、角度ビューは単なるフレームであり、dom 操作または時間の監視は可能です。ディレクティブ内に実装されており、モデルをリッスンする限り、一般的に Dom オペレーション コードを直接記述することはほとんどありません。モデルが変われば見え方も変わります。

対象となるシーンについて

jQuery はほとんどの Web 開発に適しているはずですが、モバイル バージョン (jQuery mobile) もあります。SPA には angularjs の方が適しているという人もいます (個人的には、携帯電話の SPA は汚いため、パフォーマンスの問題が発生する可能性があると考えています)。チェックメカニズムはパフォーマンスに影響します)、Web 側では、一部の CRUD アプリケーションまたは管理ソフトウェアは引き続き使用できます (もちろん、ここでの理解は正確ではない可能性があります。詳細な研究を行って詳細を学び、使用していきます)。

UIの組み合わせについて

あらゆる製品の開発にはフロントエンド UI の使用が必要です。現在、多くの UI は jQuery に基づいています。つまり、angularjs とこれらの Ui コンポーネントを使用したい場合は、angularjs ディレクティブを使用して一部のコンポーネントを書き直す必要があります。このプロセスはさらに面倒です。幸いなことに、angular では使用できる UI コンポーネント (Web 側は主にブートストラップ フロントエンド コンポーネントと組み合わせられます)、

http://angular-ui.github.io が提供されています。 /、およびモバイル端末は主に ionic フレームワーク http://ionicframework.com/ と組み合わされますが、angular の開発に伴い、多くの HTML5 フロントエンド フレームワークは angularjs を徐々に統合してきました。使用するバージョン。

angularjs の機能について

1. データの双方向バインド: これが最も魅力的な機能です。ビュー レイヤーのデータとモデル レイヤーのデータは双方向にバインドされ、一方が変更されると、他方もそれに応じて変更されます。これにはコードを記述する必要はありません。 (jQueryでどうやるか考える)

2. コードのモジュール化。各モジュールのコードは独自のスコープ、モデル、コントローラーなどを独立して持ちます。

3. 強力なディレクティブにより、多くの関数を HTML タグ、属性、コメントなどにカプセル化でき、HTML の構造が大幅に美しくなり、読みやすさが向上します。

4. 依存関係の挿入。このバックエンド言語設計パターンはフロントエンド コードに与えられます。これは、フロントエンド コードが再利用性と柔軟性を向上させることができることを意味します。将来のモデルでは、クライアント上で多数の操作が実行される可能性があります。 、サーバーは他のクライアントが完了できないデータ ソースと操作のみを提供します。

5. テスト駆動開発、angularjs は最初からこれを目標としています。angular を使用して開発されたアプリケーションは、単体テストとエンドツーエンドのテストを簡単に実行でき、テストが難しい従来の JS コードの欠点を解決します。そして維持します

上記は、angularjs を一定期間学習した結果得られた結論です。一部省略されている部分があるかもしれませんが、問題はありません。次に、それらの一部を段階的に学習していきます。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。