モジュールへの指示の分離AngularJS

-1

私の非常に重要な質問に誰かが答えます。 :)モジュールへの指示の分離AngularJS

私はangularjsで数ヶ月間、さまざまなプロジェクトに取り組んでいます。

私は、異なる構造、モジュール、ディレクティブでコードが故障するという問題があります。機能の多くが含まれているサイドメニュー - - 繰り返さ機能の多くは、とトップメニュー - リストやカードを搭載したボード、その移転の可能性

のは、私が持っているプロジェクト、を持っているとしましょう、 - カードをクリックすると、多くの機能を持つモーダルウィンドウが開きます。

恐ろしいことは、1つのコントローラと1つのコントローラですべて1つで、htmlテンプレートです。：D

そして私は、これらのものそれぞれに別々のコントローラーで別々の指令を作成すると思っていました。各ディレクティブがあります：

directiv

restrict : 'E', 
templateUrl, 
controller: function() {} 
controllerAs

私は別のモジュールにメニューディレクティブを分離するためにそうするのが良いと聞きました。

誰かが私に良い考えかどうか教えてもらえますか？もし誰かがそれをよく分け合う方法を教えてもらえますか？何のために？

ありがとうございます！

出典

2017-11-17 Aneta Jabłońska

「Angular 1 Style Guide」（https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md）を読んでみたいと思うかもしれません。これは、コード/プロジェクトの編成方法を決定する際に非常に役立ちます。 – lealceldeiro

はい私は誰かが私にこのファイルをどのように分離するか教えてくれれば分かります –

私はあなたのためにいくつかの提案があります別のセクションにあなたのhtmlをグループ化することによって

（あなたがAngularJSに< V1.5を使用している場合、またはディレクティブ）複数のコンポーネントにあなたのhtmlファイルを分割します。次のように各セクションのコンポーネントを作成します。
```
<body> 

    <top-menu></top-menu> 

    <sidebar></sidebar> 

    <board></board> 

</body> 
```
UIの主要なセクションをすぐに区別することがどれほど簡単であるかに注目してください。コンポーネントには豊富な機能が備わっているため、各コンポーネントをさらに細分化してサブコンポーネントにすることができます。例えば、topMenuのテンプレートは次のようになります。
```
<ul> 
    <a>Link 1</a> 
    <a>Link 2</a> 
    <a>Link 3</a> 
</ul> 

<search-bar></search-bar> 

<social-media></social-media> 

<chat-box></chat-box> 
```
追加の利点は、あなたが今searchBar、socialMedia、およびchatBoxアプリケーション全体で再利用できるということです。
あなたがtopMenu、sidebar、およびboardすべては豊富な機能を持っていることを、あなたは独自のモジュールにそれぞれの特徴を置くことによって、あなたのUIの主な特徴を整理することができます言及したので。 app.topMenuモジュール、app.sidebarモジュール、app.boardモジュールを持つことができます。あなたはそのようにのようなあなたのメインアプリモジュール内の依存関係としてこれらのモジュールを宣言：
```
angular.module("app", [ 

    // Module that contains shared modules 
    "app.common", 

    // Feature-specific modules 
    "app.topMenu", 
    "app.sidebar", 
    "app.board" 
]); 
```
次のことが可能になりましたtopMenuのプライベートサービスおよびコンポーネントのグループすべてapp.topMenuに。アプリケーション全体で共有されるコンポーネント/ディレクティブ/モジュール/サービスについては、それらをapp.commonモジュールに配置することができます。
再利用可能なロジックを、アプリケーション全体で再利用できるサービスに委託することで、コントローラをリーンにしておいてください。たとえば、コントローラでajax呼び出しを行っている場合は、そのロジックをAngularJSサービスに移動して、アプリケーションのさまざまな部分でもこれらのajax呼び出しを行うことができます。これは本当にコードをDRY（あなた自身を繰り返さないでください）とメンテナンス可能に保つのに役立ちます。あなたはジョン・パパのAngularJSスタイルガイドhereを参照してください、あなたのアプリケーションのさまざまな部分を構造化し、スタイルできる方法の詳細なリストについては

。

出典

2017-11-18 06:00:40

これは、app.commonとapp.sidebarの中のコンポーネントを保持することの違いですか？どこにコンポーネントがネストされているか独立しているので、私はどこでもアプリ内で呼び出すことができます。 –

モジュールへの指示の分離AngularJS

答えて

関連する問題