Let us get an overview of Angular. Angular is a client side JavaScript framework. It is used for creating single page web applications that is spa FPA. Angular applications can be built using ESP. Our TypeScript, what we will be using for creating Angular applications is TypeScript only. What is the advantage of TypeScript?

TypeScript uses class based object oriented programming and also it supports attic binding. By working with Angular itself, you will be learning how to use TypeScript syntax and command. Let us see the architecture of Angular. Angular applications are modular in nature. These are the building blocks of Angular modules component template directives and services modules, the logical structuring of your application is called us modules. So, when you are creating an Angular application you can create your own modules.

Next component components are nothing but simple classes. These classes will have their own instance variables and instance methods. These components will have their own configuration details, which are nothing but decorators. The decorators you I mean, the decorators are nothing but the metadata about this component. Let me just show it over here. I have got a component about a component I have got metadata what exactly it is, it is nothing but a decorator, which gives information about this component.

That is, when they call this component which HTML page should open So CSS that should be applied for this particular component, what is the name of this component, all these informations related to the component is given in this metadata. Next template template defines the UI of your application that disturb you part. When you call a component, the corresponding view page, or the template will be shown as our RCA output. So you can have a look here I've got the component when I call this component, the corresponding template will be shown. When you are working with an Angular application, it works on the concept of data binding, that is passing the data from the component class to the view and from the view to the component class. That is from the component to the template from the template to the component.

Data Binding in Angular can be achieved in different ways using property binding style binding, class binding even binding interpolations and so on. So, in this case you can see this, whenever you want to pass the data from your view that is from the HTML page to the component, you go in for even binding. Whenever you want to pass the data from your class from your TypeScript class to the template, you go in for property binding. So, this is our component and template next directive that is to help to extend the power of HTML. It can be done by adding new attributes to your HTML element, you know what are the attributes the basic attributes for HTML elements, say for example, if you use input tag type to say HTML element name is he sorry, type HTML attribute name if HTML attribute status HTML attributes together with that, you can add the attributes that are available in Angular.

So there are two types of these attributes are called us directives. And there are two types of directives mainly structural directive and attribute directive. These directives has to change the structure of your Angular application by adding or removing the components in your view page that is in your template. There's a condition either I can add a component, or I can remove a component, I can add a chunk of code or I can remove the chunk of code. And again, in case of attribute directives, I can change the appearance and the behavior of a DOM element are these are achieved with the help of this director. Again, here is my directive.

This directive also can give its own configuration details using metadata which is nothing but a decorator. Next, is a set of code which is shot by my Simple components, say for example, you have created multiple components for your Angular application, all these components want to perform one particular logic in snap ighting it in all the components, I can put it in a separate place, which is nothing but services from your Angular application, if you want to connect to the back end, in start connecting it from each and every individual component, you can do it from your services. Let me show you the services part here is my services. This is a set of code which will be shared by all the components, these services will be injected to the component automatically by Angular application, that concept is called dependency injection. So, you can have a look I have got the module component module service module function module one module value, that is dialer application can be divided into modules.

So this is about the angular architecture. Why We will be learning about Angular in this courses, how to create an Angular application, then how to create components? What are the different data bindings that are available, how to create and work with directors, how to create services and inject the services to components. Once you have learned all these concepts, you can create a nice Angular application, which is nothing but a spa single page web application. This is all about Angular architecture. In the next session, let us learn how to install and work with Angular CLA.

Thank you.