角度モジュールの依存関係の命名規則

Question

私はちょうどAngularJSの学習を始め、さまざまな角度の例を見る機会を得ました。私はangular.moduleの依存関係に関する質問があります。使用する依存関係の名前と、それらの依存関係をどこから（またはどのディレクトリに）射影するかを、どのように知ることができますか？彼らは9つの依存関係を使用している上記clientAppで

例えば

var clientApp = angular.module('clientApp', ['ui.bootstrap', 'hljs', 'common', 'smart-table', 
    'bootstrap.fileField', 'toaster', 'ngAnimate', 'angulartics', 'angulartics.google.analytics']); 

。私はui.bootstrap,hljsなどのような依存関係を注入するために使用される名前に混乱しています。これらの名前の標準的な規則はありますか？また、libフォルダから必要なモジュールをどのように角度で取り出しますか？これは私のディレクトリ構造です

+---js 
¦  appctrl.js 
+---lib 
    +---components 
     +---angular 
     ¦  angular.js 
     ¦  angular.min.js 
     +---angular-animate 
     ¦  angular-animate.js 
     ¦  angular-animate.min.js 
     +---angular-bootstrap 
     ¦  ui-bootstrap-tpls.js 
     ¦  ui-bootstrap-tpls.min.js 
     ¦  ui-bootstrap.js 
     ¦  ui-bootstrap.min.js 

クライアントアプリケーションはすべてのモジュールを確実に取得します。私はどのように指定せずにこれらのディレクトリにアクセスできるのだろうか。

Answer 1

モジュールの依存関係の注入は、コードによって異なります。コードの必要性に基づいて、1つまたは複数の依存関係が注入されます。角を使ってページ間をリダイレクトする場合は、 'ngRoute'が挿入されます。 'ngRoute'を注入する場合は、スクリプトヘッダに "angular-route.js"を指定する必要があります。別の例はngAnimateです。これは、アニメーションが必要な場合に使用されます。メニューが表示されたり消えたりすると、これはスムーズに移行させるために使用されます。 angular-animate.jsを追加する必要があります。

ui-bootstrapは、angleで開発されたブートストラップコンポーネントのリストです。次のURLにあるディレクティブのいずれかを使用する場合は、ui-bootstrapを注入します。 https://angular-ui.github.io/bootstrap/

トースターは3番目の部分ライブラリです。もう一つの一般的なものはグリッターです。

角度モジュールに注入できる数百のモジュールがあります。上で説明したように、コードで使用されているモジュールのみを注入します。関連するjsファイルをHTMLスクリプトセクションに追加する必要があります。 jsスクリプトを追加しないと、角度コードは注入を理解しません。

は、あなたがより詳細

Answer 2

あなたは同じようにあなたのclientApp角度モジュールであると命名されているモジュールに注入されている依存関係を期待していた場合、彼らはまた、角のモジュールであるため、私は、知らせてください。

あなたのケースでは、私は 'clientApp'をモジュールの依存関係配列に渡すことによってアプリケーションを要求することができます。

clientAppが必要とするファイルの断片については、アプリの構築方法によって異なります。あなたは、このようなようなImmediately Invoked Function Expressions AKA IIFEsであなたのJSのすべてをラップすることができます：

(angular.module(function() {}))()

その後、あなたは自分のindex.htmlで個別にあなたがする任意のJavaScriptファイルの道を各スクリプトを含める必要があります。それらの名前は、モジュールと同じ方法で大まかに宣言されます。例：

.service('sampleSvc', ['$window', 'modalSvc', function($window, modalSvc){})])

あなたIIFEsが実行され、これらの機能は、アプリのモジュールに登録され、その後、名前で呼び出すことができます。この場合、sampleSvc。

また、ビルドツールの世界に飛び込むこともできます...個人的には、NPMがすべてをやるのが好きで、ビルドサイクルの各段階で自分のシェルコマンドをすべて書きました。私はそれと一緒にブラウジングを好む。しかし、ちょうど始める人のために、あなたはgruntとgulpをチェックアウトしたいかもしれません。 （議論の余地のある意見時間：Gulpがより速い）

また、John Papa's Angular Styleguideを勉強することを勧めます。私が間違っていないなら、それは角のチームによって支持されました。より堅牢な例については、彼のng-demosもチェックしてください。