Question

What are the main building blocks of an Angular application? Explain with the pictorial diagram of Angular architecture.

Answer 1

Following are the main building blocks of an Angular application. You can see them in the following picture:

---

20) What is the difference between Observables and Promises in Angular?

In Angular, as soon as we make a promise, the execution takes place, but this is not the case with observables because they are lazy. It means nothing happens until a subscription is made.

Promise	Observable
It emits a single value.	It emits multiple values over a period of time.
Not Lazy	Lazy. An observable is not called until we subscribe to the observable.
We can not cancel it.	We can cancel it by using the unsubscribe() method.
	Observable provides operators like map, forEach, filter, reduce, retry, retryWhen etc.

Let's understand it by an example:

1. const observable = rxjs.Observable.create(observer => {  
2.         console.log('This is what inside an observable');  
3.         observer.next('Hello madAnswer');  
4.         observer.complete();  
5.       });  
6.       console.log('Before subscribing an Observable');  
7.       observable.subscribe((message)=> console.log(message));   

When you run the above Observable, you can see the following messages displayed in the following order:

1. Before subscribing an Observable  
2. This is what inside an observable  
3. Hello Madanswer  

Here, you can see that observables are lazy. Observable runs only when someone subscribes to them. That's why the message "Before subscribing an Observable" is displayed ahead of the message inside the observable.

Now see the example of a Promise:

1. const promise = new Promise((resolve, reject) => {  
2.         console.log('This is what written inside promise');  
3.         resolve('Hello madanswer');  
4.       });  
5.       console.log('Before calling then method on Promise');  
6.       greetingPoster.then(message => console.log(message));   

When you run the above Promise, you will see the messages displayed in the following order:

1. This is what written inside Promise  
2. Before calling then method on Promise  
3. Hello Madanswer 

Here, you can see that the message inside Promise is displayed first. This means that the Promise runs first, and then the method is called.

The next difference between them is that Promises are always asynchronous; even when the Promise is immediately resolved. On the other hand, an Observable can be both synchronous and asynchronous.

In the case of the above example, observable is synchronous. Let's see the case where an observable can be asynchronous:

1. const observable = rxjs.Observable.create(observer => {  
2.   setTimeout(()=>{  
3.       observer.next('Hello madanswer');  
4.       observer.complete();  
5.   },3000)  
6. });  
7. console.log('Before calling subscribe on an Observable');  
8. observable.subscribe((data)=> console.log(data));  
9. console.log('After calling subscribe on an Observable');   

When you run the above observable, you will see the messages in the following order:

1. Before calling subscribe on an Observable  
2. After calling subscribe on an Observable  
3. Hello madanswer