> For the complete documentation index, see [llms.txt](https://cedrus.gitbook.io/project-fusion/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cedrus.gitbook.io/project-fusion/project-structure.md). # 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**. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://cedrus.gitbook.io/project-fusion/project-structure.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.