Angular is a platform or tool that you can use to build web applications.

Inside of that browser window.

We can see our angular application, but what is inside of an angular
application?

There are three building blocks in general.

1. Component: a component is what the user can actually see and

interact with

There is also data binding happening between the input fields, for
example, that we display to a user and the data that gets stored in the
components associated code and storage.
Please notice that we can not only have a single component, but we can
also have many components.
Usually, you would create one component for each functionality.

So, let's say we run an employee management system, then we could

have one component to list all the
employees and we could also have another component for creating an
employee, for example.
So, we would have those two components.
Just keep in mind, we can have many components, not only a single one.

2. Services: we got services, and services are here to handle our

data.
We use them to communicate with rest APIs to load data via a
database, and then they can spread all
of those loaded data and information to all of our components.

And then for encapsulation we use modules so that our entire

application is nice and well structured.
So let's just assume that inside of our application we are not only handling
employees, we are also
handling invoices, for example.
Then we could have like tons of components, some of them for the
employee management, some of them
for the invoices, and then we could create a module for employee and a
module for invoices.

3. modules has well declared or defined those components.

So in easy words, we use modules to structure our angular
application in a nice and easy to understand
way.

All righty, we are almost done.

But there are two more things to really mention.
Angular or our Angular application is a so-called single page application,
right?
You can see that on screen.

So in that way, when we first load the page, we load it one time, the entire
application.
But then afterwards, as soon as we go to another website in our
application, so we change the route,
for example, or we add something to our application only the changes are
getting updated.
In that way we heavily reduce the loading times because we do not have
to reload the entire application
all the time.
We only update what's getting changed right.
And therefore, we also reduce the server load because we don't have to
update so much data.
And finally, our angular application runs in a web server.

So if we run it locally, it's called the localhost.

So our Angular application would run in a local host.
Then we can enter this localhost well URL inside of our browser to get
access to the Angular application.
Now in order to well get started with Angular, to start the web server to
well create an angular project
and to host it we need the angular cli, the command line interface, right?
And this is a node package and therefore we have to install NodeJS, which
is the way on how you can
run JavaScript and TypeScript on web servers, right?
This is why we need it.
And in addition to that we need NPM, but that one comes automatically
with NodeJS to install the angular
CLI and all the packages that we need to get started with the angular
development.
So next up, let's install NodeJS and the code editor so that we can create
our very first angular project.
Setup angular
Install LTS version Node JS
node -v
visual studio code(no visual studio)

If you still want to install the lastet angular version you will HAVE to add
an additional flag while project creation in order to follow the course: ng
new my-app --no-standalone

Again, please install Angular version 16 using npm i

@angular/[email protected] --location=global as shown in the next
lesson.

Enjoy the course!

npm i @angular/cli
node package manager , install
to install specific version :
npm install @angular/cli!16.1.6 –location=global

creating and servig an angular application

ng new appointment-app
?would you like routing ?y/n
n

we don’t use routing now and we use css

cd appoint-app
ng serve

File-> open studio

Code . (this will open up the folder that we have selected)

Ng serve
ng serve -o(I’ll open the browser)

Angular under the hood

Angulat.json : here we can setup some configurations for angular applications itself

One of the most important part would be the configurations

angular.Json file here.

We can well set up some configurations for our angular application itself.

One of the most important parts, for example, would be the

configurations.

So if we are serving for different environments, for example, our client or

business has an development
environment, a staging environment and a production environment.
We can specify specific configurations for each of those environments
right here, for example, we'll

So the angular.Json simply holds some information about our angular

project and well, some more configuration things regarding to it.

We have the packages.Json or package.Json

This one is related to NodeJS or to NPM.
And as you can see, we got some other information here for NG server
building.
But the most important part is the dependencies.
So our application, if we would hand this over to another developer, we
would not send all the node modules etcetera.

We would simply send a very clean version of our application.

He will then use NodeJS, write down NPM install basically to install all of
the dependencies that we
can see right here.

So our application right now already has tons of dependencies to angular

core angular forms, angular animations and so much more.
Right?
You can take a look at this.
So here inside of the package.Json, you can find your dependencies.
That's the most important part.
Great.
So the package lock is not that important.
The config, we can skip all of this.
We got the git ignore.
So if you're interested in version control using GitHub for example, here
we have all the files that
are getting ignored by a version control system like git.
So all the files inside of the slash dist folder, for example, would not get
committed to our repository.
But if you're not familiar with version control, that's not that important
right now.
All righty.
So then we have the angular folder.
There was just some configuration inside, some meta files that we don't
really need.
Same for the VS code.
This is related to the code editor.
We have the node modules folder inside here.
We have all of our packages and dependencies, not only like the,
the, the link to it, but the real
packages with all of its content.

Now the most important folder for sure is the source folder, the SRC.
This is where we are working in basically all the time.

And inside here we have the index.html.

And you can see one very specific thing and important thing.
The app- route for our Angular application where basically all of the
action takes place.
This is very simple HTML, we've got a header here and we have a body
and then the body closes and the HTML closes and inside of the body you
can see the app route.

And this is a custom HTML tag, right?

App root is a selector that you probably haven't seen in plain

HTML.

So app root, let's just pay attention on this.

The index HTML in a web application typically is the main page,
the home page, right?
And here we are injecting the app root into the body.
Let me just close that.
Let's just keep that information in mind for a second.app
Now open up the app folder here.
And our application has automatically created or the CLI has created one
component.

I already told you that components are the building blocks, right
of our angular application.

And our application has one component right now, our root
component, the so called app component.
So take a look here at the app components, the TypeScript file app
components.
Take a look at that one.

This is your first building block.

This is your first component that automatically got created.
You can see this indicated by the decorator here at component.
It is a TypeScript class.
It is called app component.
We are setting a property here.
But the very important part is that inside of this decorator at
component here, which is turning this
class into a component, we can find three informations.
We can find the so-called selector, we can find the template URL,
and we can find the style URLs.
The selector is basically the HTML tag that you can now use to
render this component.
So here we got a selector for app root.
Oh, app root.

Right open up the index.html again, you can see app root, right?
So what he's basically doing is saying, okay, inside here I want to show
the app root component and
then inside of our app components we can see yeah, the selector for this
component here for the app
component is called app root.
Right?
And then associated to this, we got the app components HTML, which is
that file right here and the
app component dot CSS, the correlated styling or the related styling for
this specific component.
So let's open up the app.component.html and voila, you can find all of
the information and styling
and also the content.
So this is how Angular is basically loading this template, right?

It's showing a component by its selector, by its custom HTML selector.

And if we want to now clean our application, which is what we should

always do when we create a new
application, we can simply remove everything.

So inside of that app component, let's just control A and let's delete
everything.
So save it.

The hot reload mechanism will update the page and now it is
empty.
So now we can create our application from scratch.
I just wanted to explain you how well Angular is basically working
under the hood.

Take a look at the app component, CSS.

It is empty because inside of the HTML there were some CSS styling
defined.

The HTML is empty.

We have the dot spec dot ts file.

This is for unit testing.

And then we have the app component which really takes care of, well,
specifying this component.
We will talk about components for sure in depth, but now we have cleaned
our application.
You have already discovered the component that's getting created when
you create a new angular project.
And now it is time to dive a little bit deeper into components so that you
are able to create your own
component for our appointment application.
Ng generate interface models/appointments