This Angular Tutorial will cover the Angular Application Structure. At its core, any Angular application is a Single Page Application (SPA) and its loading is triggered by a main request to the server.
When we get access to any URL in the browser, the first request is made to our server (which is running using 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 and our application code and templates.
Note that when we develop our Angular application in TypeScript, the web application works with transpiled JavaScript.
The ng serve is the responsible command for translating our TypeScript code into JavaScript for the browser to load.
Angular Application Structure
If you look at the Angular application structure that has generated by the CLI, it is something like this:
+----e2e
+----src
+----app
+----app.component.css
+----app.component.html
+----app.component.spec.ts
+----app.component.ts ---------> ( Root component )
+----app.module.ts ---------> ( Main module )
+----assets
+----environments
+----index.html ---------> ( Root HTML )
+----main.ts ---------> ( Entry point )
+----.angular-cli.json ---------> ( Angular CLI config )
There are more files than listed here in the Angular Application Structure, but these are the major ones we are going to focus on in this part of the tutorial.
In addition, there are unit tests, end-to-end (e2e) tests, the assets that support our Angular application, specific configuration to various environments (dev, prod, etc.), and other general configuration that we will see them later in our Angular Course.
Root HTML : index.html
If you look at the index.html file, which is in the src folder, you will see that it looks very clean and pristine, with no references to any scripts or dependencies:
<!doctype html> <html lang="en">
<head>
<meta charset="utf-8">
<title> XperTuto Project Title</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root> ---> ( Root component for our Angular Application )
</body>
</html>
The only thing to note in the HTML code is the <app-root> element , which is the marker for loading our Angular application code.
Now what about the part that loads the core Angular scripts and the code of our Angular application ?
That part is inserted dynamically at runtime when we type the ng serve command, which combines all the vendor libraries, the styles, our application code and inline templates each into individual bundles and injects them into index.html to be loaded as soon as the page renders in the browser.
Angular Application Structure : What is the Entry Point
We have seen in the first part the structure of the index.html file, which is responsible for deciding which files are to be loaded.
Now we will see the second important part of our bootstrapping process, we talk about the main.ts file.
Unlike index.html , the main.ts file identifies exactly which Angular module is to be loaded when the application starts.
In this file, we can also change application level configuration (like turning off framework level asserts and verifications using the enableProdMode() flag), which we will cover in the next Angular tutorials very soon.
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule) ----> (1)
.catch(err => console.log(err));
(1) Bootstrap the main AppModule
The most of the code that you are seeing in the main.ts file is generic, and you will rarely have to change or touch this entry point file.
the purpose of the main.ts file is to point the Angular framework at the core module ( called main module also ) of your Angular application and let it trigger the rest of your project source code from that point.
Main Module: app.module.ts
This is where your Angular application specific source code starts from.
The module file can be thought of as the core configuration of your Application, from loading all the necessary dependencies, declaring which components will be used within your Angular application, to marking which is the main entry point component of your application:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({ ---> (1)
declarations: [ ---> (2)
AppComponent
],
imports: [ ---> (3)
BrowserModule
],
providers: [], ---> (4)
bootstrap: [AppComponent] ---> (5)
})
export class AppModule { }
(1) NgModule : is a TypeScript annotation used to mark the class definition as an Angular module.
(2) Declarations : is an array containing a list of components and directives that can be used within the application.
(3) Imports : used to import other modules that provide functionality needed in the application.
(4) Providers : Used to provide our Services (we will talk about it later with more details).
(5) Bootstrap: Contains the entry point component for starting the Angular application.
Root Component: AppComponent
Now we get finally the Angular code that drives the functionality of the Angular application, and in this case, It is the main component we have, the AppComponent .
The code for it looks something like this:
import { Component } from '@angular/core';
@Component({
selector: 'app-root', ---> (1)
templateUrl: './app.component.html', ---> (2)
styleUrls: ['./app.component.css'] ---> (3)
})
export class AppComponent { ---> (4)
title = 'XperTuto.com';
}
(1) app-selector :
is a simple selector like any other CSS selector, used that identifies how Angular finds this component in any HTML page. While we generally use element selectors ( app-root in the example), they could be any CSS selector, from a CSS class to an attribute as well.
(2) templateUrl :
The templateUrl is the path to the HTML file used to render our component.
In the example we have specified the path of the HTML file ( app.component.html in our case ) , we could also use the inline templates by putting all the content of the HTML file in the component itself ( not recommended ! )
(3) styleUrls :
styleUrls used to add styles to the template and encapsulate all the styles for this component.
We don’t have to worry about our CSS classes from one component affecting another because Angular ensures that the styles are encapsulated.
Unlike templateUrl , styleUrls accept an Array.
(4) AppComponent :
AppComponent is an Angular component and is nothing but a TypeScript class, decorated with some attributes and metadata.
The AppComponent class encapsulates all the data and functionality of our component ( like any other class ), while the decorator specifies how it translates into the HTML.