1
00:00:00,000 --> 00:00:04,599
[MUSIC]

2
00:00:04,599 --> 00:00:09,853
We just created our first Angular
application in the previous exercise.

3
00:00:09,853 --> 00:00:13,758
You must be wondering, what does
a typical Angular application look like?

4
00:00:13,758 --> 00:00:16,345
What is its structure and
architecture, and

5
00:00:16,345 --> 00:00:18,669
how do we build an Angular application?

6
00:00:19,800 --> 00:00:25,560
Let's talk about these things step by
step, beginning with this lecture.

7
00:00:27,390 --> 00:00:34,280
Taking a quick look at
the application folder, in a editor.

8
00:00:34,280 --> 00:00:39,469
You notice immediately that the Angular
CLI has created a whole bunch of

9
00:00:40,530 --> 00:00:45,820
files in various folders
in our application.

10
00:00:47,260 --> 00:00:50,240
What do these files contain?

11
00:00:50,240 --> 00:00:53,930
How do they constitute
an Angular application?

12
00:00:53,930 --> 00:00:58,832
Let's examine them step by step to
understand the typical architecture of

13
00:00:58,832 --> 00:01:00,556
an Angular application.

14
00:01:00,556 --> 00:01:03,688
As we have already realized,

15
00:01:03,688 --> 00:01:08,828
Angular applications
are built as a combination

16
00:01:08,828 --> 00:01:13,727
of HTML and either TypeScript or
JavaScript.

17
00:01:13,727 --> 00:01:18,735
In this course we're going to be using
TypeScript as the language of choice for

18
00:01:18,735 --> 00:01:21,169
building our Angular application.

19
00:01:21,169 --> 00:01:25,146
Angular itself consists
of several libraries,

20
00:01:25,146 --> 00:01:30,585
some of them called libraries and
others are optional libraries.

21
00:01:30,585 --> 00:01:35,389
Depending on kind of an Angular
application that you're trying to build,

22
00:01:35,389 --> 00:01:38,910
you will include some of
these into your application.

23
00:01:38,910 --> 00:01:44,510
As we've already learned,
Angular is a JavaScript framework and

24
00:01:44,510 --> 00:01:48,610
we'll leverage that to
build our application.

25
00:01:49,715 --> 00:01:56,800
To summarize, Angular application is
modular in its nature and will consist of

26
00:01:56,800 --> 00:02:03,160
several components, together with their
templates, that comprise the application.

27
00:02:03,160 --> 00:02:09,090
Not only that, these components, and
other parts of the Angular application,

28
00:02:09,090 --> 00:02:13,060
like services,
will be organized into modules.

29
00:02:13,060 --> 00:02:18,892
And these modules, in turn,
will be used by higher level modules.

30
00:02:18,892 --> 00:02:23,889
So you can look at an Angular
application being a modular

31
00:02:23,889 --> 00:02:27,822
architecture with a root
module at the top,

32
00:02:27,822 --> 00:02:34,966
which takes the help of other modules
organized into your modeling hierarchy.

33
00:02:34,966 --> 00:02:41,170
Let's examine our application to
understand how this is created.

34
00:02:41,170 --> 00:02:45,550
Before we proceed,
the root module by default

35
00:02:45,550 --> 00:02:50,810
in Angular is typically
named the app module.

36
00:02:50,810 --> 00:02:55,970
Going to our code,
let's begin our journey and index.html.

37
00:02:55,970 --> 00:03:03,519
So in this index.html file, you can see
that we have the typical html code here,

38
00:03:03,519 --> 00:03:09,079
together with this particular
line which says app-root.

39
00:03:09,079 --> 00:03:15,270
You immediately recognize them this
doesn't look like a typical HTML tag.

40
00:03:15,270 --> 00:03:20,130
So let's begin by asking ourselves the
question, what does this stand for, and

41
00:03:20,130 --> 00:03:25,970
why is that included in
the index.html page?

42
00:03:25,970 --> 00:03:31,090
As we already saw,
a typical Angular application

43
00:03:31,090 --> 00:03:35,490
is a hierarchy of modules
with a root module.

44
00:03:35,490 --> 00:03:40,660
Your Angular application is bootstrapped
by bootstrapping the root module

45
00:03:40,660 --> 00:03:42,520
to start your application.

46
00:03:42,520 --> 00:03:46,430
So how do we bootstrap
an Angular application?

47
00:03:46,430 --> 00:03:53,566
We already saw the index.html page, and
you saw an element there called app-root.

48
00:03:53,566 --> 00:03:58,306
So let's ask ourselves
a few more questions.

49
00:03:58,306 --> 00:04:03,102
A companion to the index.html
page is the main.ts file.

50
00:04:03,102 --> 00:04:07,602
If you open that file you will
see that it contains a set

51
00:04:07,602 --> 00:04:12,790
of import statements in TypeScript,
as written here.

52
00:04:12,790 --> 00:04:16,460
Let's not delve too much into the details,
but

53
00:04:16,460 --> 00:04:20,160
I will come back to explain
this in a short while.

54
00:04:20,160 --> 00:04:21,652
But in particular,

55
00:04:21,652 --> 00:04:27,017
let me draw your attention to this
particular line in the main.ts file.

56
00:04:27,017 --> 00:04:31,600
Which says
platformBrowserDynamic().bootstrapModule

57
00:04:31,600 --> 00:04:36,277
and then note the parameter here,
which says (AppModule).

58
00:04:36,277 --> 00:04:41,075
So as I mentioned,
earlier the app module is the typical

59
00:04:41,075 --> 00:04:45,985
name given to the root module
in an Angular application.

60
00:04:45,985 --> 00:04:48,643
If you look at the file hierarchy,

61
00:04:48,643 --> 00:04:52,867
you already see a file
there called app_module.ts.

62
00:04:52,867 --> 00:04:57,131
We're going to visit that file in
a short while to see what it contains.

63
00:04:57,131 --> 00:04:59,877
Now, coming back to these imports,

64
00:04:59,877 --> 00:05:05,250
you can see that let's take
the example of the first import here.

65
00:05:05,250 --> 00:05:10,330
It says import enableProdMode
from '@angular/core'.

66
00:05:10,330 --> 00:05:15,740
So what this specifies is that
we will import this particular

67
00:05:15,740 --> 00:05:19,970
module from the Angular core library.

68
00:05:19,970 --> 00:05:24,820
And similarly, you see the second one
saying import platformBrowserDynamic

69
00:05:24,820 --> 00:05:28,040
from '@angular/platform-browser-dynamic'.

70
00:05:28,040 --> 00:05:32,500
So from this library you
are importing this module into place.

71
00:05:32,500 --> 00:05:37,896
Now, the platformBrowserDynamic
module enables you to bootstrap

72
00:05:37,896 --> 00:05:44,100
your Angular application by taking
your root module as a parameter.

73
00:05:44,100 --> 00:05:51,237
Obviously there are many other files in
this folder and the sub-folders there.

74
00:05:51,237 --> 00:05:55,534
Let's not concern ourselves too
much about them at the moment.

75
00:05:55,534 --> 00:05:59,900
We will learn about some of them
as we go along in this course.

76
00:05:59,900 --> 00:06:05,868
Now, Angular CLI helps create
this hierarchy of folders and

77
00:06:05,868 --> 00:06:09,848
files, with the necessary settings for

78
00:06:09,848 --> 00:06:16,768
you to be able to bootstrap your
angular application and get started.

79
00:06:16,768 --> 00:06:20,233
Doing this by hand is
a bit of a tedious task.

80
00:06:20,233 --> 00:06:24,811
So, the Angular CLI
simplifies the preparation

81
00:06:24,811 --> 00:06:29,460
of the folder for
your Angular application.

82
00:06:29,460 --> 00:06:36,210
So again, going to the app_module.ts file.

83
00:06:36,210 --> 00:06:41,820
As I mentioned, this is the root
module for your Angular application.

84
00:06:41,820 --> 00:06:47,912
Now typically, the root module
would be named as app.module file,

85
00:06:47,912 --> 00:06:51,915
but that is only a suggested
name in Angular.

86
00:06:51,915 --> 00:06:57,627
You will see that many of the files
that constitute an Angular application,

87
00:06:57,627 --> 00:07:01,297
there are suggested ways
of naming those files.

88
00:07:01,297 --> 00:07:05,889
As we go through the course we will learn
specifically about each one of these

89
00:07:05,889 --> 00:07:06,720
files.

90
00:07:06,720 --> 00:07:11,032
So taking a look into at
the contents of app_module.ts,

91
00:07:11,032 --> 00:07:15,790
inside there you see a set
of import statements there.

92
00:07:15,790 --> 00:07:19,213
Taking a quick look at them it
says import { BrowserModule } from

93
00:07:19,213 --> 00:07:21,740
'@angular-platform-browser'.

94
00:07:21,740 --> 00:07:25,039
Import { NgModule } from '@angular/core'.

95
00:07:25,039 --> 00:07:29,550
And NgModule is an angular module.

96
00:07:29,550 --> 00:07:34,070
We'll learn a little more
about it a short while later.

97
00:07:34,070 --> 00:07:38,532
In addition,
you see another import statement here,

98
00:07:38,532 --> 00:07:44,159
that says import { AppComponent
} from './app.component'.

99
00:07:44,159 --> 00:07:47,309
And taking a look at the files here,

100
00:07:47,309 --> 00:07:52,141
you already see
an app.component.tsfileware, and

101
00:07:52,141 --> 00:07:58,863
then several other files here,
including an app.component card.html,

102
00:07:58,863 --> 00:08:02,972
an app.component.acss, and other files.

103
00:08:02,972 --> 00:08:10,939
Now, this statement specifies that this
root module will include this component,

104
00:08:10,939 --> 00:08:17,640
and will form the root compliment
of your Angular application.

105
00:08:17,640 --> 00:08:22,450
A typical Angular application,
as we saw, consists of a number of

106
00:08:22,450 --> 00:08:27,330
modules with the root module
as the primary module,

107
00:08:27,330 --> 00:08:31,360
which helps you to bootstrap
your Angular application.

108
00:08:31,360 --> 00:08:38,970
The root module is an Angular module
with a feature, or is a class.

109
00:08:38,970 --> 00:08:44,690
So this is where you see the use
of a TypeScript class here,

110
00:08:44,690 --> 00:08:49,380
so if you go down into the red
module down below here you will see

111
00:08:49,380 --> 00:08:53,485
this statement called
export class AppModule.

112
00:08:53,485 --> 00:08:59,550
TypeScript adds classes to
your typical JavaScript code.

113
00:08:59,550 --> 00:09:03,085
If you are familiar with
only ES-5 JavaScript,

114
00:09:03,085 --> 00:09:06,873
then classes have not yet
been introduced there, but

115
00:09:06,873 --> 00:09:11,942
the newer versions of JavaScript
will introduce support for classes.

116
00:09:11,942 --> 00:09:14,971
TypeScript also has support for classes.

117
00:09:14,971 --> 00:09:18,651
So if you have experience with
object oriented programming,

118
00:09:18,651 --> 00:09:21,139
you're already familiar with classes.

119
00:09:21,139 --> 00:09:27,106
So that kind of approach is being brought
into JavaScript with the introduction

120
00:09:27,106 --> 00:09:31,750
of classes in TypeScript and
future versions of JavaScript.

121
00:09:31,750 --> 00:09:37,028
In addition you'll notice
that this class has

122
00:09:37,028 --> 00:09:42,314
an Ngmodule decorator
associated with that.

123
00:09:42,314 --> 00:09:47,312
So a decorator is, again, a function of

124
00:09:47,312 --> 00:09:51,874
that modifies JavaScript classes.

125
00:09:51,874 --> 00:09:59,254
We'll see the use of decorators in many
places in our Angular application.

126
00:09:59,254 --> 00:10:00,980
This is an Ngmodule.

127
00:10:00,980 --> 00:10:05,850
The decorator of that enables you
to specify some details about this

128
00:10:05,850 --> 00:10:06,797
app module.

129
00:10:06,797 --> 00:10:12,398
So this decorator function
takes a certain set

130
00:10:12,398 --> 00:10:18,295
of metadata to help you
to describe this module.

131
00:10:18,295 --> 00:10:23,232
So this metadata object here contains,
as you can see,

132
00:10:23,232 --> 00:10:28,430
declarations, imports,
providers, bootstrap.

133
00:10:28,430 --> 00:10:33,080
And will also contain exports if this
module is exporting something that can be

134
00:10:33,080 --> 00:10:35,110
used by another module.

135
00:10:35,110 --> 00:10:41,734
Since this happens to be the root module,
we don't have an export from this module.

136
00:10:41,734 --> 00:10:47,418
So instead we only have declarations,
imports, providers, and bootstrap.

137
00:10:47,418 --> 00:10:52,243
So here this one is fairly
straight forward to understand.

138
00:10:52,243 --> 00:10:57,280
It specifies that to bootstrap
this Angular application,

139
00:10:57,280 --> 00:11:00,713
we need to bootstrap the AppComponent.

140
00:11:00,713 --> 00:11:07,008
So the AppComponent is the root
component of our Angular application.

141
00:11:07,008 --> 00:11:13,595
In addition,
the imports part specifies the properties,

142
00:11:13,595 --> 00:11:22,040
seeing all these modules need to be
imported to be used with this app module.

143
00:11:22,040 --> 00:11:25,770
So this app module now depends
upon these other modules.

144
00:11:25,770 --> 00:11:30,917
So these are the modules that are going
to be imported into the app module as

145
00:11:30,917 --> 00:11:36,494
part of the hierarchy, hence the reason
why we imported these modules up here.

146
00:11:36,494 --> 00:11:38,451
So when you import the modules,

147
00:11:38,451 --> 00:11:43,324
you are specifying here saying that the
app module will make use of this module.

148
00:11:43,324 --> 00:11:48,462
So the imports property specifies those
modules that need to be imported or

149
00:11:48,462 --> 00:11:53,040
those modules on which this
particular module is dependent upon.

150
00:11:53,040 --> 00:11:58,398
The declarations here,
the declarations property,

151
00:11:58,398 --> 00:12:02,940
is the property that
declares the view classes

152
00:12:02,940 --> 00:12:06,910
that belong to this particular module.

153
00:12:06,910 --> 00:12:10,584
So the view classes in case
of an Angular module would

154
00:12:10,584 --> 00:12:15,018
be in the form of either components,
directives, and pipes.

155
00:12:15,018 --> 00:12:20,789
We're going to talk about directives and
pipes a little bit later in this course,

156
00:12:20,789 --> 00:12:24,416
we'll talk about components
in the next lesson.

157
00:12:24,416 --> 00:12:28,590
The providers specify all
the services that this

158
00:12:28,590 --> 00:12:31,753
particular module will make use of.

159
00:12:31,753 --> 00:12:36,592
Services which we will talk
about in a little more detail in

160
00:12:36,592 --> 00:12:39,235
the next week's module.

161
00:12:39,235 --> 00:12:42,510
We'll talk more details about services,
how we create them,

162
00:12:42,510 --> 00:12:46,810
and how we can make use of them
with our Angular application.

163
00:12:46,810 --> 00:12:52,091
To summarize what we have learned so
far, we realize that a module

164
00:12:52,091 --> 00:12:57,373
in an Angular application could
consist of a set of components and

165
00:12:57,373 --> 00:13:02,671
services that will be required of
this module by importing them.

166
00:13:02,671 --> 00:13:09,461
And these will be declared
using the declarations property

167
00:13:09,461 --> 00:13:15,220
of the Ngmodule decorator
in our app module.

168
00:13:15,220 --> 00:13:19,845
Now, these components themselves
can be dependent upon

169
00:13:19,845 --> 00:13:24,178
other components, or
services, or directives, or

170
00:13:24,178 --> 00:13:29,115
pipes, as we will see in the rest
of this particular course.

171
00:13:29,115 --> 00:13:37,212
So with this we have a rough idea of how a
typical Angular application is structured.

172
00:13:37,212 --> 00:13:42,247
Going back to our code,
it's now time for use to examine

173
00:13:42,247 --> 00:13:48,691
this app.component.ts file, and
the app.component.html file.

174
00:13:48,691 --> 00:13:53,502
Which declares the template for
our component,

175
00:13:53,502 --> 00:13:57,022
and the app.component.ts file,

176
00:13:57,022 --> 00:14:02,547
which specifies the TypeScript
part of our component.

177
00:14:02,547 --> 00:14:08,157
Now, we will do that in the next lesson,
where we will deal with components and

178
00:14:08,157 --> 00:14:13,436
how we can create new components and
add them to our Angular application.

179
00:14:13,436 --> 00:14:16,815
[MUSIC]