Skip to content

Project structure

The expected state of the application after completing the "Installation" section: get code

Basic directories

Created project by Angular CLI includes, among others the following folders:

  • e2e - configuration files related to the execution of unit tests.
  • node_modules - downloaded NPM packages according to the configuration.
  • src - application source code.
  • app - files related to the project, such as components, templates, services, etc.
  • assets - any static files such as images or style sheets.
  • environments - files related to the configuration of the project environment.

Basic files

src/index.html

As Angular applications are usually SPA * (Single Page Application) *, they are all loaded in one file - src/index.html. Upon opening this file, you will notice that this is fairly standard HTML, except for two Angular-specific elements:

  • <base href ="/"> - tag needed for proper routing to work.
  • <app-root> </app-root> - main Angular component.

src/app/app.module.ts

This file contains information that is often needed during development. The most important part is the metadata inside the @ NgModule decorator. There are declarations, imports, providers and bootstraps.

  • declarations: components, directives and pipes.
  • imports: routings and modules.
  • bootstrap: list of components that we want to load when starting the application. In our case, it is AppComponent.

src/app/app.component.ts

AppComponent looks a bit like an application module, but instead of @ NgModule we have the@ Component decorator. Again, the most important part is the value of these * (metadata) * attributes.

  • selector: component name. Remember the <app-root> in your index.html file? This is where it is defined.
  • templateUrl: path to the HTML template file. <app-root> will be replaced with whatever you have in the template.
  • styleUrls: path to the CSS file. The style sheet will only affect this component, i.e. it will not penetrate into other parts of the application.

In the AppComponent class you can define variables (e.g. title) that are used in templates.

src/app/app.component.html

View, which is a graphic representation of the AppComponent component. Let's remove the code in app.component.html and replace all the content with the following code:

<header class="container">
  <h1>
    {{ title }}
  </h1>
</header>

<main class="container">

</main>

<footer class="container">
  Copyright &copy; 2020 by SDA.
</footer>

If the ng serve process is running in the console, the changes should automatically appear in the browser.