# 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 an**index.ts**file. 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 called**angular-cli**to, 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 new*components*. To avoid naming collisions between your components and third-party components you may include in the project, we will be prefixing our component selectors with**cf**(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 is**app-my-new-component**. You need to change\_app\_to\_cf*. This will result in the proper selector format for the library**cf-my-new-component**.