What is Angular?

What is Angular?

It is a framework and platform used to build SPA (Single Page Applications) using. It is written using HTML and Typescript.

• It is based on a Component based framework that aides in building highly scalable web applications.
• It has an array of in-built libraries which help with routing, forms, HTTP connections, etc.
• It also has a range of developer tools to make developing, testing and deploying the applications easier for the developer.

Angular – Building Blocks

1. Components
2. Templates
3. Services
4. DI (Dependency Injection)

Components

Components are the building blocks of an Angular application. It’s a single unit that has some logic, a view, and some optional styling.

A component is defined in TypeScript by creating a Class with @Component decorator. The decorator takes a few attributes, which inform Angular on how to process the class. The primary attributes are:

• A selector that defines how the component is going to be used in other components.
• A HTML template that contains elements and other components that make up the view of the page.
• An optional set of CSS styles, to define the appearance of the elements.

Angular offers encapsulation for styling, which makes sure that styles are scoped to specific components, and don’t overlap across other components.

Click here to read more on Angular components.

Templates

Angular uses HTML elements to describe how a view should render. It also extends the basic HTML to support dynamic content and actions.

Binding is used to support dynamic content. There are 3 types of binding:

1. Interpolation
2. Property Binding
3. Event Binding

Learn more on binding here.

Services

Services contains line of code and functionalities that are reusable from different components across the application. This helps with abstraction of logic, and also data that can be hosted independently (i.e. Database) and needs to be shared across other components.

DI (Dependency Injection)

While using service, if we use instances of those, then it’s quite possible that data is not consistent while accessing from different parts of the application. This is because different components of the application might be using different instances of the Service class. To avoid this, Service classes are never instantiated directly. Instead, the instantiation responsibility is passed on to Angular through a process which is known as Dependency Injection. We need to only provide the services to the constructor of the class where we need the Service, and Angular will pass on the right instance to it.

// Create component without folder
ng g c header --flat

For more information on Angular, visit here.