Hello, everyone, and welcome back in the last listen, we had our first angular application up and
running.
Let's take a moment to explore it and discuss what is angular and what is the key benefit of the angular
core module.
Let's have a look here at the e-mail of our application.
So as you can see, it's a very simple page with an image and some text and a couple of links here in
the bottom.
This page that we see here on the screen corresponds here to the index note e-mail file that you can
find here inside our source directory.
Now, if we look closely at this file, we're going to notice that here the title of this page indeed
corresponds to the title that we have here in the browser.
So this is indeed the correct page that is getting served here.
But if we look at the body here of the page, we're going to see that there is really nothing here other
than this application route, custom HTML tag.
So all the title, the image and the links that we have here, they are all being created via this tag.
Let's switch to a larger window and expect this application using the chrome, their tools.
If we have a look here, for example, at the title, we are going to see that this is indeed inside
the application root tag that we saw in our indexed e-mail.
And the same goes for the rest of the page.
The links that we have here, all of this is contained inside our application route.
The question now is where is all this e-mail coming from?
Because as we have seen, this is not coming here from the index of the e-mail page.
Our application route tag does not have anything contained inside it.
It's empty.
If we have a look here inside the app folder of our application, we are going to see that all this
e-mail is coming here from this application component, dot e-mail file.
So as you can see, we have here the title.
We have the image and we have here the links in the menu.
Also in this component e-mail file, these component e-mail file also has a component typescript file
that goes along with it.
So if we open it, we are going to see that this is a typescript class which has a property title which
contains the name of the course.
And we have here a decorator that identifies this as an angular component.
We can also see that the application component e-mail is linked to this component file using the template
Eurail property.
And the component also has a style file, which is the application component that Cyesis file, which
as the application was just scaffolded, is currently empty at this point.
We can start to see what is going on here.
So going back here to our indexed e-mail, we can see that angular the core module of the framework
gives us the ability of creating our own custom HTML tags.
Again, this application route is not a standard browser element we have created using a construct which
is known as a component that we are going to dive into detail in the next few lessons.
The component allows us to link a couple of styles and the template with some typescript logic.
And here in the selector we have the app root tag.
So this is the name of the tag that we can use here in our index, not HTML file.
Notice also that going here to the template of our component, we have here this strange looking expression.
Now the rest of the template is simple, plain HTML.
But these expression here sort of stands out due to this syntax here.
What's going on here is that we are retrieving here the value of title, which is angular.
That course it's the name of our course repository.
We are retrieving these not here from the template, but we are having this expression here evaluated
at the level of this component so we can see that the content of this title very D member variable of
the component class is available here for this expression here to grab a hold of and displayed these
on the screen.
This means that if we go here to our component class and we change the string here to something else,
let's say that we change it to angular core deep dive, which is the name of this course, and we hit
command s our control is we don't see that our application is immediately reloaded by the angular Seelie
development server.
And that we have now here on the screen the new title that we have just defined, as we can see, another
key feature of Angular besides allowing us to.
Create our own custom elements is to allow us to write our program in a way where we are clearly separating
the data, also known as the model of our application from the e-mail that is being used to display
that data on the screen.
That e-mail is also known as The View.
So in the case here of our component, our data is simply here, the title string.
But this could potentially be a neat JavaScript object or array.
The data is present here at the component.
The component is responsible for retrieving the data and making it available here to The View.
The view is represented by our template.
Here we are defining the markup of our component and yet accessing the data also known as the model,
using this expression syntax here, these devil curly brace syntax, which is known as the interpolation
syntax and these special templates syntax is what allows us to access the data in our view.
So this means that anything that is written here inside this block, delimited by these double curly
braces is going to be considered a JavaScript expression that is going to be evaluated in the context
of this component class here.
Let's, for example, change here the title of this variable to something like coarse title and hit
Save.
Now we are going to see that nothing is getting represented here.
This is normal because we are using here these interpolation expression to try to bind to a variable
called title, and that does not exist anymore here in our application component.
Instead, what we have here is a variable called curse title.
So if we use that instead of here in our binding expression and we had control s we are going to see
that now.
We get here the correct title for the course.
Notice that via the template binding expression we can access here any JavaScript object, for example,
let's say that instead of having here our data in the course title variable, we would define instead
a data object that contains several properties.
This could be, for example, the multiple fields of a form.
If we now add to this data object a title property, we can still display the correct title in the template.
If we now hit Command s, we are going to see that nothing is getting displayed.
This is not all because this variable here no longer exists.
But if we now access the property data dot title, just like if we will access any JavaScript object,
you can see that now we have again the correct data displayed on the screen.
Let's now quickly summarize what we have learned in this initial lesson.
We have learned the two key features of angular core.
The main feature of angular core is the ability of defining our own custom HTML elements.
This effectively allows us to extend the browser functionality with our own functionality.
The second key property of angular core is the ability that it gives us to build our program in a way
where our data available at the level of the component and our view, which is defined by the e-mail
templates, are completely separate.
These are in separate files.
They use different languages and we can bind the two things together using the double curly brace Syntex.
In the next lesson, we are going to learn a couple of other key features of ANGULAR.
We are going to learn next about the angular change detection mechanism that allows us to keep our view
and our model in sync at all times automatically.
And we are going to learn about some of the security features that Angular has built in.