11

私はAngularに慣れていないので、ご容赦ください。先日、アプリでモジュールを構造化するための最良の方法を強調した記事/ドキュメントを読んでいましたが、それは大まかにしか覚えていません。

App.controllers
App.services
....

angular.module('App', [App.controllers, App.services ...);

このコードサンプルは正しくない可能性が非常に高いですが、要点は、コントローラー、サービスなどを1つの名前空間にグループ化することでした。

誰かがこのアプローチを拡張できますか？

4

4 に答える 4

16

このアプローチはAngular Seedによって提供されており、アプリの構造を整理する方法の 1 つにすぎません。これはデバッグに役立ちます。あるサービスにバグが見つかった場合は、そのサービスにアクセスしservices.jsてキャッチします。

Brain Ford は、彼の記事Building Huuuuuuge Apps with AngularJS で次のように書いています。

残っている唯一の問題は、コントローラー、ディレクティブ、サービス、およびフィルターをモジュールに分割する方法です。Angular Seedはフィルター、サービス、およびディレクティブを個別のモジュールに配置しますが、それは少しばかげているように思えます。アプリによっては、ページ/ルートごとにモジュールを整理する傾向があります。パフォーマンスの観点からは、モジュールをどのように編成するかは重要ではないため、プロジェクトに最も適した方法を選択してください。

彼はまた、各ディレクティブまたはサービスが 1 つの個別のファイルである、別のアプリ構造も提案しています (上記の記事を参照)。

于 2013-01-31T09:06:30.390 に答える
12

John Pappa の AngularJS Style Guideから。これは、より大きなアプリの「Angular 標準構造」になりつつあります。

Folders-by-Feature 構造:表す機能にちなんで名付けられたフォルダーを作成します。フォルダーに 7 個以上のファイルが含まれるようになったら、それらのファイル用のフォルダーを作成することを検討してください。しきい値は異なる場合があるため、必要に応じて調整してください。

なぜ ?: 開発者はコードを見つけ、各ファイルが何を表しているかを一目で識別できます。構造は可能な限りフラットであり、重複する名前や冗長な名前はありません。

なぜ ?: LIFT ガイドラインはすべてカバーされています。

なぜ ?: コンテンツを整理し、LIFT ガイドラインに沿ったものにすることで、アプリが乱雑になるのを防ぐのに役立ちます。

なぜ ?: 多数のファイル (10 以上) がある場合、ファイルの場所を特定することは、一貫したフォルダー構造では簡単ですが、フラットな構造ではより困難になります。

/**
 * recommended
 */

app/
    app.module.js
    app.config.js
    app.routes.js
    components/       
        calendar.directive.js  
        calendar.directive.html  
        user-profile.directive.js  
        user-profile.directive.html  
    layout/
        shell.html      
        shell.controller.js
        topnav.html      
        topnav.controller.js       
    people/
        attendees.html
        attendees.controller.js  
        speakers.html
        speakers.controller.js
        speaker-detail.html
        speaker-detail.controller.js
    services/       
        data.service.js  
        localstorage.service.js
        logger.service.js   
        spinner.service.js
    sessions/
        sessions.html      
        sessions.controller.js
        session-detail.html
        session-detail.controller.js
于 2014-10-23T21:14:37.403 に答える
1

このフォルダー構造により、全体的な機能を理解してグループ化することで、Angular をスケーリングし、すべてのファイルをすばやく見つけることができます。

 /app
    /features    
           /product   #one folder per entity
               /get-products component
               /create-product component
               /update-product component
               /delete-product component
               /state #ngrx state
                  /actions
                  /effects
                  /reducers
                  /selector
                  index
    /models 
           auth
           user
           product
           # additional.model.ts 

    /services
           backend service
           api service
           auth service
           firebase service
           auth-guard service
           # additional.service.ts
    /store
          /actions
          /effects
          /reducers
          app-store
          index
    /utilities
          router.animation
          customAngularMaterial module
          uuid
          validator
          pipe
          directive
          # additional utilities
    /views
          /admin component
          /auth  component
          /header component
          /footer component
          /navbar  component
          /profiles  component
          /home  component
          /contactus  component
          #additional views
    app-routing.module
    app.component
    app.module
  /assets
      /css      #custom styles.css
      /icons    #svg files
      /favicon.ico
      /images
      #additional assets
main
index     #material icons
styles    #angular material prebuilt theme
于 2019-08-04T23:48:12.887 に答える