1
00:00:04,210 --> 00:00:10,450
Hello, everyone, and welcome back in the last listen, we had our first angular application up and

2
00:00:10,450 --> 00:00:10,940
running.

3
00:00:11,230 --> 00:00:18,940
Let's take a moment to explore it and discuss what is angular and what is the key benefit of the angular

4
00:00:18,940 --> 00:00:20,060
core module.

5
00:00:20,350 --> 00:00:23,470
Let's have a look here at the e-mail of our application.

6
00:00:23,490 --> 00:00:29,650
So as you can see, it's a very simple page with an image and some text and a couple of links here in

7
00:00:29,650 --> 00:00:30,310
the bottom.

8
00:00:30,640 --> 00:00:36,820
This page that we see here on the screen corresponds here to the index note e-mail file that you can

9
00:00:36,820 --> 00:00:39,790
find here inside our source directory.

10
00:00:39,910 --> 00:00:46,270
Now, if we look closely at this file, we're going to notice that here the title of this page indeed

11
00:00:46,270 --> 00:00:49,660
corresponds to the title that we have here in the browser.

12
00:00:50,020 --> 00:00:53,580
So this is indeed the correct page that is getting served here.

13
00:00:53,740 --> 00:00:59,500
But if we look at the body here of the page, we're going to see that there is really nothing here other

14
00:00:59,500 --> 00:01:02,770
than this application route, custom HTML tag.

15
00:01:03,010 --> 00:01:10,310
So all the title, the image and the links that we have here, they are all being created via this tag.

16
00:01:10,630 --> 00:01:15,730
Let's switch to a larger window and expect this application using the chrome, their tools.

17
00:01:16,210 --> 00:01:21,820
If we have a look here, for example, at the title, we are going to see that this is indeed inside

18
00:01:21,820 --> 00:01:25,930
the application root tag that we saw in our indexed e-mail.

19
00:01:26,290 --> 00:01:28,830
And the same goes for the rest of the page.

20
00:01:29,170 --> 00:01:34,780
The links that we have here, all of this is contained inside our application route.

21
00:01:35,050 --> 00:01:38,860
The question now is where is all this e-mail coming from?

22
00:01:38,860 --> 00:01:44,260
Because as we have seen, this is not coming here from the index of the e-mail page.

23
00:01:44,440 --> 00:01:49,840
Our application route tag does not have anything contained inside it.

24
00:01:49,840 --> 00:01:50,740
It's empty.

25
00:01:50,950 --> 00:01:56,740
If we have a look here inside the app folder of our application, we are going to see that all this

26
00:01:56,740 --> 00:02:02,000
e-mail is coming here from this application component, dot e-mail file.

27
00:02:02,290 --> 00:02:04,630
So as you can see, we have here the title.

28
00:02:04,900 --> 00:02:09,460
We have the image and we have here the links in the menu.

29
00:02:09,580 --> 00:02:18,400
Also in this component e-mail file, these component e-mail file also has a component typescript file

30
00:02:18,400 --> 00:02:19,520
that goes along with it.

31
00:02:19,780 --> 00:02:26,080
So if we open it, we are going to see that this is a typescript class which has a property title which

32
00:02:26,080 --> 00:02:27,550
contains the name of the course.

33
00:02:27,730 --> 00:02:33,350
And we have here a decorator that identifies this as an angular component.

34
00:02:33,580 --> 00:02:40,630
We can also see that the application component e-mail is linked to this component file using the template

35
00:02:40,630 --> 00:02:41,890
Eurail property.

36
00:02:42,040 --> 00:02:50,020
And the component also has a style file, which is the application component that Cyesis file, which

37
00:02:50,020 --> 00:02:55,210
as the application was just scaffolded, is currently empty at this point.

38
00:02:55,220 --> 00:02:57,580
We can start to see what is going on here.

39
00:02:57,610 --> 00:03:04,390
So going back here to our indexed e-mail, we can see that angular the core module of the framework

40
00:03:04,720 --> 00:03:09,220
gives us the ability of creating our own custom HTML tags.

41
00:03:09,610 --> 00:03:16,570
Again, this application route is not a standard browser element we have created using a construct which

42
00:03:16,570 --> 00:03:20,990
is known as a component that we are going to dive into detail in the next few lessons.

43
00:03:21,310 --> 00:03:28,450
The component allows us to link a couple of styles and the template with some typescript logic.

44
00:03:28,750 --> 00:03:32,250
And here in the selector we have the app root tag.

45
00:03:32,270 --> 00:03:37,720
So this is the name of the tag that we can use here in our index, not HTML file.

46
00:03:37,960 --> 00:03:45,800
Notice also that going here to the template of our component, we have here this strange looking expression.

47
00:03:46,000 --> 00:03:50,260
Now the rest of the template is simple, plain HTML.

48
00:03:50,260 --> 00:03:55,260
But these expression here sort of stands out due to this syntax here.

49
00:03:55,480 --> 00:04:01,420
What's going on here is that we are retrieving here the value of title, which is angular.

50
00:04:01,420 --> 00:04:05,110
That course it's the name of our course repository.

51
00:04:05,440 --> 00:04:12,490
We are retrieving these not here from the template, but we are having this expression here evaluated

52
00:04:12,790 --> 00:04:20,440
at the level of this component so we can see that the content of this title very D member variable of

53
00:04:20,440 --> 00:04:28,840
the component class is available here for this expression here to grab a hold of and displayed these

54
00:04:28,840 --> 00:04:29,660
on the screen.

55
00:04:29,920 --> 00:04:35,920
This means that if we go here to our component class and we change the string here to something else,

56
00:04:35,920 --> 00:04:41,950
let's say that we change it to angular core deep dive, which is the name of this course, and we hit

57
00:04:42,070 --> 00:04:49,050
command s our control is we don't see that our application is immediately reloaded by the angular Seelie

58
00:04:49,060 --> 00:04:50,020
development server.

59
00:04:50,200 --> 00:04:57,370
And that we have now here on the screen the new title that we have just defined, as we can see, another

60
00:04:57,370 --> 00:05:00,190
key feature of Angular besides allowing us to.

61
00:05:00,260 --> 00:05:07,280
Create our own custom elements is to allow us to write our program in a way where we are clearly separating

62
00:05:07,280 --> 00:05:14,570
the data, also known as the model of our application from the e-mail that is being used to display

63
00:05:14,570 --> 00:05:16,130
that data on the screen.

64
00:05:16,310 --> 00:05:19,630
That e-mail is also known as The View.

65
00:05:19,820 --> 00:05:25,300
So in the case here of our component, our data is simply here, the title string.

66
00:05:25,580 --> 00:05:30,570
But this could potentially be a neat JavaScript object or array.

67
00:05:30,770 --> 00:05:33,760
The data is present here at the component.

68
00:05:33,770 --> 00:05:40,040
The component is responsible for retrieving the data and making it available here to The View.

69
00:05:40,250 --> 00:05:43,220
The view is represented by our template.

70
00:05:43,520 --> 00:05:51,230
Here we are defining the markup of our component and yet accessing the data also known as the model,

71
00:05:51,440 --> 00:05:59,300
using this expression syntax here, these devil curly brace syntax, which is known as the interpolation

72
00:05:59,300 --> 00:06:05,930
syntax and these special templates syntax is what allows us to access the data in our view.

73
00:06:06,140 --> 00:06:12,710
So this means that anything that is written here inside this block, delimited by these double curly

74
00:06:12,710 --> 00:06:19,400
braces is going to be considered a JavaScript expression that is going to be evaluated in the context

75
00:06:19,400 --> 00:06:21,540
of this component class here.

76
00:06:21,710 --> 00:06:28,430
Let's, for example, change here the title of this variable to something like coarse title and hit

77
00:06:28,430 --> 00:06:28,990
Save.

78
00:06:29,060 --> 00:06:32,600
Now we are going to see that nothing is getting represented here.

79
00:06:32,750 --> 00:06:38,870
This is normal because we are using here these interpolation expression to try to bind to a variable

80
00:06:38,870 --> 00:06:44,360
called title, and that does not exist anymore here in our application component.

81
00:06:44,570 --> 00:06:48,010
Instead, what we have here is a variable called curse title.

82
00:06:48,020 --> 00:06:54,380
So if we use that instead of here in our binding expression and we had control s we are going to see

83
00:06:54,380 --> 00:06:54,980
that now.

84
00:06:54,980 --> 00:06:58,130
We get here the correct title for the course.

85
00:06:58,340 --> 00:07:05,390
Notice that via the template binding expression we can access here any JavaScript object, for example,

86
00:07:05,390 --> 00:07:12,160
let's say that instead of having here our data in the course title variable, we would define instead

87
00:07:12,410 --> 00:07:16,500
a data object that contains several properties.

88
00:07:16,760 --> 00:07:20,060
This could be, for example, the multiple fields of a form.

89
00:07:20,060 --> 00:07:26,930
If we now add to this data object a title property, we can still display the correct title in the template.

90
00:07:26,930 --> 00:07:31,390
If we now hit Command s, we are going to see that nothing is getting displayed.

91
00:07:31,460 --> 00:07:34,640
This is not all because this variable here no longer exists.

92
00:07:34,790 --> 00:07:42,530
But if we now access the property data dot title, just like if we will access any JavaScript object,

93
00:07:42,770 --> 00:07:47,380
you can see that now we have again the correct data displayed on the screen.

94
00:07:47,540 --> 00:07:51,680
Let's now quickly summarize what we have learned in this initial lesson.

95
00:07:51,680 --> 00:07:55,280
We have learned the two key features of angular core.

96
00:07:55,430 --> 00:08:02,360
The main feature of angular core is the ability of defining our own custom HTML elements.

97
00:08:02,570 --> 00:08:08,580
This effectively allows us to extend the browser functionality with our own functionality.

98
00:08:08,750 --> 00:08:15,530
The second key property of angular core is the ability that it gives us to build our program in a way

99
00:08:15,530 --> 00:08:22,280
where our data available at the level of the component and our view, which is defined by the e-mail

100
00:08:22,280 --> 00:08:24,760
templates, are completely separate.

101
00:08:24,890 --> 00:08:26,960
These are in separate files.

102
00:08:27,170 --> 00:08:34,400
They use different languages and we can bind the two things together using the double curly brace Syntex.

103
00:08:34,400 --> 00:08:39,500
In the next lesson, we are going to learn a couple of other key features of ANGULAR.

104
00:08:39,590 --> 00:08:45,830
We are going to learn next about the angular change detection mechanism that allows us to keep our view

105
00:08:45,830 --> 00:08:49,100
and our model in sync at all times automatically.

106
00:08:49,250 --> 00:08:54,830
And we are going to learn about some of the security features that Angular has built in.