Appointy Style Guide for Angular

Naming Guidelines

• All files are named in lower-hyphen-case

• Component and directive files should be prefixed with module name and end with .component before file extension marketing-gift-certificate-list.component.ts marketing-gift-certificate-list.component.html

  datepicker.directive.ts

• Module files end with .module before file extension app.module.ts

• Service files end with .service before file extension marketing.service.ts

• Selectors are named in lower-hyphen-case

• Components, Services are named in PascalCase

• Variables are named in camelCase

• Functions are named in camelCase

• Dependency Injected variables are named in camelCase prefixed with underscore(_)

  private _http: Http;
  private _dealService: DealService;

Directory Structure

Directory structure should be like this

├── app
│   ├── app.component.css
│   ├── app.component.html
│   ├── app.component.spec.ts
│   ├── app.component.ts
│   ├── app.module.ts
│   ├── app.routing.ts
│   ├── core-module
│   │   ├── components
│   │   │   ├── core-left-menu
│   │   │   │   ├── core-left-menu.component.html
│   │   │   │   └── core-left-menu.component.ts
│   │   │   ├── core-right-sidebar
│   │   │   │   ├── core-right-sidebar.component.html
│   │   │   │   └── core-right-sidebar.component.ts
│   │   │   └── index.ts
│   │   ├── core-app.component.html
│   │   ├── core-app.component.ts
│   │   ├── core-module.ts
│   │   ├── core.routing.ts
│   │   ├── layouts
│   │   │   ├── core-main-layout.component.html
│   │   │   ├── core-main-layout.component.ts
│   │   │   └── index.ts
│   │   └── shared
│   │       └── service.ts
│   ├── help-module
│   │   ├── help-app.component.html
│   │   ├── help-app.component.ts
│   │   ├── help-module.ts
│   │   └── help.routing.ts
│   ├── languages
│   │   ├── app-strings-hindi.mock.ts
│   │   └── app-strings.mock.ts
│   ├── models
│   │   ├── app-state.ts
│   │   ├── deal.ts
│   │   ├── enums
│   │   │   ├── block-type.ts
│   │   │   ├── booked-by.ts
│   │   │   ├── value-type.ts
│   │   │   └── weekdayEnum.ts
│   │   ├── gift-certificate.ts
│   │   ├── index.ts
│   │   ├── postal.ts
│   │   └── staff.ts
│   ├── services
│   │   ├── app-strings.service.ts
│   │   ├── appointment-feed.service.ts
│   │   └── index.ts
│   ├── settings-module
│   └── store
│       ├── actions
│       │   ├── gift-certificate.actions.ts
│       │   ├── index.ts
│       │   └── postal-code.actions.ts
│       └── reducers
│           ├── gift-certificate.reducer.ts
│           ├── index.ts
│           └── postal-code.reducer.ts
├── index.html
├── main.ts
├── polyfills.ts
└── vendor.ts

App Module is the root module and app folder contains all the Child modules, Common Services, Models&Enums, language strings and Store(Actions&Reducers).

Store

All Reducers along with child modules are imported in the App Module. The reducer variable is in camelCase

imports: [
        StoreModule.provideStore({
            postalCodeList: PostalCodeReducer,
            dealList: DealReducer,
            giftCertificatePurchaseItemList: GiftCertificatePurchaseItemReducer,
            giftCertificateList:GiftCertificateReducer,
        }),
        CoreModule,
        SettingsModule,
        MarketingModule,
        NotificationsModule
    ]

Child Modules

Child modules contain all the relevant components, routes and services For example the directory structure for Marketing Module is

├── components
│   ├── index.ts
│   ├── marketing-gift-certificate-components
│   │   ├── marketing-gift-certificate-add-edit.component.html
│   │   ├── marketing-gift-certificate-add-edit.component.ts
│   │   ├── marketing-gift-certificate.component.html
│   │   └── marketing-gift-certificate.component.ts
│   └── marketing-gift-certificate-purchase-components
│       ├── marketing-gift-certificate-list.component.html
│       ├── marketing-gift-certificate-list.component.ts
│       ├── marketing-gift-certificate-purchase-edit.component.html
│       ├── marketing-gift-certificate-purchase-edit.component.ts
├── marketing.component.html
├── marketing.component.ts
├── marketing.module.ts
└── services
    ├── gift-certificate-purchase.service.ts
    ├── gift-certificate.service.ts
    └── index.ts

Components

All components are written in components folder and they should all be exported from index.ts index.ts should look like this.

export * from './marketing-gift-certificate-purchase-components/marketing-gift-certificate-purchase.component';
export * from './marketing-gift-certificate-purchase-components/marketing-gift-certificate-purchase-list.component';

export * from './marketing-gift-certificate-components/marketing-gift-certificate-add-edit.component';
export * from './marketing-gift-certificate-components/marketing-gift-certificate.component'

Services

In the same way services are written in services folder and they should all be exported from index.ts

Language

Strings for different language are in language folder and service for language is in services folder in app directory. AppStringsService is like this

import { Injectable } from '@angular/core';
import { APP_STRINGS } from '../marketing-module/languages/app-strings.mock';

@Injectable()
export class AppStringsService { 
    public static MarketingStrings = APP_STRINGS.Marketing; // These static variables should be 										imported into components wherever needed
}