Angular4スタイルガイド読む
Angular公式のStyle Guideから気になった箇所を抜粋したものです。
Style GuideとNgModulesについての公式ドキュメントを読んだら、実際のアプリを作るときの大枠がある程度整理できました。
ドキュメントはそれなりに長いですが、命名規則など、Angular CLIを利用して入れば特に意識しなくても実現できている箇所も多いです。
- Style Guide
Style Guide
Single responsibility
Consider limiting files to 400 lines of code.
Consider limiting to no more than 75 lines.
Naming
Coding conventions
Constants
Do declare variables with const if their values should not change during the application lifetime.
Interfaces
Do name an interface using upper camel case.
Consider naming an interface without an I prefix.
Consider using a class instead of an interface.
Application structure and Angular modules
All of the app’s code goes in a folder named
src
. All feature areas are in their own folder, with their own Angular module.All third party vendor scripts are stored in another folder and not in the
src
folder.
LIFT
Locate
Identify
Consider creating sub-folders when a folder reaches seven or more files.
T-DRY
Why? Being DRY is important, but not crucial if it sacrifices the other elements of LIFT. That’s why it’s called T-DRY.
Overall structural guidelines
https://angular.io/guide/styleguide#file-tree
Folders-by-feature structure
Do create an Angular module for each feature area.
Shared feature module
Avoid providing services in shared modules. Services are usually singletons that are provided once for the entire application or in a particular feature module.
Do import all modules required by the assets in the
SharedModule
; for example,CommonModule
andFormsModule
.Avoid specifying app-wide singleton providers in a
SharedModule
. Intentional singletons are OK. Take care.Why? A lazy loaded feature module that imports that shared module will make its own copy of the service and likely have undesireable results.
Core feature module
Consider collecting numerous, auxiliary, single-use classes inside a core module to simplify the apparent structure of a feature module.
Do gather application-wide, single use components in the CoreModule. Import it once (in the AppModule) when the app starts and never import it anywhere else. (e.g. NavComponent and SpinnerComponent).
Prevent re-import of the core module
Do guard against reimporting of CoreModule and fail fast by adding guard logic.
export function throwIfAlreadyLoaded(parentModule: any, moduleName: string) { if (parentModule) { throw new Error(`${moduleName} has already been loaded. Import Core modules in the AppModule only.`); } }
Components
Member sequence
Do place properties up top followed by methods.
Do place private members after public members, alphabetized.
Delegate complex component logic to services
Do limit logic in a component to only that required for the view. All other logic should be delegated to services.
/* avoid */ private hideSpinner() { // hide the spinner }
Directives
HostListener/HostBinding decorators versus host metadata
Consider preferring the @HostListener and @HostBinding to the host property of the @Directive and @Component decorators.
Services
Providing a service
Do provide services to the Angular injector at the top-most component where they will be shared.
Why? When providing the service to a top level component, that instance is shared and available to all child components of that top level component.