Skip to main content

AngularJS interview questions - Part 2

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
    1<ng-directive></ng-directive>
  • Attribute directives
    1<span ng-directive></span>
  • CSS class directives
    1<span class="ng-directive: expression;"></span>
  • Comment directives

    1<!-- directive: ng-directive expression -->

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.

Comments

Popular posts from this blog

How to create a Barcode Using PHP Barcode 128 Generator

A barcode is an optical, machine-readable, representation of data, the data usually describes something about the object that carries the barcode.We will use PHP to generate Barcode in this tutorial. In this script, we are using coding which will generate barcodes in barcode format Code 128 . First, we will create index.php which will ask for the user input for which Barcode has to be created PHP Barcode Generator <fieldset><legend>Detail Informations</legend><form action="createbarcode.php" method="post"><b>Enter Your Code </b><input name="barcode" type="text" /><input type="submit" value="Create Barcode" /></form></fieldset> Now we will create createbarcode.php which will call function from Barcode code128 class for creating barcode <? php include('barcode128.php'); // include php barcode 128 class // design our barcode display echo

Document Expired or Webpage has expired on back button

If you have a dinamic website and want to allow your visitors to use the back button after they sent a form with the post method, the best combination I found was: <?php header("Expires: Sat, 01 Jan 2000 00:00:00 GMT"); header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT"); header("Cache-Control: post-check=0, pre-check=0",false); session_cache_limiter("must-revalidate"); // and after you start the sessionsession_start(); ?> I try some combinations using header("Cache-Control: no-cache, must-revalidate"), but when clicking the back button, the last changes in the form back to their previous states. The combination above works fine with IE 6.x. I didn't test this with other browsers. When I try something like session_cache_limiter("nocache, must-revalidate") it doesn't work. The page only updates when I used the browser's refresh button. In dynamic web sites this is not g

How to Enable IMAP PHP in xampp

The imap extension comes as standard with the PHP installation. You just need to enable it in your php.ini   Enable IMAP in XAMPP: You need to configure your php.ini file to enable IMAP extension Search for the line ;extension=php_imap.dll and remove semicolon(;) and restart your xampp. The line should look like as mentioned below. extension=php_imap.dll Note : New php version does not have dll anymore. The default php.ini should already contain a line to load the extension but commented out: ;extension=imap Remove semicolon from above like below extension=imap Enable IMAP in Linux: If you are using LAMP server, First install IMAP using the command on terminal $ sudo apt-get install php5-imap To enable IMAP, run the following command. sudo phpenmod imap Restart apache server with below command sudo service apache2 restart