Latest AngularJS interview questions – Part 2
Latest AngularJS interview questions - Part 1
Latest AngularJS interview questions - Part 3
Latest AngularJS interview questions - Part 4
.png)
Q11. What are templates in AngularJS?
Ans: In Angular, templates are written with HTML that contains Angular-specific elements and attributes. Angular combines the template with information from the model and controller to render the dynamic view that a user sees in the browser. In other words, if your HTML page is having some Angular specific elements/attributes it becomes a template in AngularJS.
Q12. What are directives in AngularJS?
Ans: Directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS to attach a specified behavior to that DOM element or even transform the DOM element and its children. When AngularJS finds the directive at the time of rendering then it attaches the requested behavior to the DOM element. Angular comes with a set of these directives built-in, like ngBind, ngModel, and ngClass.
Q13. Can we create our own directives?
Ans: YES. AngularJS allows us to create our own custom directive.
Q14. What are different type or classification of directives?
Ans: AngularJS directives can be classified in 4 different types .
- Element directives
- Attribute directives
<span ng-directive></span>
- CSS class directives
<span class="ng-directive: expression;"></span>
- Comment directives
Q15. What is the name of directive is used to bootstrap an angular app?
Ans: ng-app directive is used to auto-bootstrap an AngularJS application. The ng-app directive defines the root element of the application and is typically present in the root element of the page - e.g. on the <body> or <html> tags.
Q16. Can AngularJS have multiple ng-app directives in a single page?
Ans: The answer is NO. Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. If you have placed another ng-app directive then it will not be processed by AngularJS. You need to manually bootstrap the second app, instead of using second ng-app directive. Read How to define multiple angular apps on the same page?
Q17. Can angular applications (ng-app) be nested within each other?
Ans: NO. AngularJS applications cannot be nested within each other.
Q18. Can you bootstrap multiple angular applications on same element?
Ans: NO. If you try to do that then it will show an error "App Already Bootstrapped with this Element". This usually happens when you accidentally use both ng-app and angular.bootstrap to bootstrap an application. You can also get this error if you accidentally load AngularJS itself more than once.
Q19. In how many different ways, you can define a directive and what is the best practice?
Ans: Angular generally prefers camelCase for directives. But since HTML is not case-sensitive so it refers to directive in DOM in lower case form, delimited by dash (eg. ng-app). But when Angular complies then it normalize the directives.
Below are example of valid directive declaration.
- ng-model
- ngModel
- ng:model
- ng_model
- data-ng-model
- x-ng-model
The normalization process is as follows:
1. Strip x- and data- from the front of the element/attributes.
2. Convert the :, -, or _-delimited name to camelCase.
The best practice to use dash-delimited (ng-model) or directly camelCase form (ngModel). If you are using HTML validation tool, then it is advised to use data- prefixed version. And it also answers another question which is "Difference between ng-* and data-ng-*".
Q20. Mention some angularJS directives and their purpose?
Ans: The beauty of AngularJS directives is that they are self explainatory. By just looking at directive name, you will get the idea about purpose and use of directive. Below are some mostly used directives.
ng-app : Initializes application.
ng-model : Binds HTML controls to application data.
ng-Controller : Attaches a controller class to view.
ng-repeat : Bind repeated data HTML elements. Its like a for loop.
ng-if : Bind HTML elements with condition.
ng-show : Used to show the HTML elements.
ng-hide : Used to hide the HTML elements.
ng-class : Used to assign CSS class.
ng-src : Used to pass the URL image etc.
Event Listeners
ng-click : Click event to bind on HTML elements.
ng-dbl-click
Mouse event listeners
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
Keyboard event listeners
ng-keydown
ng-keyup
ng-keypress
ng-change
It's a long list. You can find about all the directives here.
That completes Part-2 as well. Keep visiting for upcoming set of interview questions and answers. You can also subscribe to RSS feed, follow us on Facebook and twitter to get the updates about this blog.
Also read,
Latest AngularJS interview questions - Part 1
Latest AngularJS interview questions - Part 3
Latest AngularJS interview questions - Part 4
You can also Download jQuery Interview Questions free eBook.
