Angular Framework :The Introduction for absolute beginners

In this series of angular framework tutorial we will learn about all the concepts of angular framework. This this the first post for the series where we will get an introduction about the angular framework.

Angular is an application design framework and development platform for developing fast and complex single-page apps.

What is Angular?

Angular is a TypeScript-based programming platform. As a platform angular includes:

• A framework for developing scalable web applications based on components.
• A set of well-integrated libraries that cover a wide range of functionality. For example routing, form management, client-server communication, and more.
• A set of developer tools that will assist you in developing, building, testing, and updating your code.

The fundamentals of angular framework

This section covers the fundamental concepts behind Angular. Understanding these concepts will allow you to more successfully develop and build your applications.

* Components

Components are the basic building blocks to build an application. A TypeScript class with a @Component() decorator, an HTML template, and styles are combined to make a component. The @Component() decorator specifies the Angular-specific information shown below:

• A CSS selector that defines how the component is used in a template. HTML elements in your template that match this selector become instances of the component.
• An HTML template that instructs Angular how to render the component.
• An optional set of CSS styles that define the appearance of the template’s HTML elements.

* Templates

Every component has an HTML template that declares how that component renders. We can define the template either inline or by path of file.

Angular extends HTML with additional syntax that lets you insert dynamic values from your component. Angular automatically updates the rendered DOM when our component’s state changes. Another use of this feature is inserting dynamic text. Which can be seen in the following example.

<p>{{ message }}</p>

* Dependency injection

Dependency injection allows you to declare the dependencies of your TypeScript classes without taking care of their instantiation. Instead, Angular handles the instantiation for you.

Means if our typescript class is dependable on any other class. Then the concept of dependency injection come into the picture. Angular did not ask you to handle the initiation of that class instead of it treat it as an injectable class. Which means that all the requirements of that class to initiate are fulfil by the angular itself. Therefore on using a class in any other class wee don’t have to take any responsibility of initiation of that class.

This design pattern allows you to write more testable and flexible code. Even though understanding dependency injection is not critical to start using Angular.