How does an xml file that represents a view map to an HTML page in axelor app?

Question

I am a beginner and need some insights on how does a axelor app work?

Here is the link to the documentation https://docs.axelor.com/adk/5.2/dev-guide/web-client/index.html

The documentation does not explain how the models and the views defined with xml render the application's view. Also, there are not many examples/ sample apps that demonstrate the functionalities.

Suppose this is the xml for a simple form:

<!-- editor for a computed field -->
<field name="fullName">
  <editor>
    <field name="title" />
    <field name="firstName" />
    <field name="lastName" />
  </editor>
</field>

<!-- editor for a many-to-one field -->
<field name="customer">
  <editor x-viewer="true">
    <field name="firstName" />
    <field name="lastName" />
    <field name="email" />
  </editor>
</field>

<!-- editor for a one-to-many field -->
<field name="emails">
  <editor layout="table" onNew="compute-default-email">
    <field name="email" />
    <field name="primary" widget="toggle" x-icon="fa-star-o" x-icon-active="fa-star" x-exclusive="true" />
    <field name="optOut" widget="toggle" x-icon="fa-ban" />
    <field name="invalid" widget="toggle" x-icon="fa-exclamation-circle" />
  </editor>
</field>

How does axelor render this view with HTML?

I have actually been assigned a task for my internship at a company and I need to understand the docs and make changes through the xml model to the view. But when I try and change or delete the xml code that resembles the view of the HTML page on the browser, nothing happens. My task is to add some buttons and functionalities to it and render the changes on the web page.

Anyone with experience working with Axelor and AngularJS (Becase axelor uses AngularJS and Java as well), please explain how things are working in it the way they work.

(I was trying to tag axelor but there is no such thing in stackoverflow)