coaching

Angular 1 Typescript Guidelines

Introduction

This paper proposes the architecture of a frontend project that uses the following technologies:

  • Typescript
  • Angular 1.*
  • Testing (Mocka)
  • Less/Sass

Typescript guidelines

We follow the excelmicro/typescript style guides that are based on the Airbnb JavaScript Style Guide.

File structure

app
├── sections
│   ├── search
│   │   ├── search.ts
│   │   ├── search-controller.ts
│   │   ├── search.html
│   │   ├── search.less
│   │   ├── search_test.ts
├── components
│   ├── performance-chart
│   │   ├── performance-chart.ts
│   │   ├── performance-chart-directive.ts
│   │   ├── performance-chart.html
│   │   ├── performance-chart.less
│   │   ├── performance-chart_test.ts
│   ├── ├── services
│   │   ├── ├── api-service.ts
│   │   ├── ├── services.ts
├── assets
├── app.ts
├── index.mustache
dist
less
typings
doc

Sections

It is very close to an entire page content. Section divides logically the main pages of the application. Section always set a basic url for the page content.

Components

A component is usually a mixture of the following:

  • Angular Directive, name-directive.ts
  • Angular module registration, name.ts
  • Angular Html template, name.html
  • Less only for the current Html, name.less
  • Module testing, , name_test.ts
  • Potentially helping assets like modpna, additionally logic functionality etc.

Services

A service is a mixture of the following:

  • Angular module registration, name.ts
  • The functionality of service, name-service.ts

A service could potentially consist of a business logic segment or an API communication module.

Less

Component less

Less code inside a component/section will only stylesheet the corresponding component and will namespace the stylesheet by the component name.

//performance-chart.less

(projectNameΑcronym)-performance-chart {
    width: 1px;

    span {
        height: 2px;
    }
}

Global less

Less code that is placed in the less folder will stylesheet the entire application. We can spite the global less folder on 3 parts.

scope.less

scope.less includes all the .less files from the services and components.

fonts.less

fonts.less should include the fonts less files from third party providers, like fontawesome and configure the information like the fonts location

@fa-font-path: "assets/fonts/";
app.less

includes the fonts.less. scope.less and the basic framework that we use, like bootstrap.

Code Styles

Namespaces

Namespaces should be prefixed by the project name acronyms (let’s say pna) and the name format should follow the file structure.

app.ts: pna
services/api-provider-service.ts: pna.services.apiProviderService
components/my-component.ts: pna.components.myComponent

Classes

Class names should begin with Capital letter. Class members should declared first. The ordering of private/public members/methods of each class is depicted from the tslinter that we use.

//services/api-provider.ts

namespace pna.services.apiProvider {

    class ApiProvider {
        greeting: string;

        constructor(message: string) {
            this.greeting = message;
        }

        greet(): string {
            return "Hello, " + this.greeting;
        }
    }

}

Typescript annotations for angular component registration

We take advantage of the typescript annotations in order to register an Angular component (service, directive, filter, config)

Service


@service('module.name', 'componentName') class LsApi { }

The @service annotation registered a factory on the module module.name with the name componentName. During the registration we also prefix the componentName with the pna.

Directive


@component('module.name', 'componentName', { templateUrl: 'components/performance-chart/performance-chart.html', ... set values to default parameters }) class componentClass { }

The @component annotation registers a directive on the module module.name with the name componentName. During the registration we also prefix the componentName with the pna.

Component Annotation Default Parameters

directive name: pnaComponentClass
controller: ComponentClass
controller as: componentClassCtrl
bindToController: true
restrict: ‘E’

Conrtoller


@controller('module.name', 'componentName') class ResultsController { }

The @controller annotation registers a directive on the module module.name with the name componentName. During the registration we also prefix the componentName with the pna.

Config


@config('module.name') class ConfigClass { }

The @config annotation registers a config on the module module.name.

IDE

You are free to use any IDE/text editor. We recommend the sublime 3 editor with some additional packages.

About the author: John Apostolidis

Frontend developer

Leave a Reply

Your email address will not be published.