他のアプリケーションと同様に、アプリケーションの開始点であるエントリポイントが必要です。 頻繁に、私はアプリだけを使用します。 main.jsを呼び出すと便利なこのファイルに、次のコードを記述します。
(function(ng) { var app = ng.app('app', []); // This should be your configuration like a routeProvider or etc. return app; })(angular);
また、依存関係の注入により、このモジュールには将来的に他のモジュールが含まれます。
何が始まったか、アプリケーションの構造を決定することは悪くないでしょう。 アプリケーションの特定のエンティティを定義します。 フォルダーを作成します：アニメーション、コントローラー、工場、ディレクティブ。 実際、Javaパッケージで使用されるアプローチを定式化します。
そのため、作成した各ディレクトリには、エントリポイント（main.jsとも呼ばれる）も含める必要があります。 たとえば、コントローラのあるディレクトリを考えます。 main.jsで、次のコードを記述します。
(function(ng) { var app = ng.app('app.controllers', []); return app; })(angular);
ご覧のとおり、このモジュールはコントローラーの実装を担当します。これを以下で宣言します。 また、メインモジュールに応じてこのモジュールを有効にできます。
(function(ng) { var app = ng.app('app', ['app.controllers']); // This should be your configuration like a routeProvider or etc. return app; })(angular);
次に、アプリケーションの使用方法を示すために、アプリケーションのコントローラーをいくつか説明します。 コントローラの名前には、特定の規則があります。つまり、クラスとしてのラクダケーススタイルです。 コントローラディレクトリMainCtrl.jsにファイルを作成しましょう。このファイルには、コントローラロジックが含まれています。 その内容は次のようになります。
(function(ng) { var app = ng.app('app.controllers.MainCtrl', []); var MainCtrl = function($scope) { var localScope = { message: 'Message', list: [1,2,3,4,5,6] }; ng.extend($scope, localScope); }; app.controller('MainCtrl', ['$scope', MainCtrl]); return app; })(angular);
このアプローチに生命の権利がある理由を見てみましょう。 前と同様に、メインコントローラーモジュールに応じて組み込まれるモジュールを発表しました。 コントローラコード自体は独立した機能です。 その後、コントローラーとして組み込まれ、コントローラー宣言の完全な記録が使用されるため、最小化および難読化後に壊れることはありません。 ご覧のとおり、ローカル変数がlocalScopeとしてコントローラーに作成されます。 なぜこれが行われるのですか？ $スコープ内の変数の数が少ない場合、これは特に顕著ではありませんが、それらが多数ある場合、コードは少し読みにくくなるため、angularjs extendメソッドを介してメインのスコープを拡張する手法をとりました。 私にとっては、この方法は美しく、簡潔で、かなり読みやすいです。 また、コントローラーをコントローラーのメインモジュールの依存関係に追加します。 コードは次のようになります。
(function(ng) { var app = ng.app('app.controllers', ['app.controllers.MainCtrl']); return app; })(angular);
この原則に基づいて、ディレクティブ、ファクトリーなどの他の依存関係を構築します。 私にとっては、このアプローチはアプリケーションの完全な理解をもたらし、その構造はすぐに表示され、アップグレードが非常に簡単になり、新しいコントローラー、サービス、ディレクティブなどが追加されます。
結論として、コントローラーについて、または新しい「as」構文について少しお話したいと思います。
変数または一部の関数を観測可能にしたくない場合。 次に、このアプローチを完全に使用できます。
(function(ng) { var app = ng.app('app.controllers.MainCtrl', []); var MainCtrl = function($scope, $log) { var localScope = { message: 'Message', list: [1,2,3,4,5,6] }; this.nonObservableVar = { one: 1, two: 2 }; this.logger = function(obj) { $log.info(obj); }; ng.extend($scope, localScope); }; app.controller('MainCtrl', ['$scope', '$log', MainCtrl]); return app; })(angular);
そして、私たちの見解では、このコードを使用します：
<div ng-controller="MainCtrl as main"> <div ng-click="main.logger('Test for a one value')">{{ main.nonObservableVar.one }}</div> <div ng-click="main.logger('Test for a two value')">{{ main.nonObservableVar.two }}</div> </div>
これにより何が得られますか？ さて、利点の1つは、角張ったウォッチャーがいないことです。 これによりアプリケーションが高速化され、ネストされたコントローラーで親コントローラーのコンテキストを使用できるようになり、アプリケーションをより柔軟に構築できるようになります。 この方法は非常に使いやすいです。 前と同様に、コントローラー変数を$スコープ変数と組み合わせて、$ watch、$ applyなどを使用することもできます。
興味があれば、私は角度について、そしてその上に美しく構造化されたアプリケーションを構築する方法について書き続けます。 requirejsでanglejsを使用することとrequirejsパッケージの素晴らしい機能についての記事を書くという点で。
コメントにフィードバックを残してください。
PS：私はこの投稿を書いて、将来あなたのアプリケーションを簡単に維持できるようにし、あなたのアプリケーションを修正する人が何をどのように持っているかを理解できるようにします=）