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 yourindex.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 © 2020 by SDA.
</footer>
If the ng serve
process is running in the console, the changes should automatically appear in the browser.