Skip to main content

Platform practices

The following explains the practices to follow when working on the platform

Data-flow in your application

Components

  • Components consume and manipulate data to provide a desired output
  • Components do not make any API calls, but gets it form a Service
  • Components are re-usable

Services

  • Services provide components with data
  • Services can communicate with the API
  • Services allow for the sharing of data across multiple components
  • Services store data that is used by more than one component
  • Services should be broken up into logical groupings (common, page-level)

Implementing Services

First step is to generate the new service

ng g s my-service --project my-project --dry-run

By default, a service is registered in the root of the entire project, thus meaning that it is accessible by all modules. This could become a mess in large SPA's, thus we are going to limit the scope of our service to the module (project) boundaries.

To do this, we need to lazy load our services with our lazy loaded module. Create a new module that will lazy load our services.

ng g m services --project my-project --dry-run

leave the created service module as is.

Import the created service module in your main module.ts, in the imports array.

Now in all of your services, change the providedIn section as follows:

import {ServicesModule} from "./services.module";

@Injectable({
  providedIn: ServicesModule
})
  • Import the service module in the service
  • Replace the "root" with the service module name

Now the service can be accessed in a component:

constructor(private _ms: MyService){}

Directory Management

  • The main-component is in /app directory
  • All child components live inside the main-component
  • Child components can have sub-child components
  • Services are all in one services directory
  • Additional modules such as the routing module is in their own directory

The following example illiterates how to structure your project directory

└── apps
    └── my-app
        └── src
            └── app
                └── parent-component
                    ├── parent.component.html
                    ├── parent.component.scss
                    ├── parent.component.spec.ts
                    ├── parent.component.ts
                    ├── child-1.component <-- Child component directories
                    └── child-2.component <-- Child component directories
                        └── child-3.component <-- Child component directories
                └── services
                    ├── services.module.ts
                    ├── common.service.ts
                    └── common.service.spec.ts
                └── app-routing
                    ├── app-routing.module.spec.ts
                    └── app-routing.module.ts
                ├── app.component.html
                ├── app.component.scss
                ├── app.component.spec.ts
                ├── app.component.ts
                └── app.module.ts

Commit messages

structure of your commit message

  • app_name
  • action (add,remove,update,fix)
  • ticket_number (optional)
  • description

for example:

platform #add JRA111 new pb-client payment service

For more information about angular best practices: https://angular.io/guide/styleguide#general-naming-guidelines