#2: 🅰 Angular kicks in

Before we start to develop our app, let's look at the project and how Angular gets in the picture. Open the todo-list folder in your IDE if you haven't done so already so we can inspect the files. All the relevant files at this stage exist inside the src folder. Read more about the files generated by the Angular CLI in Appendix 4: Generating a new project.

If you're really eager to start coding, you can skip this chapter and come back to it later to understand the project structure.

Open the file index.html. The content that is rendered in the browser's window is everything you see inside the <body> element. All you can see there now is another, non-HTML element: <app-root></app-root>. This element is actually an Angular Component, defined in the file app/app.component.ts with the class named AppComponent. (We'll take a look at it in the next chapter).

Angular can be defined in many ways. One of them is JavaScript code which runs when the application is presented in the browser. All the code you will write - components, directives, services, etc. are recognized by Angular. Angular will perform actions accordingly. For example, components you will write and use will compile to JavaScript functions. These functions insert the component content into the DOM (Document Object Model) - the representation of the page structure in the computer's memory, which the browser uses to show the application. That's how you'll see the component you created on the screen.

So <app-root> is not an HTML element, it is an Angular Component. When the application is ready, the content of the component is inserted inside the <app-root> tag, and you will see it in the browser:

Angular applications' main building block is the Angular component. Every component can use other components in its template. We have one root component that starts the whole structure. So we actually get a tree structure of the components that build our application. In this case, the root component is AppComponent (with the selector app-root). We saw it used in index.html as the only component inside the <body>.

How does Angular know that the AppComponent is the root component? This is defined in the file main.ts in the last lines:

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

We bootstrap our root AppComponent to a renderer. This way we tell Angular what component to use as the starting point of our application. And we also choose a renderer: platformBrowserDynamic. It knows how to take our code and add the relevant data (elements, attributes, etc.) to the browser's DOM.

If there's an error, it is caught and logged in the browser's console (seen only when the browser's dev-tools are open).

We can use a different renderer at this point, for example one that renders to Android or iOS native elements! We just need a renderer that knows how to take our templates (which use HTML notations) and JavaScript code, and create native mobile application elements. An example to such a renderer is NativeScript by Telerik.

There are even renderers to Arduino, with which you can connect sensors, buttons, LEDs and other hardware to your application! You can see a great example for this here: Building Simon with Angular2-IoT.

We've seen how we tell Angular where and how to start its work, how we state the root component, and how we use it.

In the next chapter we'll see how a component is defined in Angular.

Previousa. StackBlitz instructions Next#3: 📐 Component

Last updated 4 months ago