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

2
00:00:04,792 --> 00:00:10,490
Welcome to this course on
Front-End JavaScript Frameworks: Angular.

3
00:00:10,490 --> 00:00:16,178
This is the second course in
the specialization on full stack web and

4
00:00:16,178 --> 00:00:19,840
multi-platform mobile applications.

5
00:00:19,840 --> 00:00:25,830
This course deals with JavaScript
frameworks, Angular in particular.

6
00:00:25,830 --> 00:00:30,070
You must be wondering,
is it Angular two, or is it Angular?

7
00:00:30,070 --> 00:00:34,940
We will clarify that in the very first
lesson on introduction to Angular

8
00:00:34,940 --> 00:00:35,740
in this course.

9
00:00:36,940 --> 00:00:39,390
I'm glad you decided to join this course.

10
00:00:39,390 --> 00:00:43,141
And I hope you have fun
going through this course.

11
00:00:44,766 --> 00:00:47,181
Before you embark on this course,

12
00:00:47,181 --> 00:00:52,650
I want to make sure that you have
sufficient knowledge of HTML and CSS.

13
00:00:52,650 --> 00:00:59,448
And also good working knowledge of
JavaScript, especially ES 5 JavaScript.

14
00:00:59,448 --> 00:01:04,526
Now, this course we'll be using
Typescript as the language for

15
00:01:04,526 --> 00:01:07,880
writing our Angular applications.

16
00:01:07,880 --> 00:01:11,463
Now if you are wondering
should I know Typescript and

17
00:01:11,463 --> 00:01:15,870
should I know ES 2015+,
the newer version of JavaScript?

18
00:01:15,870 --> 00:01:18,710
Well, your mileage may vary.

19
00:01:18,710 --> 00:01:23,050
My approach to learning these
new languages is to use them and

20
00:01:23,050 --> 00:01:24,900
then learn along the way.

21
00:01:24,900 --> 00:01:27,230
So that is what we'll do in this course.

22
00:01:27,230 --> 00:01:32,208
I won't explicitly introduce you to
Typescript specifically in this course.

23
00:01:32,208 --> 00:01:36,884
But instead as we write the code,
I will illustrate various

24
00:01:36,884 --> 00:01:41,842
features of Typescript in the context
of Angular as you develop

25
00:01:41,842 --> 00:01:47,190
the Angular application,
in the exercises as part of this course.

26
00:01:48,330 --> 00:01:52,630
Another point that I would strongly
like to clarify at this stage

27
00:01:52,630 --> 00:01:57,600
is that I look at web development and
design as two parts.

28
00:01:57,600 --> 00:02:01,241
The first part is the Web Design itself,
the User Experience or

29
00:02:01,241 --> 00:02:05,705
User Inferface Design, the Visual Design,
the Prototyping, the colors,

30
00:02:05,705 --> 00:02:07,232
graphics and animation.

31
00:02:07,232 --> 00:02:10,477
And all those aspects of how a website or

32
00:02:10,477 --> 00:02:15,170
even a mobile application
should be designed.

33
00:02:15,170 --> 00:02:18,367
Now there is the other
aspect which is building and

34
00:02:18,367 --> 00:02:22,183
deployment of web applications and
mobile applications.

35
00:02:22,183 --> 00:02:25,633
Now in this course, we will be
concentrating more on building and

36
00:02:25,633 --> 00:02:27,464
deployment of web applications.

37
00:02:27,464 --> 00:02:32,450
If you are looking for the design
aspect of web design and development,

38
00:02:32,450 --> 00:02:36,285
then this is not the right course for you.

39
00:02:36,285 --> 00:02:39,940
When I talk about that deployment,
building, and

40
00:02:39,940 --> 00:02:44,440
development of web applications,
we are talking about learning skills

41
00:02:44,440 --> 00:02:50,020
that are essential for
translating a design into a working code.

42
00:02:50,020 --> 00:02:55,310
So here, in this specialization,
we have already learned about Bootstrap 4.

43
00:02:55,310 --> 00:02:57,500
In this course,
we will learn about Angular.

44
00:02:57,500 --> 00:03:01,350
Then we'll learn about Ionic and
NativeScript.

45
00:03:01,350 --> 00:03:06,780
And then also Server-side development
using Node and Node ecosystem.

46
00:03:06,780 --> 00:03:10,240
So that is the concentration
of this particular course.

47
00:03:10,240 --> 00:03:16,320
So we are talking about real coding,
rather than website design.

48
00:03:16,320 --> 00:03:20,310
The other question that will arise in
your mind is what exactly is full stack

49
00:03:20,310 --> 00:03:21,700
web development?

50
00:03:21,700 --> 00:03:23,750
If you have already taken
the previous course,

51
00:03:23,750 --> 00:03:26,540
I have introduced you to
full stack web development.

52
00:03:26,540 --> 00:03:29,930
If you haven't,
the very first lesson in this

53
00:03:29,930 --> 00:03:34,430
course would be a quick introduction
to full stack web development.

54
00:03:34,430 --> 00:03:39,900
And we will place this course in
the context of full stack web development.

55
00:03:39,900 --> 00:03:42,830
So that's why in the first
course we covered Bootstrap 4,

56
00:03:42,830 --> 00:03:46,470
in this course we're going to
concentrate on Angular.

57
00:03:46,470 --> 00:03:50,710
Then in the next course,
we will look at Ionic and Cordova for

58
00:03:50,710 --> 00:03:54,590
doing multiplied for mobile development.

59
00:03:54,590 --> 00:03:57,350
Then we'll look at NativeScript
in the fourth course.

60
00:03:57,350 --> 00:04:00,335
And then finally, we will look
at the server side development,

61
00:04:00,335 --> 00:04:05,745
including both doing the business
logic layer using the Node ecosystem.

62
00:04:05,745 --> 00:04:13,935
And the data storage layer using
MongoDB in this specialization.

63
00:04:13,935 --> 00:04:18,265
This specific course, as you expect,
concentrates on Angular.

64
00:04:18,265 --> 00:04:23,391
You will be introduced to the various
aspects of the Angular framework through

65
00:04:23,391 --> 00:04:27,520
a set of exercises that
build upon each other.

66
00:04:27,520 --> 00:04:32,131
So it is a sequence of exercises where I
will introduce various Angular concepts.

67
00:04:32,131 --> 00:04:37,772
And then immediately show you how we
apply these concepts in the context

68
00:04:37,772 --> 00:04:43,519
of an Angular application that we
will develop throughout this course.

69
00:04:43,519 --> 00:04:47,985
Now along the way,
when we designed Angular's views,

70
00:04:47,985 --> 00:04:54,551
we will make use of Angular material, for
doing the UI of our Angular components.

71
00:04:54,551 --> 00:05:00,962
And we will do layouts using
the Angular Flex-Layout in this course.

72
00:05:00,962 --> 00:05:06,280
The alternative would be to use Bootstrap
4 that we have learned earlier.

73
00:05:06,280 --> 00:05:09,820
But I figured that this
course will also provide you

74
00:05:09,820 --> 00:05:15,060
with an opportunity to learn yet
another front end UI framework.

75
00:05:15,060 --> 00:05:18,230
That is Angular Material and
Angular Flex-Layout for

76
00:05:18,230 --> 00:05:22,110
doing exactly the same things that
we have done with Bootstrap 4.

77
00:05:22,110 --> 00:05:28,430
So that way you learn two different
ways of approaching the UI design

78
00:05:28,430 --> 00:05:35,300
using either Bootstrap 4 or using
Angular Material plus Angular Flex-Layout.

79
00:05:35,300 --> 00:05:37,880
We'll also introduce you
to TypeScript basics

80
00:05:37,880 --> 00:05:42,650
through the exercises as we double
up our Angular application.

81
00:05:42,650 --> 00:05:47,346
The course itself will be
organized into four modules.

82
00:05:47,346 --> 00:05:52,680
The four modules are designed to
correspond to four weeks of this course.

83
00:05:52,680 --> 00:05:55,450
But of course, let me emphasize to you

84
00:05:55,450 --> 00:05:59,760
that you don't need to be pressured by
the deadlines that we have in this course.

85
00:05:59,760 --> 00:06:03,030
You can take your own time
to go through the course.

86
00:06:03,030 --> 00:06:07,900
It is more important to understand
each and every aspect of Angular.

87
00:06:07,900 --> 00:06:14,800
If you need additional time, feel free to
move to the next session of this course.

88
00:06:14,800 --> 00:06:16,450
And then continue.

89
00:06:16,450 --> 00:06:19,950
All the work that you have completed in
one session will automatically be carried

90
00:06:19,950 --> 00:06:22,010
over to the next session of the course.

91
00:06:22,010 --> 00:06:27,340
So don't let the deadlines pressure you
into hurrying to complete this course.

92
00:06:27,340 --> 00:06:30,290
Now, having given that general idea,

93
00:06:30,290 --> 00:06:35,810
let's look at what each of the four
modules will cover in this course.

94
00:06:35,810 --> 00:06:40,130
The very first module will introduce
you to Full Stack Web Development,

95
00:06:40,130 --> 00:06:43,842
the general idea and the big picture view.

96
00:06:43,842 --> 00:06:50,230
Right after, we'll look at
a brief overview of Git and Node.

97
00:06:50,230 --> 00:06:53,250
If you have done the previous
Bootstrap 4 course,

98
00:06:53,250 --> 00:06:56,020
then you would have covered these
two already in the previous course.

99
00:06:56,020 --> 00:06:59,310
So then you can quickly skip to

100
00:06:59,310 --> 00:07:03,750
the first lesson that introduces you to
Angular, the introduction to Angular.

101
00:07:04,970 --> 00:07:10,020
After the introduction to the Angular
framework and then setting up our Angular

102
00:07:10,020 --> 00:07:15,060
application using Angular material and
Angular Flex-Layout.

103
00:07:15,060 --> 00:07:18,910
Then we will move on to study
more about angular components.

104
00:07:18,910 --> 00:07:23,880
What is the role of Angular components
in designing an Angular application and

105
00:07:23,880 --> 00:07:27,530
designing the various views that'll be
supported in your Angular application.

106
00:07:28,610 --> 00:07:32,990
That should take you all the way to
the very first assignment in this course.

107
00:07:32,990 --> 00:07:38,570
The second module concentrates
on Angular services,

108
00:07:38,570 --> 00:07:41,110
routing, and single page applications.

109
00:07:41,110 --> 00:07:46,220
We look at how the Angular feedback
supports access to data and

110
00:07:46,220 --> 00:07:50,210
how we can make use of services for
accessing the data.

111
00:07:50,210 --> 00:07:54,160
Furthermore, how we can make
use of data in designing

112
00:07:55,420 --> 00:08:00,040
our views for
our various Angular components.

113
00:08:00,040 --> 00:08:04,240
So that is where the data binding
aspect comes into the picture.

114
00:08:04,240 --> 00:08:06,920
Then we'll look at Angular routing and

115
00:08:06,920 --> 00:08:11,200
how we can implement single
page applications in Angular.

116
00:08:11,200 --> 00:08:13,920
I'll explain to you what
a single page application is and

117
00:08:13,920 --> 00:08:18,930
then we will look at how we can design
one using the Angular framework.

118
00:08:18,930 --> 00:08:24,060
And that'll take you all the way to
the second assignment in this course.

119
00:08:24,060 --> 00:08:29,120
The third module concentrates
on Angular forms.

120
00:08:29,120 --> 00:08:32,517
Then we'll look at
Angular Reactive Forms and

121
00:08:32,517 --> 00:08:36,883
also how Angular and
Reactive programming work together.

122
00:08:36,883 --> 00:08:40,236
And how Angular leverages
Reactive programming for

123
00:08:40,236 --> 00:08:45,470
implementing various forms of support
within the Angular application.

124
00:08:45,470 --> 00:08:50,324
So we'll look at template driven forms,
then we'll look at Angular Reactive forms,

125
00:08:50,324 --> 00:08:53,262
then we'll look at how
Angular supports promises.

126
00:08:53,262 --> 00:08:59,621
And then also take a brief look at
Reactive programming in RxJS in context

127
00:08:59,621 --> 00:09:07,565
of how Angular leverages RxJS to support
various features within the framework.

128
00:09:07,565 --> 00:09:12,130
That'll take you all the way to
the third assignment in this course.

129
00:09:12,130 --> 00:09:15,980
The final module looks at
Client-Server Communication.

130
00:09:15,980 --> 00:09:20,060
How your Angular application
can communicate with a server

131
00:09:20,060 --> 00:09:24,220
that provides data that can be
fetched from the server side and

132
00:09:24,220 --> 00:09:29,120
then used to render the views
within your Angular application.

133
00:09:29,120 --> 00:09:33,370
Correspondingly, we'll also look at
how any changes that you want to

134
00:09:33,370 --> 00:09:38,020
make to the data can be reflected
back to the server side,

135
00:09:38,020 --> 00:09:40,340
from your Angular application.

136
00:09:40,340 --> 00:09:44,670
We'll look at Angular and
the HTTP module within Angular.

137
00:09:44,670 --> 00:09:48,731
We'll look at how
the REST API is leveraged for

138
00:09:48,731 --> 00:09:52,171
designing your Angular application,

139
00:09:52,171 --> 00:09:57,398
we'll also look at Animations and
Directives in Angular.

140
00:09:57,398 --> 00:10:00,040
In particular,
attribute directives in Angular.

141
00:10:00,040 --> 00:10:04,558
We will look at structure directives
in the very first module.

142
00:10:04,558 --> 00:10:10,140
We'll look at testing of Angular
applications briefly, and then finally

143
00:10:10,140 --> 00:10:16,040
look at how we will build and deploy
our Angular application to a server.

144
00:10:16,040 --> 00:10:22,030
And that should take you all the way
to the final assignment in this course.

145
00:10:22,030 --> 00:10:27,758
Along the way, we also have an honors
track built into this course.

146
00:10:27,758 --> 00:10:32,440
If you want to work on your
own project using Angular,

147
00:10:32,440 --> 00:10:37,950
then the honors track provides
you with the opportunity to work

148
00:10:37,950 --> 00:10:43,470
on your own project within
this particular course.

149
00:10:43,470 --> 00:10:48,840
So take a look at the honors track, and if
that interests you, you can as well pursue

150
00:10:48,840 --> 00:10:53,150
developing your own Angular project
within the context of this course.

151
00:10:54,190 --> 00:10:58,175
I hope you enjoy going through
this course and learn Angular.

152
00:10:59,500 --> 00:11:04,550
The last word which I will
leave you with is be patient.

153
00:11:04,550 --> 00:11:07,990
Angular requires a lot
of patience to learn.

154
00:11:07,990 --> 00:11:11,020
There will be a lot of concepts and

155
00:11:11,020 --> 00:11:15,740
technologies that you will encounter
as you go through this course.

156
00:11:15,740 --> 00:11:19,620
Please don't hurry just
to complete the course.

157
00:11:19,620 --> 00:11:26,716
Take your own time to understand every
single step before you finish this course.

158
00:11:26,716 --> 00:11:29,987
I hope you enjoy taking this course.

159
00:11:29,987 --> 00:11:33,049
[MUSIC]