Angular 6 Style guide quick reference - Rugved/angular6-StyleGuide-referencelist GitHub Wiki

Please refer to official guide for full explanation https://angular.io/guide/styleguide#style-guide

General

  1. All files service/components should have single responsibility principle (SRP)
  2. Limit 400 lines code per file
  3. Define small function limit lines to 75

Naming (Files & Symbol)

  1. Name files based on “description”.”type”.”extension” i.e. sample.type.ts
  2. Use conventional types when creating files i.e. service.ts, component.ts
  3. Upper camel case for class name i.e. AppModule

Export class AppModule { … } App.component.ts

  1. Put bootstrapping and platform logic in main.ts
  2. Put “–“ for component selector i.e. selector: ‘main-button’
  3. Use lower case and prefix component selector i.e. for button inside sample component selector:sample-button
  4. Prefix and have camel case for directive name i.e. selector:[sampleValues]
  5. Provide lowercase names i.e. ‘sorting’
  6. Name the files with component.spec.ts i.e. sample.component.spec.ts
  7. Provide feature name.module.ts naming convention i.e. sample.module.ts
  8. Class name should be in upper camel case i.e. SampleModule {}
  9. Provide routing module with –routing name. i.e. sample-routing.module.ts

Coding Convention

  1. Use Upper camel case for class name i.e. SampleModule
  2. Use Lower camel case for const i.e. export const appUrl = “”
  3. Use Upper camel case for interface i.e. ISample
  4. Use Lower camel case for properties and method names i.e. message:string, btnclick()
  5. Leave one-line space between thirdparty and app imports

App structure

  1. Organize code in LIFT style = Locate, Identify, flat, tdry (try to be dry (don’t repeat yourself)
  2. Locating code should be simple & fast
  3. Identifying folder, files etc should be easy
  4. Keep folder structure as flat as possible. Consider sub older after 7 files (psychologist believe human mind start to struggle once number of adjacent interesting things exceed nine)
  5. T-dry is try to don’t repeat yourself. Avoid duplicate code
  6. Create folder as per feature area, this will cover LIFT methodology
  7. Create ngModule for each feature for lazy loading
  8. Keep app module as root app module

- Shared Module

  1. Create sharedmodule in shared folder
  2. Keep pipe, declarative in shared module to reference in the app
  3. Consider not keeping services in shared module as they are singleton and should be in core
  4. Lazy loaded shared module will have its own copy of component, keeping service inside there will have undesired result

- Core Module

  1. Keep single use classes and services inside core module
  2. Import coremodule only inside app module as application wide module.
  3. Put guard so that other modules can’t import core module
  4. Never import lazy loaded module directly in another module

Component

  1. Use @input @output as property decorates instead of input and output
  2. Give component selector name not attribute
  3. Move style and html into their own file when code exceed more than 3 lines
  4. Keep properties on top of the methods
  5. Keep complicated logic inside services not inside component
  6. Keep logic of presentation inside the component, not inside html i.e. avoid this a * b
  7. Use directive to enhance element logic

Services

  1. Use services as singleton within same injector.
  2. Use them to share data and functionality
  3. Provide service with @Injectable attribute in app root.
  4. Always interact with server through service
  5. Use life cycle hooks and interface to tap into import events provided by angular

Coding helper

  1. Use codelyzer for guideline and quick code generation as per this style
  2. Use angular 6 code snippet in vscode
⚠️ **GitHub.com Fallback** ⚠️