Angular / Project Structure
The following documentation is a brief overview of the typical project structure of an Angular application. Most files are created by default when setting up a new project as described in the New Project section.
Angular projects are organized to utilize the MVC (Model View Controller) structure.
- Data - Model
- Template - View
- Components - Controller.
To learn more about these concepts see Overview.
Angular is designed to integrate separate components to create the application.
There is always a main component, app.component.ts that the application should be built around.
Sample Project Structure
A project structure might resemble the following, which demonstrates a single app component with several sub-components that may also contain further sub-components. The organization is similar to other languages where the path indicates the hierarchy of components.
...
├── node-modules/
├── src/
| ├── component01/
| | ├── sub-component/
| | ├── component01.component.css
| | ├── component01.component.html
| | ├── component01.component.spec.ts
| | ├── component01.component.ts
| ├── component02/
| ├── ...
| ├── app-routing.module.ts
| ├── app.component.css
| ├── app.component.html
| ├── app.component.ts
| ├── app.modules.ts
| ├── ...
...
Component Files
Component Class File
Each component will contain at least a single component class file with a .ts extension.
This file can be thought of as the "controller", meaning that it contains the necessary code to read in data,
manipulate this data if needed, and pass it to the template where it is rendered to the user.
Angular supports other files that may act as controller's but the typescript
file containing the component class is where much of this code lives.
Template File
The template file is an HTML file containing basic HTML integrated with Angular templating syntax that allows developers to integrate logic, functionality, and interpolation binding. The template file is the "view" in the MVC structure. The template takes data passed from the component file and renders it in a UI for users to view in a convenient manner, whatever that may be. To learn about template syntax see Angular Templates.
Stylesheet
Each component directory includes its own .css stylesheet.
By keeping styles separate Angular is able to encapsulate these styles for each component,
which prevents styles from overriding other data.
If two components share the same class or id name,
they will not conflict because Angular knows how to keep this data for each individual component.
Testing File
When generating a component using the Angular CLI
ng generate component
a .spec.ts file is created, which is used in the Angular testing framework.
Other files may be included with a single component, including services, modules, and additional components, but the above are the basics to each component.
Next Steps
Once familiar with the general structure of an Angular project, It is recommend to get started on development.
The rest of the documentation is devoted to further detailing how to develop an Angular application in relation for each of the files described above.