Introduction to Angular
Angular is a UI framework for building SPAs (Single Page Applications). Earlier in 2010 Angular JS was released, since its release, it has become the popular framework for building Single Page Applications.
Earlier it was only a JS library (Angular JS) but due to some performance issues, Angular framework was introduced but it is not an up-gradation to Angular JS. Angular is a completely rewritten framework named as Angular 2 (Current version Angular 9).
Angular applications can be written using JavaScript ES5, ES6 syntax but it is recommended to write Angular apps using TypeScript which is a superset of JavaScript so that you can use all the features, tools provided by TypeScript in your Angular apps.
The building blocks of Angular Framework
1. Modules
Angular provides you a modular design to organize your application better. In Angular, you create your modules using @NgModule decorator. Angular provides you many inbuilt modules such as FormsModule, RouterModule, etc. Also, you can import third-party modules into your project.
Angular provides you a modular design to organize your application better. In Angular, you create your modules using @NgModule decorator. Angular provides you many inbuilt modules such as FormsModule, RouterModule, etc. Also, you can import third-party modules into your project.
2. Components
Angular Components are the data structure for your application. The only purpose of the components in your application is to provide data to your HTML view using data binding. In Angular, you define a TypeScript class as a Component using the @Component decorator.
Angular Components are the data structure for your application. The only purpose of the components in your application is to provide data to your HTML view using data binding. In Angular, you define a TypeScript class as a Component using the @Component decorator.
3. Services
In Angular, It's always a good practice to separate the data fetching (from the database or the server) logic from the Components as the component should be only responsible to provide data to the view. The component can assign such tasks to the Services such as fetching data from the database, user input validation, etc. This way our component classes become more readable, leaner, and efficient.
In Angular, It's always a good practice to separate the data fetching (from the database or the server) logic from the Components as the component should be only responsible to provide data to the view. The component can assign such tasks to the Services such as fetching data from the database, user input validation, etc. This way our component classes become more readable, leaner, and efficient.
4. Routing
The angular framework was introduced to create Single Page Applications (SPAs), which means the user remains on the single page but the view changes dynamically according to what the user requests. To handle the navigation from one view to another, Angular provides you the Routing.
The angular framework was introduced to create Single Page Applications (SPAs), which means the user remains on the single page but the view changes dynamically according to what the user requests. To handle the navigation from one view to another, Angular provides you the Routing.
5. Directives
Using Directives, you can change the behavior of the Html DOM elements. Angular directives are provided to extend the features of Html elements. Angular has its own directives to add some functionality to your application or you can also create your own directives using @Directive decorator.
6. Dependency Injection
Dependency Injection in Angular helps you to increase modularity in your application. You can write a certain logic in the service and inject it into the components. Service is the dependency for your app and you are injecting it to the component using Dependency Injection.
Dependency Injection in Angular helps you to increase modularity in your application. You can write a certain logic in the service and inject it into the components. Service is the dependency for your app and you are injecting it to the component using Dependency Injection.
7. Pipes
The angular pipe takes data as input and transforms it into the desired output. For example, "uppercase" is one of the inbuilt pipes provided by Angular, which converts the text to the Uppercase text. You can also create your custom pipes using @Pipe Decorator.
The angular pipe takes data as input and transforms it into the desired output. For example, "uppercase" is one of the inbuilt pipes provided by Angular, which converts the text to the Uppercase text. You can also create your custom pipes using @Pipe Decorator.
8. Observables
Observables in Angular are used to handle asynchronous operations efficiently.
0 Comments