あらゆる種類の道徳的基準と原則を超える最もわいせつで不快な行動は、通常、「なぜですか？」という言葉で始まります。
この投稿では、AngularJSでのアプリケーションの設計、哲学、そのアーキテクチャ、アセンブリの問題に対処し、さまざまな便利なライブラリと既製のアーキテクチャテンプレートについて説明します。 最後に、Angular + Require.js + Grunt + Yeomanの小さな乱交パーティーを配置します。これは、 Angular-Super-Seedまたは少し控えめなASSジェネレーターと呼ばれます。
それでは、Angularでアプリケーションを作成する予定があるのであれば、なぜですか？
やる気
- 「あなたが扱われたいように人々を扱ってください。」 突然誰かが重宝します
- 自分自身と開発の両方について、コメントで新しいことを学んでください。
- アプリジェネレーターASSを宣伝します。
Angularアプリケーションの構成要素は何ですか？
Angularアプリケーションがサービス、コントローラー、ディレクティブ、およびテンプレートで構成されていない場合はどうですか？
そうです、Angularアプリケーションはモジュールとモジュールのみで構成されています。
Smartass、モジュールは何で構成されていますか？
ただし、モジュールはすでにサービス、コントローラー、ディレクティブ、サービス、プロバイダー、テンプレートで構成されています。
サービス
サービスは、そのアプリケーションの点でおそらく最も単純なコンポーネントです。 それは何のためですか？ ほとんどの場合、サービスはMVC理論のモデルとして、つまりデータを操作するために使用されます。 たとえば、Cookieまたはローカルストレージにデータを保存するためのユーザーサービス$ userを作成できます。 または$ apiサービス-ライブラリ$ httpのラッパー。サーバーAPIと対話します。 ただし、サービスは、バックグラウンドで実行されるプロセスであり、オブジェクトのライブラリだけであり、コードのさまざまな場所で使用する予定の関数です。
... .factory("$user",function($rootScope, $someLocalStorageService){ var user={ id:null, name:null, isAuthorized:false } if($someLocalStorageService.load("user"))angular.extend(user,$someLocalStorageService.load("user")); $rootScope.$watchCollection(function(){ return user; },function(user){ $someLocalStorageService.save("user",user); }); return user; });
この例では、サービスはモデルとバックグラウンドプロセスの両方であり、オブジェクトの変更を監視し、ローカルストレージにすぐに保存します。
ここで、これらのサービスを使用できる場所について少し説明します。
コントローラー
コントローラー内。 コントローラを呼び出す方法から抽象化し、本質に目を向けます。 そして、彼らの本質は、サービスの仕事を結びつけるのが簡単です。 そしてこれだけで、ほとんどの場合、コントローラーはディスプレイ（/レイアウト/ DOM / HTML）をデータとリンクするように見えます。 そして原則として、元々そうでした。 以前は、コントローラーでこれを使用して、テンプレートで使用されているデータにアクセスできました。
... .controller("SomeCtrl",function(){ this.var=" "; }); ... <p> {{var}}</p>
しかし、店はすぐに覆い隠され、今では、このデータにアクセスするには、特別な$ scopeサービスが必要です。 したがって、 「コントローラーは、サービス間の相互作用を実装するために使用される構造コンポーネントです 。 」
私が生徒と一緒に試験を受ける教師であれば、私はこれ以上言うことはなかっただろう。 しかし、真実に直面した場合、99.99％のケースで、UIをデータ処理ロジックに接続するためにコントローラーが正確に使用されます。
指令
ただし、バインド方法については、これらのレイアウト付きの同じデータがディレクティブを担当します。 AngularでのDOMの操作はディレクティブでのみ行う必要があるという事実については、多くの言葉が言われているため、「-そしてjQueryをコントローラーで呼び出すことができます」という質問が表示されたら、「-はい、もちろん」と答え、満足が去り始め、静かに頭の後ろを撃ちます。
指令の楽しみは何ですか？ ロジックとデータをUI要素に簡単にバインドできること。 原則として、自分でそのような目標を設定すると、セレクターなどの用語を完全に忘れることができます。
ディレクティブとは何ですか？ DOM要素にアタッチされたもの。 どのように縛ら？ タグとして、タグ属性として、タグクラスとして。
私の意見では、これがAngulaの本質です。 ルーティング、データバインディング、フレームワーク-これらはすべて、異なるフレームワークのAngulaの前にすでにありました。 しかし、UIの設計のこのようなコンパクトさとシンプルさに出会ったことはありません。
ビルドの問題
なぜ必要なのですか？ そのため、本番環境でページをロードするとき、プロジェクトファイルをダウンロードするための接続は数百ではなく、理想的には1つです。 開発中は、追加したファイルをペンで登録する必要はありませんでした。
大規模なプロジェクトとチームで長い間、それは自己記述ツールを使用して解決されましたが、現在、このためのGrunt / Gulpプラグインがあります。 そして、いくつかの側面があります。 これらのプラグインの本質は、すべてのスクリプト/スタイルが1つに縫い付けられていることです。 そのため、これらのファイルを縫う方法、ルール/依存関係などを規定する場所が必要です。 ファイル自体のコードでこれを行うのは不便です 。つまり、追加のパッケージファイルを作成する必要があります 。 しかし、それだけではありません。 明らかに、このステッチは、プロジェクトを編集した後、結果をテストするときに発生するはずです。 そして、適切なコマンドを呼び出してハンドルで更新するか、いわゆるウォッチャー（すべてのファイルとビルドを監視するスクリプト）にする2つのオプションがあります。 原則として、このオプションは悪くありませんが、大規模なプロジェクトで作業している場合、予想されるパフォーマンスの問題が発生する可能性があります。
したがって、私は個人的にRequire.jsのサポーターです。 なんで？ まず、依存関係はコードで記述されます。2つ目は、ブラウザー自体の開発時に必要なすべてのファイルがロードされ、ステッチングは不要です。縮小しました。
したがって、アセンブリの問題は、誰もが自分で決定するか、それが必要かどうか、そしてどのツールを使用するかということです。 この問題を解決する上で重要な役割を果たすのは、アーキテクチャです。
建築について
ここで、アプリケーションがモジュールで構成されていることを思い出します。 したがって、アプリケーションのアーキテクチャを計画するときは、アプリケーションの構成モジュール数を把握する必要があります。 サイトの各ページに個別のモジュールを持たせるには、1つのモジュールのみで構成できます。 何に依存していますか？ まず、小さなアプリケーションでもモジュールに分割したいという要望から。 第二に、アプリケーションのサイズについて。 より明確にするために、ここに条件があります。
(boolean) = (boolean) || (boolean)
さて、アプリケーションをどのようにテストするかは重要ではありません。 コントローラー、サービス、ディレクティブに対して個別にテストを実行する場合、「App.controllers」、「App.services」、「App.directives」などの個別のモジュールにテストを配置する必要があることは明らかです。
しかし、アーキテクチャに関しては、他の人がどのようにそれを行うかを見るのは常に素晴らしいことです。
NGBP
LGBTの人々は、あなたのプロジェクトが多くのモジュールで構成されると考えています。 アプリケーションには、ルーティングやその他の初期設定を記述するメインモジュールがあり、残りのロジックはコンポーネント間で分散されます 。
何があなたの目を引きますか？ すべてのコントローラー、サービス、ディレクティブなどを1つのモジュールファイルに記述する必要があること。 私は個人的には単純さの支持者ですが、私の意見でさえ、これはすでに多すぎるでしょう。 私の意見では、これがこのテンプレートの主な欠点です。
角の種
私の意見では、中小規模のアプリケーションに最適です。 プロジェクトは正式には複数のモジュールで構成されていますが、これはコントローラー、サービス、およびディレクティブが一緒になった場合に当てはまるため、アーキテクチャーの観点からは、モジュールは1つだけであると想定できます。
利点は明らかです-すべてがシンプルで明確でコンパクトです。 短所も-大規模なチームで大規模なプロジェクトを行っている場合は、すべてに加えて、アプリケーションのアセンブリと縮小化が提供されないため、cr屈になります。
角度必須シード
角シードが好きで、requireを使用したい場合は、を使用してください。 長所と短所は、Angular-seedと同じです。 require.jsを使用すると、プロジェクトをコンパイルしやすくなる可能性がありますが、これはrequire-optimizerを使用する場合です
角スーパーシード
アプリケーションのアーキテクチャ、不足しているもの、コミュニティに提供するその他のトピックについて考えて、 この結果に至りました。
機能とは何ですか？ プロジェクトをモジュールに分割することも、メインのモジュールだけに制限することもできます。 コントローラー、サービス、およびディレクティブの保管に関しては、さらに詳しく説明しました。 それらはすべて別々のファイルに保存されます。 さらに、ディレクティブごとに個別のテンプレートと個別のスタイルシートが作成されます。
コンポーネントモジュールも、別のファイルで定義および説明されます。
このアプローチの明らかな欠点は、新しいコントローラー/サービス/ディレクティブをそれぞれ作成するときに、それらを宣言するために一連のルーチン操作を実行する必要があることです。 つまり、新しいディレクティブを作成する必要があります。ディレクティブファイル、テンプレートファイル、スタイルファイルを作成します。 致命的ではありませんが、うんざりする可能性があります。 そして、ここでYO ASSと言います！
ヨマン
ヨーマンのウェブサイトに初めてアクセスしたとき、サービスの機能に感謝していませんでした。 さて、特定のテンプレートに従って個別のファイルを作成できますか。 さて、これはエディターで構成できるものです。
しかし、個別のファイルを作成するだけでなく、他の操作を実行するのが良いという事実を考えたとき、同志の職長を見ました。
そのような発電機が判明した結果として。
ヨマン入れます
npm install -g yo
発電機を置きます
npm install -g generator-ass
バズとは何ですか？ 次のようにコンソールでできること：
yo ass
そして、新しいアプリケーションがフォルダーに表示されます。 それでは、もっと。
yo ass:page main
ページ、スタイルシート、コントローラー用の新しいテンプレートを自動的に作成し、すべてルーターにプラグインします
モジュールを作成する
yo ass:module first
モジュールの準備が完了し 、すでにターンキーが提供されています。
そして、その中にディレクティブを作成しましょう
yo ass:module firstDirective
どのモジュールですべてが問題ないかという質問に答えます。
テストとmoqがまだ十分ではないとすぐに言わなければなりません。 すべてがあります。
それだけです。誰かが役に立つといいのですが。 どうして？