Basics of an Angular Application

At its core, any Angular application is still a Single-Page Application (SPA), and thus its
loading is triggered by a main request to the server. When we open any URL in our browser,
the very first request is made to our server (which is running within ng serve in this case).
This initial request is satisfied by an HTML page, which then loads the necessary JavaScript
files to load both Angular as well as our application code and templates.

One thing to note is that although we develop our Angular application in TypeScript, the web
application works with transpiled JavaScript. The ng serve command is responsible for
translating our TypeScript code into JavaScript for the browser to load.

If we look at the structure the Angular CLI has generated, it is something like this:

1 Root component

2 Main module

3 Root HTML

4 Entry point

5 Angular CLI config

Root HTML—index.html
If you take a look at the index.html file, which is in the src folder, you will notice that it looks
very clean and pristine, with no references to any scripts or dependencies:

1 Root component for our Angular application

The only thing of note in the preceding code is the <app-root> element in the HTML, which
is the marker for loading our application code.

The Entry Point—main.ts

The second important part of our bootstrapping piece is the main.ts file. The index.html file is

responsible for deciding which files are to be loaded. The main.ts file, on the other hand,
identifies which Angular module is to be loaded when the application starts. It can also
change application-level configuration (like turning off framework-level asserts and
verifications using the enableProdMode() flag).
Main Module—app.module.ts

This is where your application-specific source code starts from. The application module file
can be thought of as the core configuration of your application, from loading all the relevant
and necessary dependencies, declaring which components will be used within your
application, to marking which is the main entry point component of your application:

1 NgModule TypeScript annotation to mark this class definition as an Angular module

2 Declarations marking out which components and directives can be used within the application

3 Importing other modules that provide functionality needed in the application

4 The entry point component for starting the application.

Root Component—AppComponent
We finally get to the actual Angular code that drives the functionality of the application, and
in this case, it is the main (and only) component we have, the AppComponent. The code for it
looks something like this:
1 The DOM selector that gets translated into an instance of this component

2 The HTML template backing this component—in this case, the URL to it

3 Any component-specific styling, again pointing to a separate file in this case

4 The component class with its own members and functions

A component in Angular is nothing but a TypeScript class, decorated with some attributes
and metadata. The class encapsulates all the data and functionality of the component, while
the decorator specifies how it translates into the HTML.

The app-selector is a CSS selector that identifies how Angular finds this particular
component in any HTML page. While we generally use element selectors (app-root in the
preceding example, which translates to looking for <app-root> elements in the HTML), they
can be any CSS selector, from a CSS class to an attribute as well.

The templateUrl is the path to the HTML used to render this component. We can also use
inline templates instead of specifying a templateUrl like we have done in the example. In this
particular case, the template we are referring to is app.component.html.

styleUrls is the styling counterpart to the template, encapsulating all the styles for this
component. Angular ensures that the styles are encapsulated, so you don’t have to worry
about your CSS classes from one component affecting another. Unlike templateUrl, styleUrls
is an array.

The component class itself finally encapsulates all the functionality backing your
component. It makes it easy to think of the responsibilities of the component class as twofold:

Load and hold all the data necessary for rendering the component

Handle and process any events that may arise from any element in the component

The data in the class will drive what can be displayed as part of the component. So let’s take
a look at what the template for this component looks like:
<h1>

{{title}}

</h1>

Data-bound title from the component

Our HTML is as simple as can be for the component. All it has is one element, which is data-
bound to a field in our component class. The double-curly ({{ }}) syntax is an indication to
Angular to replace the value between the braces with the value of the variable from the
corresponding class.