Angular Interview Questions part 2

 1. Differentiate between dependencies and dev dependencies.

The major difference between these two is the dev dependencies are required at development phase to build your bundle while dependencies are also required at the runtime. Dev dependencies make the development easy and fast, while dependencies are such things which makes the app to run properly.

Some examples of Dev dependencies are angular/cli, ESlint, Nodemon, etc.

Some examples of dependencies are angular, express, jquery,etc.


2. Explain view, components, modules and models.

View : View is the presentation layer that displays content to the user .

Component : Component is the intermediary between view and model which bind  them together. Anything that needs to be shared between view and model goes through component.

Module : Module is a group of components and directives that are integrated together to run the angular app.

Model : Model is a class that contain business logic which is bind to view through component.


3. What is the industry naming convention for Angular file and folder?

When doing any project it becomes very difficult to manage all the files and folders if we do not follow any standard convention. So angular has also a convention to be followed that makes a lot easier to maintain the project files and folders. Angular project is divided into various modules and components. Each folder has its own view, component, module, services, and models. The name of any file is written as foldername.component.extenion(app.component.ts or app.component.html or app.component.css).

The folder structure of an angular project is:



4. How does Angular application bootstrap (start) ?

Angular application is launched when we hit the command ng serve from the angular/cli terminal then following things occur in a sequence;

1. index.html is hit first .

2. index.html then makes a call to main.ts

3. main.ts file bootstraps the app.module.ts file

4. app.module.ts file makes a call to app.component.ts file

5. app.component.ts file loads its view i.e. app.component.html.

6. Lastly the app.component.html template is injected into the index html file and we are able to see our app running in the browser.


5. What is a decorator?

Decorators are the functions that separate modification or decoration of a class without modifying the original source code. We can also say that decorator marks the class as component class and also provide the metadata about how a component should be processed, instantiated and used during runtime.


6. What is a selector?

Selector is a parameter of a decorator that provides the inject value of a template to the index.html file. It makes view of  the component possible.


7. Explain the importance of templateURL.

 templateURL has the path of our UI that we have designed as our view. Having only selector is not enough we need to specify where is our view that needs to be injected into index.html through the selector.


Video Tutorial: