[MUSIC]
We just created our first Angular application in the previous exercise.
You must be wondering, what does a typical Angular application look like?
What is its structure and architecture, and
how do we build an Angular application?
Let's talk about these things step by step, beginning with this lecture.
Taking a quick look at the application folder, in a editor.
You notice immediately that the Angular CLI has created a whole bunch of
files in various folders in our application.
What do these files contain?
How do they constitute an Angular application?
Let's examine them step by step to understand the typical architecture of
an Angular application.
As we have already realized,
Angular applications are built as a combination
of HTML and either TypeScript or JavaScript.
In this course we're going to be using TypeScript as the language of choice for
building our Angular application.
Angular itself consists of several libraries,
some of them called libraries and others are optional libraries.
Depending on kind of an Angular application that you're trying to build,
you will include some of these into your application.
As we've already learned, Angular is a JavaScript framework and
we'll leverage that to build our application.
To summarize, Angular application is modular in its nature and will consist of
several components, together with their templates, that comprise the application.
Not only that, these components, and other parts of the Angular application,
like services, will be organized into modules.
And these modules, in turn, will be used by higher level modules.
So you can look at an Angular application being a modular
architecture with a root module at the top,
which takes the help of other modules organized into your modeling hierarchy.
Let's examine our application to understand how this is created.
Before we proceed, the root module by default
in Angular is typically named the app module.
Going to our code, let's begin our journey and index.html.
So in this index.html file, you can see that we have the typical html code here,
together with this particular line which says app-root.
You immediately recognize them this doesn't look like a typical HTML tag.
So let's begin by asking ourselves the question, what does this stand for, and
why is that included in the index.html page?
As we already saw, a typical Angular application
is a hierarchy of modules with a root module.
Your Angular application is bootstrapped by bootstrapping the root module
to start your application.
So how do we bootstrap an Angular application?
We already saw the index.html page, and you saw an element there called app-root.
So let's ask ourselves a few more questions.
A companion to the index.html page is the main.ts file.
If you open that file you will see that it contains a set
of import statements in TypeScript, as written here.
Let's not delve too much into the details, but
I will come back to explain this in a short while.
But in particular,
let me draw your attention to this particular line in the main.ts file.
Which says platformBrowserDynamic().bootstrapModule
and then note the parameter here, which says (AppModule).
So as I mentioned, earlier the app module is the typical
name given to the root module in an Angular application.
If you look at the file hierarchy,
you already see a file there called app_module.ts.
We're going to visit that file in a short while to see what it contains.
Now, coming back to these imports,
you can see that let's take the example of the first import here.
It says import enableProdMode from '@angular/core'.
So what this specifies is that we will import this particular
module from the Angular core library.
And similarly, you see the second one saying import platformBrowserDynamic
from '@angular/platform-browser-dynamic'.
So from this library you are importing this module into place.
Now, the platformBrowserDynamic module enables you to bootstrap
your Angular application by taking your root module as a parameter.
Obviously there are many other files in this folder and the sub-folders there.
Let's not concern ourselves too much about them at the moment.
We will learn about some of them as we go along in this course.
Now, Angular CLI helps create this hierarchy of folders and
files, with the necessary settings for
you to be able to bootstrap your angular application and get started.
Doing this by hand is a bit of a tedious task.
So, the Angular CLI simplifies the preparation
of the folder for your Angular application.
So again, going to the app_module.ts file.
As I mentioned, this is the root module for your Angular application.
Now typically, the root module would be named as app.module file,
but that is only a suggested name in Angular.
You will see that many of the files that constitute an Angular application,
there are suggested ways of naming those files.
As we go through the course we will learn specifically about each one of these
files.
So taking a look into at the contents of app_module.ts,
inside there you see a set of import statements there.
Taking a quick look at them it says import { BrowserModule } from
'@angular-platform-browser'.
Import { NgModule } from '@angular/core'.
And NgModule is an angular module.
We'll learn a little more about it a short while later.
In addition, you see another import statement here,
that says import { AppComponent } from './app.component'.
And taking a look at the files here,
you already see an app.component.tsfileware, and
then several other files here, including an app.component card.html,
an app.component.acss, and other files.
Now, this statement specifies that this root module will include this component,
and will form the root compliment of your Angular application.
A typical Angular application, as we saw, consists of a number of
modules with the root module as the primary module,
which helps you to bootstrap your Angular application.
The root module is an Angular module with a feature, or is a class.
So this is where you see the use of a TypeScript class here,
so if you go down into the red module down below here you will see
this statement called export class AppModule.
TypeScript adds classes to your typical JavaScript code.
If you are familiar with only ES-5 JavaScript,
then classes have not yet been introduced there, but
the newer versions of JavaScript will introduce support for classes.
TypeScript also has support for classes.
So if you have experience with object oriented programming,
you're already familiar with classes.
So that kind of approach is being brought into JavaScript with the introduction
of classes in TypeScript and future versions of JavaScript.
In addition you'll notice that this class has
an Ngmodule decorator associated with that.
So a decorator is, again, a function of
that modifies JavaScript classes.
We'll see the use of decorators in many places in our Angular application.
This is an Ngmodule.
The decorator of that enables you to specify some details about this
app module.
So this decorator function takes a certain set
of metadata to help you to describe this module.
So this metadata object here contains, as you can see,
declarations, imports, providers, bootstrap.
And will also contain exports if this module is exporting something that can be
used by another module.
Since this happens to be the root module, we don't have an export from this module.
So instead we only have declarations, imports, providers, and bootstrap.
So here this one is fairly straight forward to understand.
It specifies that to bootstrap this Angular application,
we need to bootstrap the AppComponent.
So the AppComponent is the root component of our Angular application.
In addition, the imports part specifies the properties,
seeing all these modules need to be imported to be used with this app module.
So this app module now depends upon these other modules.
So these are the modules that are going to be imported into the app module as
part of the hierarchy, hence the reason why we imported these modules up here.
So when you import the modules,
you are specifying here saying that the app module will make use of this module.
So the imports property specifies those modules that need to be imported or
those modules on which this particular module is dependent upon.
The declarations here, the declarations property,
is the property that declares the view classes
that belong to this particular module.
So the view classes in case of an Angular module would
be in the form of either components, directives, and pipes.
We're going to talk about directives and pipes a little bit later in this course,
we'll talk about components in the next lesson.
The providers specify all the services that this
particular module will make use of.
Services which we will talk about in a little more detail in
the next week's module.
We'll talk more details about services, how we create them,
and how we can make use of them with our Angular application.
To summarize what we have learned so far, we realize that a module
in an Angular application could consist of a set of components and
services that will be required of this module by importing them.
And these will be declared using the declarations property
of the Ngmodule decorator in our app module.
Now, these components themselves can be dependent upon
other components, or services, or directives, or
pipes, as we will see in the rest of this particular course.
So with this we have a rough idea of how a typical Angular application is structured.
Going back to our code, it's now time for use to examine
this app.component.ts file, and the app.component.html file.
Which declares the template for our component,
and the app.component.ts file,
which specifies the TypeScript part of our component.
Now, we will do that in the next lesson, where we will deal with components and
how we can create new components and add them to our Angular application.
[MUSIC]