1
00:00:06,570 --> 00:00:08,970
- Angular is a client-side framework,

2
00:00:08,970 --> 00:00:11,880
very popular from Google to make it easier

3
00:00:11,880 --> 00:00:13,770
for you to implement large amounts

4
00:00:13,770 --> 00:00:16,530
of JavaScript code in the web browser.

5
00:00:16,530 --> 00:00:18,870
It's a very useful framework.

6
00:00:18,870 --> 00:00:21,720
It's been around for 6 or 7 years now.

7
00:00:21,720 --> 00:00:23,550
Some of the features it provides,

8
00:00:23,550 --> 00:00:25,350
Client-side data binding.

9
00:00:25,350 --> 00:00:27,870
So what that means is you can have a class

10
00:00:27,870 --> 00:00:30,630
called a component which contains data

11
00:00:30,630 --> 00:00:33,540
and you can associate
it with an HTML webpage

12
00:00:33,540 --> 00:00:35,910
and the elements on the HTML webpage

13
00:00:35,910 --> 00:00:38,913
automatically display the
data from the component.

14
00:00:39,750 --> 00:00:42,360
So that's called Client-side data binding.

15
00:00:42,360 --> 00:00:44,790
You don't need to access the DOM directly.

16
00:00:44,790 --> 00:00:47,550
The idea is that you write
normal JavaScript code

17
00:00:47,550 --> 00:00:50,490
to update the data in your component class

18
00:00:50,490 --> 00:00:53,550
and it automatically
re-renders itself in the HTML.

19
00:00:53,550 --> 00:00:56,130
So we have, we can move
away from low level code,

20
00:00:56,130 --> 00:00:58,590
such as you know, find
the element with this ID,

21
00:00:58,590 --> 00:01:00,210
find its child element,

22
00:01:00,210 --> 00:01:02,100
add the new element to the DOM tree.

23
00:01:02,100 --> 00:01:05,100
We can just work in terms
of logical JavaScript data,

24
00:01:05,100 --> 00:01:09,030
and the HTML is automatically
re-displays that data for us,

25
00:01:09,030 --> 00:01:11,190
much higher level of programming.

26
00:01:11,190 --> 00:01:14,280
It supports dependency
injection and services.

27
00:01:14,280 --> 00:01:17,580
In Angular, a service is a class

28
00:01:17,580 --> 00:01:20,160
which you inject into a component.

29
00:01:20,160 --> 00:01:22,980
The component then calls methods

30
00:01:22,980 --> 00:01:26,490
on the service to get data to display.

31
00:01:26,490 --> 00:01:29,100
So we'll have a look at that
later on during this lesson

32
00:01:29,100 --> 00:01:30,780
and the following lesson.

33
00:01:30,780 --> 00:01:34,080
Angular comes out with a
new version every 6 months.

34
00:01:34,080 --> 00:01:35,790
At the time of writing,

35
00:01:35,790 --> 00:01:38,100
we were using Angular 12.

36
00:01:38,100 --> 00:01:40,470
Every 6 months, the version changes.

37
00:01:40,470 --> 00:01:44,190
By the time you are
viewing this video series,

38
00:01:44,190 --> 00:01:46,050
it'll definitely be, have moved on.

39
00:01:46,050 --> 00:01:48,570
It could be Angular 13 or Angular 14,

40
00:01:48,570 --> 00:01:51,900
Angular 15, Angular a hundred.

41
00:01:51,900 --> 00:01:54,633
So we have this tool called Angular CLI,

42
00:01:55,590 --> 00:01:57,780
Angular Command-Line Interface.

43
00:01:57,780 --> 00:01:59,250
It's a tool which enables you

44
00:01:59,250 --> 00:02:01,860
to create a new Angular application.

45
00:02:01,860 --> 00:02:03,360
You don't have to use it,

46
00:02:03,360 --> 00:02:05,340
but you almost certainly should.

47
00:02:05,340 --> 00:02:07,350
It's very, when you have
an Angular application,

48
00:02:07,350 --> 00:02:09,030
there's a lot of files involved

49
00:02:09,030 --> 00:02:12,000
and you have to follow best practice.

50
00:02:12,000 --> 00:02:15,960
If you use Angular CLI, it
reinforces best practice.

51
00:02:15,960 --> 00:02:19,410
So you can use Angular
CLI from the command-line

52
00:02:19,410 --> 00:02:21,300
to create a new Angular application.

53
00:02:21,300 --> 00:02:23,010
I would always do this.

54
00:02:23,010 --> 00:02:25,770
I would never create an Angular
application from scratch.

55
00:02:25,770 --> 00:02:27,990
I would always use the Angular CLI

56
00:02:27,990 --> 00:02:30,510
to create a baseline application.

57
00:02:30,510 --> 00:02:31,860
Once you've done that,

58
00:02:31,860 --> 00:02:33,840
you can look at the configuration files.

59
00:02:33,840 --> 00:02:36,540
It generates, for example, a package .JSON

60
00:02:36,540 --> 00:02:39,180
that specifies your libraries

61
00:02:39,180 --> 00:02:42,840
and it specifies a test configuration

62
00:02:42,840 --> 00:02:45,330
that configures the test
framework for Angular.

63
00:02:45,330 --> 00:02:49,080
As we'll see shortly,
Angular uses Jasmine.

64
00:02:49,080 --> 00:02:50,790
Jasmine is very similar to Jest

65
00:02:50,790 --> 00:02:54,060
so that's similar to what
we've been looking at so far.

66
00:02:54,060 --> 00:02:57,000
So Angular CLI, it
generates lots of folders

67
00:02:57,000 --> 00:02:58,380
and lots of files

68
00:02:58,380 --> 00:03:01,290
and it kind of shows you
how to do it properly.

69
00:03:01,290 --> 00:03:03,240
So you should follow the conventions

70
00:03:03,240 --> 00:03:05,190
that Angular suggests.

71
00:03:05,190 --> 00:03:08,850
Having one folder per component,

72
00:03:08,850 --> 00:03:11,880
organizing things in the
hierarchical structure,

73
00:03:11,880 --> 00:03:15,660
using the correct file naming conventions

74
00:03:15,660 --> 00:03:19,290
for your, for your code and for your HTML

75
00:03:19,290 --> 00:03:22,020
and for your style sheets
and for your test files.

76
00:03:22,020 --> 00:03:23,970
So there's a lot of files involved.

77
00:03:23,970 --> 00:03:26,190
It's important to organize
these things properly

78
00:03:26,190 --> 00:03:29,160
and Angular CLI helps you
to organize things properly.

79
00:03:29,160 --> 00:03:30,760
So you should definitely use it.

80
00:03:31,650 --> 00:03:33,540
Okay, so Angular CLI

81
00:03:33,540 --> 00:03:36,750
will help you generate
an application initially,

82
00:03:36,750 --> 00:03:39,360
it'll also allow you to, or help you

83
00:03:39,360 --> 00:03:41,460
or it will do it for you actually.

84
00:03:41,460 --> 00:03:43,290
It'll generate additional files

85
00:03:43,290 --> 00:03:45,240
that you might need later on.

86
00:03:45,240 --> 00:03:49,170
So for example, you might need
extra classes or interfaces.

87
00:03:49,170 --> 00:03:51,060
You might need extra style sheets.

88
00:03:51,060 --> 00:03:54,330
You might need an extra
service class to be injected.

89
00:03:54,330 --> 00:03:56,430
You should use the Angular CLI tool

90
00:03:56,430 --> 00:03:58,230
to generate all these things

91
00:03:58,230 --> 00:03:59,600
and it'll generate them

92
00:03:59,600 --> 00:04:02,103
in the conventional best
practice kind of way.

93
00:04:02,970 --> 00:04:04,440
So there we go, those
are some of the things

94
00:04:04,440 --> 00:04:06,990
that you can create using
the Angular CLI tool.

95
00:04:06,990 --> 00:04:09,120
We'll see all how to
do all of this later on

96
00:04:09,120 --> 00:04:12,030
during this lesson and
the following lesson.

97
00:04:12,030 --> 00:04:16,050
Okay now Angular CLI is
a Node.js application.

98
00:04:16,050 --> 00:04:17,940
So before you go anywhere,

99
00:04:17,940 --> 00:04:19,530
you have, if you haven't already done so,

100
00:04:19,530 --> 00:04:21,060
mean you will have done by now.

101
00:04:21,060 --> 00:04:23,703
You need to make sure that
you've installed Node.js.

102
00:04:24,540 --> 00:04:26,010
Once you've done that or Yarn,

103
00:04:26,010 --> 00:04:27,750
Yarn would also work.

104
00:04:27,750 --> 00:04:30,660
Once you've installed
either Node.js or Yarn,

105
00:04:30,660 --> 00:04:32,820
you can then install Angular CLI

106
00:04:32,820 --> 00:04:36,270
like this, npm install -g,

107
00:04:36,270 --> 00:04:38,640
so globally on your machine,

108
00:04:38,640 --> 00:04:41,220
install the Angular CLI tool.

109
00:04:41,220 --> 00:04:43,620
The @ symbol isn't significant.

110
00:04:43,620 --> 00:04:45,030
It's just the name of the,

111
00:04:45,030 --> 00:04:48,150
it's just the name of
the tool, @angular/cli.

112
00:04:48,150 --> 00:04:51,810
That'll download and
install the Angular CLI tool

113
00:04:51,810 --> 00:04:52,830
on your machine.

114
00:04:52,830 --> 00:04:55,290
And then in order to use
it, it looks like this.

115
00:04:55,290 --> 00:04:59,300
You say ng, ng is the Angular CLI,

116
00:04:59,300 --> 00:05:02,220
ng is kind of short for Angular.

117
00:05:02,220 --> 00:05:04,230
So if you type that in,

118
00:05:04,230 --> 00:05:06,487
it'll first of all verify that Angular is,

119
00:05:06,487 --> 00:05:09,390
the Angular CLI is installed properly.

120
00:05:09,390 --> 00:05:11,970
And it'll tell you what version
of Angular are you using.

121
00:05:11,970 --> 00:05:16,170
So like I said, when I created
my examples for this session,

122
00:05:16,170 --> 00:05:19,050
it was Angular CLI version 12,

123
00:05:19,050 --> 00:05:20,520
but you know, 6 months later,

124
00:05:20,520 --> 00:05:24,150
it'll be 13, then version
14, then version 15.

125
00:05:24,150 --> 00:05:26,370
So, all the examples that I've got here

126
00:05:26,370 --> 00:05:27,690
will continue to work,

127
00:05:27,690 --> 00:05:29,220
now going into the future.

128
00:05:29,220 --> 00:05:31,950
But if you generate new
applications for yourself,

129
00:05:31,950 --> 00:05:33,840
then the version numbers
for all the libraries

130
00:05:33,840 --> 00:05:35,850
will be different and that's fine.

131
00:05:35,850 --> 00:05:39,090
Generally, Angular these
days is backwards compatible.

132
00:05:39,090 --> 00:05:41,310
It's very rare where
they introduce a change

133
00:05:41,310 --> 00:05:43,230
that breaks old code.

134
00:05:43,230 --> 00:05:44,913
Okay, so that should be fine.

135
00:05:45,930 --> 00:05:47,490
Right, so let's imagine

136
00:05:47,490 --> 00:05:49,380
that you've installed Angular CLI.

137
00:05:49,380 --> 00:05:53,460
Angular CLI enables you to
create the new application,

138
00:05:53,460 --> 00:05:55,590
to add artifacts to the application

139
00:05:55,590 --> 00:05:57,510
so to add components,

140
00:05:57,510 --> 00:06:02,130
services, classes,
interfaces, directives, pipes.

141
00:06:02,130 --> 00:06:05,220
There's quite a lot of, quite
a rich ecosystem, Angular.

142
00:06:05,220 --> 00:06:06,330
In fact, one of the,

143
00:06:06,330 --> 00:06:07,740
one of the things that people criticize

144
00:06:07,740 --> 00:06:12,270
about Angular is that it's
complicated compared to React.

145
00:06:12,270 --> 00:06:15,210
With React, you'd create
a simple React application

146
00:06:15,210 --> 00:06:17,610
with about 20 lines of HTML.

147
00:06:17,610 --> 00:06:19,920
But in Angular, you're, you're looking at,

148
00:06:19,920 --> 00:06:22,920
you know, probably about 12 files,

149
00:06:22,920 --> 00:06:24,900
probably a couple hundred lines of code.

150
00:06:24,900 --> 00:06:27,690
So you definitely don't want
to write all that yourself

151
00:06:27,690 --> 00:06:30,240
hence the need or the usage of Angular CLI

152
00:06:30,240 --> 00:06:31,350
to get you started.

153
00:06:31,350 --> 00:06:33,150
But you can also use Angular CLI

154
00:06:33,150 --> 00:06:34,920
to create other applications afterwards

155
00:06:34,920 --> 00:06:37,080
and to add them into your application.

156
00:06:37,080 --> 00:06:40,870
You can also use the Angular
CLI to serve an application.

157
00:06:40,870 --> 00:06:44,670
Okay, so what that means
is it'll compile your code,

158
00:06:44,670 --> 00:06:46,650
it'll start in memory,

159
00:06:46,650 --> 00:06:48,540
it'll start a web server,

160
00:06:48,540 --> 00:06:50,370
like a development web server,

161
00:06:50,370 --> 00:06:52,740
so that it'll host your web application

162
00:06:52,740 --> 00:06:54,420
in debug mode, if you like.

163
00:06:54,420 --> 00:06:55,590
So it's the quickest way

164
00:06:55,590 --> 00:06:58,380
to get an application running
in an app is to serve it.

165
00:06:58,380 --> 00:07:00,090
You say ng serve.

166
00:07:00,090 --> 00:07:01,830
And that's what we'll do initially.

167
00:07:01,830 --> 00:07:03,990
Once you're happy that
the application's working

168
00:07:03,990 --> 00:07:06,450
and you've debugged it and it's beautiful,

169
00:07:06,450 --> 00:07:08,970
then you can build it for, for production.

170
00:07:08,970 --> 00:07:11,310
Okay, so that will basically compress it.

171
00:07:11,310 --> 00:07:14,010
It'll amplify the files
and basically minify them.

172
00:07:14,010 --> 00:07:16,440
And it'll give you the
smallest footprint possible,

173
00:07:16,440 --> 00:07:20,310
ready to put onto your production
server in the real world.

174
00:07:20,310 --> 00:07:22,539
Okay, so that's called a build.

175
00:07:22,539 --> 00:07:23,880
Right, so there we go.

176
00:07:23,880 --> 00:07:25,920
So Angular CLI,

177
00:07:25,920 --> 00:07:29,220
currently creating in Angular
version 12 in my examples.

178
00:07:29,220 --> 00:07:32,460
The version will be
incremented every 6 months.

179
00:07:32,460 --> 00:07:34,650
So what you probably need to do

180
00:07:34,650 --> 00:07:36,210
if you're gonna be using Angular,

181
00:07:36,210 --> 00:07:38,850
there isn't any dramatic imperative need

182
00:07:38,850 --> 00:07:41,070
to always be using the latest version.

183
00:07:41,070 --> 00:07:42,480
But you probably wanna be within,

184
00:07:42,480 --> 00:07:45,300
you know two or three
versions of the latest.

185
00:07:45,300 --> 00:07:48,843
You know so within two
years, it'll be Angular 16.

186
00:07:49,800 --> 00:07:52,410
You probably wanna, you know,
keep relatively up to date,

187
00:07:52,410 --> 00:07:54,120
you know two or three years up to date.

188
00:07:54,120 --> 00:07:57,510
Don't leave your Angular
running on version 7

189
00:07:57,510 --> 00:07:59,910
because eventually it'll break.

190
00:07:59,910 --> 00:08:02,100
Right, so that's a very quick overview.

191
00:08:02,100 --> 00:08:05,220
Hopefully by now, you've
installed Angular CLI.

192
00:08:05,220 --> 00:08:07,200
So what we're going to
do in the next section

193
00:08:07,200 --> 00:08:09,270
is we're going to generate
a simple application

194
00:08:09,270 --> 00:08:11,720
and start dissecting the
files that it generates.