AngularJS 式の詳細な例

最近、クロスプラットフォーム (pcapppad) で遊べるものを作りたいと思っていて、多くのテクノロジーを勉強しました:

android、ios、H5、Bootrap、angular、angular2、ApiCloud、WeChat アプレット

Android の束縛を除くiOS 自体 (システム) などはクロスプラットフォームにできます。特に ApiCloud と WeChat アプレット開発 SDK レベルのソリューションは非常に人気がありますが、技術的主権の観点からは、他の人のものに依存しすぎており、

H5 とブートストラップは前後とも応答性に非常に優れており、エンドフレームは基本的に縮めることが可能です。

もちろん、vue.js などのフロントエンド フレームワークはたくさんあります。

理由はわかりませんが、現在 Angular に興味があります。興味は最も恥知らずな行動のアピールです。たとえば、あなたは美しい女の子に強い興味を持っています。 。 。 。 (~~~冗談です)

それなら、「彼女」に近づく方法を見つけなければなりません ~~

角ばった人に近づきたい~~

まずは情報収集から始めましょう:

彼女はどこにいますかから来る？

AngularJS[1] は 2009 年に誕生し、Misko Hevery らによって作成され、後に Google に買収されました。これは、多くの Google 製品で使用されている優れたフロントエンド JS フレームワークです。 AngularJS には多くの機能があり、その最も核となる機能は、MVC、モジュール化、自動双方向データ バインディング、セマンティック タグ、依存関係注入などです。

彼女の何がそんなに魅力的ですか？

AngularJS は、アプリケーションを構築する際の HTML の欠点を克服するように設計されています。 HTML は、擬似静的テキスト表示デザインには優れた宣言型言語ですが、WEB アプリケーションの構築には弱いです。

通常、動的アプリケーションの構築における静的 Web ページ テクノロジの欠点を解決するために、次のテクノロジを使用します:

クラス ライブラリ - クラス ライブラリは、WEB アプリケーションの作成に役立つ関数のコレクションです。制御するのはコードであり、ライブラリをいつ使用するかを決定するのはあなたです。クラス ライブラリには、jQuery などが含まれます。

フレームワーク - フレームワークは、すでに実装されている特別な WEB アプリケーションです。これに特定のビジネス ロジックを入力するだけで済みます。ここでのフレームワークは主導的な役割を果たし、特定のアプリケーション ロジックに従ってコードを呼び出します。フレームワークには、ノックアウト、スプラウトコアなどが含まれます。

------わかりました、魅力的ではありません

AngularJS は、開発者に高いレベルの抽象化を提供することでアプリケーション開発を簡素化します。他の抽象化手法と同様に、ある程度の柔軟性が失われます。言い換えれば、すべてのアプリケーションが AngularJS に適しているわけではありません。 AngularJS は主に CRUD アプリケーションの構築に関係します。幸いなことに、WEB アプリケーションの少なくとも 90% は CRUD アプリケーションです。ただし、AngularJS での構築に何が適しているかを理解するには、AngularJS での構築に何が適していないのかを理解する必要があります。

たとえば、ゲーム、グラフィカル インターフェイス エディター、頻繁で複雑な DOM 操作を行うアプリケーションは CRUD アプリケーションとは大きく異なり、AngularJS での構築には適していません。このような状況では、jQuery のような軽量でシンプルなテクノロジを使用する方が良いかもしれません。

------興奮していますか？

----------私たちのインターネットでの行動はすべて、ショッピング カート (+ -) に商品を追加したり削除したりするなど、データ ポイントを 1 つずつ CRUD しているだけであると言わざるを得ません。 、航空券の確認、チケットの確認、連絡を取っていない WeChat 友達の削除、注文----------

さらなる探索:

< 内;html> タグでは、ng-app を使用します。識別子は、これが AngularJS アプリケーションであることを示します。

この ng-app 識別子により、AngularJS はアプリケーションを自動的に初期化します。

<script> タグを使用して AngularJS スクリプトを読み込みます: </div> <div class="para"><script src="angular-1.1.0.min.js?1.1.11"></script>

同時に簡単なデータ検証も実行しました:

数量:Cost:

この入力ボックスのウィジェットは非常に普通に見えますが、次の点に注意すると特別なものになります:

ページがロードされると、AngularJS はウィジェットの宣言されたモデル名 (数量、コスト) は、同じ名前の変数を生成します。

これらの変数は、MVC 設計パターンの M (モデル) として考えることができます。

上記のウィジェットの入力には特別な機能があることに注意してください。

データを入力していない場合、または入力したデータが無効な場合、入力ボックスは自動的に赤色になります。入力ボックスのこの新機能により、開発者は CRUD アプリケーションに共通のフィールド検証機能を実装しやすくなります。

最後に、謎の二重中括弧 {{}} を見てみましょう:

合計:{{qty *cost |currency}} この {{expression}} タグは AngularJS のデータ バインディングです。式には、式とフィルターを組み合わせたものを使用できます ({{ 式 | フィルター }})。

AngularJS は、入力データと出力データをフォーマットするためのフィルターを提供します。

上記の例では、{{}} の式は、入力ボックスから取得したデータを乗算し、乗算結果を現地通貨スタイルにフォーマットしてページに出力するように AngularJS に指示します。

ここで言及しておきたいのは、AngularJS メソッドを呼び出したり、フレームワークを使用するような特定のロジックを書いたりしておらず、上記の関数を完了しただけであるということです。

この実装の背後にある理由は、動的 WEB アプリケーションのニーズを満たすことができるように、ブラウザーが静的ページを生成するために以前よりも多くの作業を行っているためです。

AngularJS は、クラス ライブラリやフレームワークが必要ない点まで、動的 WEB アプリケーションの開発の敷居を下げます。

Angular は、ビュー (UI) の構築とソフトウェア ロジックの作成を同時に行う場合、命令型コードは命令型コードよりもはるかに優れていると考えていますが、命令型コードはビジネス ロジックを表現するのに非常に適しています。

DOM 操作とアプリケーション ロジックを分離することは非常に良いアイデアであり、これによりコードの調整可能性が大幅に向上します。

テストと開発を同等に扱うことは非常に良いアイデアですが、テストは非常に困難です。大部分はコードの構造に依存します。

クライアントとサーバーを分離することは、両側での並行開発を可能にし、両方のコードを再利用できるようにするため、特に良い方法です。開発者は、UI の設計からビジネス ロジックの作成、テストに至るまで、開発プロセス全体でガイドされます。これは開発者にとって非常に役立ちます

「複雑さを単純化してゼロに単純化する」ことは常に良いことです。

AngularJS を使用すると、次の悪夢から解放されます

AngularJS 式

編集

AngularJS 式は、二重中括弧: {{ 式 }} 内に記述されます。 [2]

AngularJS 式はデータを HTML にバインドします。これは ng-bind ディレクティブに似ています。

AngularJS は、式が記述された場所にデータを「出力」します。

AngularJS 式は JavaScript 式によく似ており、リテラル、演算子、変数を含めることができます。

例 {{ 5 + 5 }} または {{ firstName + " " + lastName }}

私は最初に angular を知りました、次の約束を待っています~~~一緒に行きませんか~ ~~ V-V

以上がAngularJS 式の詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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