Last updated on February 28, 2020
This post will help you to quickly get going with JavaScript Framework, Angular which wrote in Typescript. Here I would like to cover the top 5 frequently used JavaScript concepts across an Angular application.
As always, My single motto is good at fundamentals then the learning framework/library will not consume our time as much. NO need to worry about version upgrade which is happening every 6 months once for Angular as concepts are all common.
Even though Angular framework uses TypeScript heavily but still Javascript concepts are applicable. Because Typescript is a Superset of JavaScript. Let’s get into widely used concepts below,
Concepts
- Dependency Injection
- Decorator
- Rest API – Http Communication
- Building Class based components
- Observer
1. Dependency Injection
This is the most well-known pattern we use nowadays in all the JavaScript based library/framework/toolkit.
Definition
Before creating an instance of our class, we must pass the required dependency instances in order to create our class instance. We can achieve this in 3 different ways such as Constructor injection, Property level injection, Method level injection.
class UserComponent extends Component {
constructor(public auth: AuthenticateService) { }
}Here in Angular, we use constructor level injection.
2. Decorator pattern
This pattern is the basic construct or building block of an Angular application.
Definition
We force our class to add certain behavior at run-time in the form of passing our class as an input to the Decorator class. We use @Component @Directive and so on.
3. Rest API – Http Communication
As we all know, There is no JavaScript library/framework without having HTTP protocol support mechanism when comes to building UI.
- RxJS – Observable
- Native Promise
- Fetch API
The above 3 things will help us to work with Rest API data over the network. But here Angular with RxJS Observable pattern is the preferred one over the other two since Event-driven handling.
Knowing and Consuming Promise/Fetch API would be an added advantage but learning Observable pattern is also crucial one. In short Observable will get the data over the network in a Stream method (continuously getting) and it’s can be cancelled.
Yes the other two approaches cannot be cancelled once triggered, whereas fetch api will enable us to cancel it with the help of AbortController class and Signal Property.
4. Building Class based components
@Component({})
class UserComponent implements OnInit {
constructor() {}
}Recent releases of ECMAScrip, we have full support of ES6 Class Based syntax to write our code in an Object Oriented way. This way enables us to use property with access-specifiers such as Public, Private.
5. Observer
This pattern and Decorator is one of the design pattern in JavaScript language.
Definition
This pattern helps us to track one Object state changes and the changes will flow down to all its dependency objects whenever that Object state change happens.
Note
Whatever we’ve covered in Frequently Used JS Concepts in React.js blog post, those are all applicable to Angular also since common thing is JavaScript.