Project Structure

The project is broken down into three main file categories (examples provided below each category):

• Component

import { Component } from '@angular/core'

@Component({
    selector: 'app-my-component',
    templateUrl: './my-component.component.html',
    styleUrls: ['./my-component.component.scss'],
})
export class MyComponent { }

• Service

import { Injectable } from '@angular/core'
import { Http } from '@angular/http'

@Injectable()
export class MyService {
    constructor(
        private http: Http,
    ) { }
}

• Model

export class MyModel {
    constructor(
        public id = 0,
        public firstName = '',
        public lastName = '',
    ) { }
}

At a high level, the libraries file structure will be set up with these three main file categories in mind. There will be a folder for each category where all files of that type will live.

- src
    - app
        - components
        - services
        - models

The services and models folders will largely be flat file structures underneath. However, if you include tests with a service or model then they need to be grouped together in a subfolder with the corresponding service or model.

FLAT

- src
    - app
        - services
            my-service-without-tests.service.ts


WITH TESTS

- src
    - app
        - services
            - my-service-with-tests
                my-service-with-tests.service.ts
                my-service-with-tests.service.spec.ts

The nature of Angular 2's components require that several files be grouped together under a subfolder.

- src
    - app
        - components
            - my-component-one
                my-component-one.component.ts
                my-component-one.component.html
                my-component-one.component.scss
                my-component-one.component.spec.ts
            - my-component-two
                my-component-two.component.ts
                my-component-two.component.html
                my-component-two.component.scss
                my-component-two.component.spec.ts

In order to facilitate easier importing of components, services and models in other parts of the library (the main app module, for example), each category folder will contain anindex.tsfile. This file will simply_import_the entire contents of the folder it lives in and then_export_them as a group for easier consumption later on. Examples:

• a services folder

- src
    - app
        - services
            service-one.service.ts
            service-two.service.ts
            service-three.service.ts
            service-four.service.ts
            index.ts

• it's corresponding

  index.ts

  file

export * from './service-one.service';
export * from './service-two.service';
export * from './service-three.service';
export * from './service-four.service';

• how the

  index.ts

  file is used later to simplify importing

import {
    ServiceOne,
    ServiceTwo,
    ServiceThree,
    ServiceFour,
} from './services';

The Angular team has provided a set of command line tools calledangular-clito, among other things, help you generate new components, services and models in a way that follows the standards outlined above. In order to maintain a strict and consistent style of organization throughout the project, you _must _use this tool to generate your new files. Provided are examples of how to generate each of these file types and the result of each command.

• Component

cd src/app/components
ng g component my-new-component

- src
    - app
        - components
            - my-new-component
                my-new-component.component.ts
                my-new-component.component.html
                my-new-component.component.scss
                my-new-component.component.spec.ts

• Service

cd src/app/services
mkdir my-new-service
cd my-new-service
ng g service my-new-service

- src
    - app
        - services
            - my-new-service
                my-new-component.service.ts
                my-new-component.service.spec.ts

• Model

cd src/app/models
ng g class my-new-model

- src
    - app
        - models
            my-new-model.ts

One final thing to keep in mind is that, although this tool is an excellent resource for helping to follow best practices and consistent organizational style, it does not handle one key detail when creating newcomponents. To avoid naming collisions between your components and third-party components you may include in the project, we will be prefixing our component selectors withcf(Cedrus Fusion). If you run the above commands for generating a component and open the.component.ts_file that is generated, you will see that the component selector isapp-my-new-component. You need to change_app_to_cf. This will result in the proper selector format for the librarycf-my-new-component.