Skip to content

Latest commit

 

History

History
105 lines (94 loc) · 3.91 KB

README.md

File metadata and controls

105 lines (94 loc) · 3.91 KB

JS / TS notation

Category Notation
class / interface / type / enum / decorator / type parameters PascalCase
private / public / static fields camelCase
let / const variables camelCase
observable type variables / methods camelCase$
readonly fields _camelCase
enum values PascalCase
Method name camelCase
Method argument name camelCase

Angular objects notations

Category Code Notation File Notation
component PascalCase + Component kebab-case.component.spec|ts|html|scss
service PascalCase + Service kebab-case.service.ts
model PascalCase kebab-case.model.ts
module PascalCase + Module kebab-case.module.ts
pipe PascalCase + Pipe kebab-case.pipe.ts
directive PascalCase + Directive kebab-case.directive.ts

Angular coding standards

  • Methods handling dom events

    Add 'handle' prefix

    handleClick(event: Event): void {}
  • Methods passed to child components

    Add 'Callback' postfix

    @Input() loginCallback = (args: any): void
  • Code documentations: 
    /**
* description
* @param name description
* @returns description
*/
    Example: 
    /**
* This is the foo function
* @param bar This is the bar parameter
* @returns returns a string version of bar
*/
function foo(bar: number): string {
    return bar.toString()
}

Angular folder structure

Top level structure

├── app 
    ├── core 
        └── core.module.ts
    ├── shared 
        └── shared.module.ts
    ├── feature
    └── app.module.ts
└── README.md
Core module

The core module is designed for your singleton services shared throughout the application. We want to keep our singleton services in the core module so only one instance is ever created. Another piece of our application that should live in the Core Modules are app-level components. In general core module contains: root-scoped services, static components like the navbar and footer, interceptors, guard, constants, enums, utils, and universal models.

Shared module

The Shared Module is designed for everything that is shared throughout the application. In general shared module contains: components, directives, pipes and more. The Shared module can be imported into many feature models. It is also common to import and export Angular built modules (material, common...) inside your Shared Module if you need to access them in multiple locations.

Feature module

A feature module delivers a cohesive set of functionality focused on a specific application need. Feature modules helps to partition the application into focused areas. A feature module collaborates with the root module, shared module and with other modules through the services it provides and the components, directives, and pipes that it shares.

Example feature module:

├── feature
    └── auth
        ├── pages
            ├── login
                ├── login-form
                    └──  login-form.component.spec|ts|html|scss
                ├──  login.model.ts
                └── login.component.spec|ts|html|scss
            ├── register
                ├── register-form
                    └──  register-form.component.spec|ts|html|scss
                ├── register.model.ts
                └── register.component.spec|ts|html|scss
        ├── components
            ├── auth-box
            ├── auth-form
        ├── auth-guard.service.ts
        ├── auth-tokens.service.ts
        ├── auth-api.service.ts
        └── auth-routing.module.ts
        └── auth.module.ts