0

I am creating an Angular project. While I have other projects in Angular, I want to build a structure with some better ideas. I came across these articles: 5 Tips & Best Practices to Organize your Angular Project & Angular project structure best practice.

My query is what is the purpose of CoreModule? Why should I create a CoreModule, when I can directly put the related code in my AppModule (since AppModule is the only module to import CoreModule & the code isn't much).

Also any other suggestions for good practice are welcome.

Ali Nm
  • 21
  • 8
  • The CoreModule practice is good when you have a large codebase with multiple sophisticated features and intend maybe to use that as a base for other transversal projects,. On the other hand (which seems to be your case), if you are SURE 100% that the codebase requirements are static and wont grow, there is really no need for that – wiwi Jan 31 '22 at 11:20

2 Answers2

0

Well, CoreModule contains all stuff that is required by our application to run. CoreModule usually contains basic layout like header/footer/nav and all the core singleton services like auth which will be used throughout the whole application.

The reason why we create modules like CoreModule is to keep to application clean, maintainable and scalable in the long run.

Dividing application into modules also improves application performance.

If all functionality is written in AppModule, when our application grows it becomes slow and difficult to maintain.

here is link to few articles for best practices: https://medium.com/search?q=angular%20best%20practices

Yousaf
  • 85
  • 1
  • 6
0

I am Using the following Architecture and Best Practices if any one find it useful here is the Link

ANGULAR ARCHETECTURE

ANGULAR BEST PRACTICIES

  1. Follows SOLID / OOP
  2. Follows Files and Folder Structure
  3. Use Services rather than base Classes (But Both are mandatory)
  4. Components Constructor Only Use for Service Injection
  5. Don't Write Huge Lines of Code in OnInit
  6. Use Rapper Component for External Libraries
  7. Constructor & OnInit will available at top of every Component
  8. Avoid Services Depends on Other Services
  9. If Components Exceed 200 To 300 Lines of Code Split it into Multiple Files
  10. Make Component for all Controls (Text, Dropdown, Auto Complete, Radio, Checkbox, Button etc...)
  11. Group Several Related Properties into Object
  12. Instead of Using Several Arguments pass Object
  13. Use Default Properties Where possible
  14. Only Global Loader Use to Display Request in Progress
  15. Avoid using Third Party Libraries that Cause Update Problem

FOLDER AND FILES STRUCTURE

CORE MODULE

    • Most Common Files as per Folder those Required at Application Level

Class

  1. Class Builders
  2. Abstract Classes
  3. Angular Service Injector
  4. Local Service Injector
  5. Form Base Class
  6. List Base Class
  7. Methods Base Class

Models

  1. Reusable Forms & Interface Side by Side

Services

  1. Form Helper Service
  2. Base Service
  3. Helper Service
  4. Form Service
  5. Validator Service
  6. Http Service
  7. State Service
  8. Swal Service
  9. Theme Services
    • SideBar
    • Header

Interface

  1. ServerMultipleResponse
  2. ServerSingleResponse
  3. ValidatorParamInterface
  4. HttpParamInterface

Constants

  • Pure Functions

Static Class

  • Group of Functions

Enums

  1. Permission
  2. Action
  3. Endpoints

SHARED MODULE

Modules

  1. AngularzModule
  2. MatzModule
  3. OtherModules
  4. RootModule

Components Module (Controls Component)

  1. Dialog Module (Dialog Boxs)
    • Confirmation
    • Success
  1. Controls
    • Text
    • Dropdown
    • AutoComplete
    • Table
    • Utils

Pipes

    • DateTime
    • Currency

Partial

    • Content Projection

Decorator

Directive

    • Permission
    • Form Control
    • Has

Guards / Resolver

    • DisRegard
    • IsUser
    • hasRole

Interceptors

    • AccessToken
    • Auth
    • Loader

THEME MODULE

  1. Sidebar (Left, Rigth, Top, Bottom)
  2. Headers
  3. Footer
  4. MasterComponent

AUTH MODULE

  1. Sign In
  2. Sign Up
  3. Forget Password
  4. Rest Password
  5. etc..

FEATURE ROUTING MODULE

  1. Error (401, 404, 500)
  2. Admin
  3. Customer
  4. Product etc...

SASS ARCHETECTURE

  • Keep all the Files and Folder into Assets/SASS
  • All Reusable Components CSS Should Resides in SASS
  • Following is the Archetecture
  1. abstracts/
  • _variables.scss
  • _functions.scss
  • _mixins.scss
  • _placeholders.scss
  1. base/
  • _reset.scss # Reset/normalize
  • _typography.scss # Typography rules
  1. components/
  • _buttons.scss # Buttons
  • _carousel.scss # Carousel
  • _dropdown.scss # Dropdown
  1. layout/
  • _navigation.scss
  • _grid.scss
  • _header.scss
  1. themes/
  • _theme.scss # Default theme
  • _admin.scss # Admin theme
  1. vendors/
  • _bootstrap.scss # Bootstrap
  • _jquery-ui.scss # jQuery UI
Muhammad Ahsan Saifi
  • 3
  • 5