Angular - 1.5 Edit first application part 1

In this lesson, we open the Angular application generated previously inside an IDE such as WebStorm or Visual Studio Code, and we explore how the framework structures a project. On the left-hand panel we see many files and folders that may look overwhelming at first sight, but most of them are configuration files (angular.json, package.json, tsconfig, etc.) that we rarely have to touch. package.json lists the dependencies installed through npm, and you may sometimes pin a specific version, but otherwise these files are left as-is.

The folders that matter

  • node_modules: dependencies installed via npm, generated automatically.
  • e2e: end-to-end tests.
  • src: the folder where we will actually work, containing app, assets and environments.

We restart the development server with ng serve and open the application in the browser. The home page displays a stylish background, images and buttons, yet when we open the source of index.html we only find a body containing <app-root></app-root>. This is the heart of a single-page application: Angular dynamically replaces this root tag with the component tree at runtime through JavaScript.

Inside src/app we find the files that compose the App component: app.component.css, app.component.html, app.component.ts and a spec file generated by the Angular CLI. The HTML file is where the welcome content lives. To experiment, we locate the toolbar block and replace the <span> text "Welcome" with "Bienvenue". As soon as we save the file, the browser refreshes automatically thanks to the file watcher that monitors the project. Note that if you are on a different Angular version, the default welcome page may look different - simply pick any HTML element and edit it.

Finally, at the bottom of the template we notice a strange piece of syntax with double curly braces surrounding the word title. It does not look like plain HTML, and we will discover its meaning in the next video.

Summary

This lesson introduces the structure of an Angular application by exploring the files and folders generated by the Angular CLI. The instructor examines the key directories (src, app, assets, environments), explains the purpose of configuration files like package.json, and demonstrates how Angular modifies the DOM dynamically using a single HTML page to create a Single Page Application (SPA). The lesson sets the foundation for understanding how Angular components are displayed and how the framework works before making modifications to the application.

Key points

  • Angular projects are created with a predefined folder structure that includes configuration files, dependencies, and a src directory where development occurs
  • The src directory contains the app component folder where most development work happens, alongside assets and environment configuration directories
  • Angular is a Single Page Application (SPA) framework that uses JavaScript to dynamically modify the DOM, displaying different components on a single index.html page
  • The app-root element in index.html serves as the portal between the HTML page and Angular components
  • Package.json manages project dependencies installed via npm, and while it can be modified, configuration files are generally left untouched by developers
  • IDE choice for development is flexible—the instructor uses The Wave Storm but recommends free alternatives like Visual Studio Code which is popular among developers

FAQ

Why does the Angular application page look styled with buttons and images when the HTML source only shows basic tags?

This happens because Angular is a Single Page Application framework that uses JavaScript to dynamically modify the DOM at runtime. The actual styled content and components are rendered by Angular JavaScript, not written directly in the HTML file.

Which files in the Angular project structure should developers typically modify and which should be left alone?

Developers should primarily work within the src directory, particularly the app component folder where components are created. Configuration files like package.json and various conf files should rarely be modified. The node_modules directory is automatically generated and not edited manually.

What is the significance of the app-root element in the index.html file?

The app-root element serves as the entry point or portal between the basic HTML page and the Angular application. It acts as a placeholder where Angular injects components dynamically to display the application interface.