{"id":48088,"date":"2018-01-30T04:09:49","date_gmt":"2018-01-29T22:39:49","guid":{"rendered":"http:\/\/blog.odango.com\/?p=48088"},"modified":"2023-02-03T17:43:47","modified_gmt":"2023-02-03T12:13:47","slug":"angularjs-interview-questions-and-answers","status":"publish","type":"post","link":"https:\/\/asha24.net\/blog\/angularjs-interview-questions-and-answers\/","title":{"rendered":"AngularJS Interview Questions and Answers"},"content":{"rendered":"\n[et_pb_section bb_built=”1″ next_background_color=”#000000″][et_pb_row][et_pb_column type=”4_4″][et_pb_post_title _builder_version=”3.0.106″ title=”on” meta=”off” author=”on” date=”on” categories=”on” comments=”on” featured_image=”off” featured_placement=”below” text_color=”dark” text_background=”off” title_font=”Titillium Web||||||||” title_font_size=”47″ title_font_size_tablet=”40″ title_font_size_phone=”35″ title_font_size_last_edited=”on|desktop” title_text_color=”rgba(0,0,0,0.8)” title_text_align=”left” text_shadow_horizontal_length=”0.08em” text_shadow_vertical_length=”0.08em” text_shadow_blur_strength=”0.08em” title_text_shadow_horizontal_length=”0.08em” title_text_shadow_vertical_length=”0.08em” custom_margin=”|||10%” \/][\/et_pb_column][\/et_pb_row][et_pb_row][et_pb_column type=”4_4″][et_pb_text _builder_version=”3.0.106″ background_layout=”light” text_font=”Titillium Web|300|||||||” text_font_size=”20″ text_font_size_last_edited=”on|desktop” text_text_color=”rgba(0,0,0,0.8)” text_line_height=”1.6em” max_width=”800px” custom_margin=”|||10%” text_line_height_last_edited=”off|phone” max_width_last_edited=”off|phone” custom_margin_last_edited=”off|desktop”]\r\n\r\n1) What is AngularJS?\r\nAns:<\/strong>\u00a0AngularJS is an open-source JavaScript framework developed by Google. It helps you to create single-page applications or one-page web applications that only require HTML, CSS, and JavaScript on the client side. It is based on MV-* pattern and allow you to build well structured, easily testable, and maintainable front-end applications.\r\nAngularJS has changed the way to web development. It is not based on jQuery to perform its operations. In spite of using ASP.NET Web form, ASP.NET MVC, PHP, JSP, Ruby on Rails for web development, you can do your complete web development by using most powerful and adaptive JavaScript Framework AngularJS. There is no doubt, JavaScript frameworks like AngularJS, Ember etc. are the future of web development.\r\n\r\n
\r\n\r\n2) Why use AngularJS?\r\nAns:<\/strong>\u00a0There are following reasons to choose AngularJS as a web development framework:\r\n\r\nIt is based on MVC pattern which helps you to organize your web apps or web application properly.\r\nIt extends HTML by attaching directives to your HTML markup with new attributes or tags and expressions in order to define very powerful templates.\r\nIt also allows you to create your own directives, making reusable components that fill your needs and abstract your DOM manipulation logic.\r\nIt supports two-way data binding i.e. connects your HTML (views) to your JavaScript objects (models) seamlessly. In this way, any change in the model will update the view and vice versa without any DOM manipulation or event handling.\r\nIt encapsulates the behavior of your application in controllers which are instantiated with the help of dependency injection.\r\nIt supports services that can be injected into your controllers to use some utility code to fulfill your need.\r\nFor example, it provides $http service to communicate with REST service.\r\n\r\nIt supports dependency injection which helps you to test your angular app code very easily.\r\nAlso, AngularJS is a mature community to help you. It has wide support over the internet.\r\n\r\n
\r\n\r\n3) Why is this project called “AngularJS”?\r\nAns:<\/strong>\u00a0Html has angle brackets i.e. <,> and ng sound like Angular. That\u2019s why it is called AngularJS.\r\n\r\n
\r\n\r\n4) What are the advantages of AngularJS?\r\nAns:\u00a0<\/strong>There are following advantages of AngularJS:\r\n\r\nData Binding –\u00a0<\/strong>AngularJS provides a powerful data binding mechanism to bind data to HTML elements by using the scope.\r\nCustomize & Extensible –<\/strong>\u00a0AngularJS is customized and extensible as per your requirement. You can create your own custom components like directives, services etc.\r\nCode Reusability –\u00a0<\/strong>AngularJS allows you to write code which can be reused. For example, a custom directive which you can reuse.\r\nSupport \u2013<\/strong>\u00a0AngularJS is a mature community to help you. It has wide support over the internet. Also, AngularJS is supported by Google which gives it an advantage.\r\nCompatibility –<\/strong>\u00a0AngularJS is based on JavaScript which makes it easier to integrate with any other JavaScript library and runnable on browsers like IE, Opera, FF, Safari, Chrome etc.\r\nTesting –<\/strong>\u00a0AngularJS is designed to be testable so that you can test your AngularJS app components as easy as possible. It has dependency injection at its core, which makes it easy to test.\r\n\r\n
\r\n\r\n5) How is AngularJS different from other JavaScript Framework?\r\nAns:<\/strong>\u00a0Today, AngularJS is the most popular and dominant JavaScript framework for professional web development. It is well suited for small, large and any sized web app and web application.\r\n\r\nAngularJS is different from other JavaScript framework in following ways:\r\n\r\nAngularJS mark-up lives in the DOM.\r\nAngularJS uses plain old JavaScript objects (POJO).\r\nAngularJS is leveraged with Dependency Injection.\r\n\r\n
\r\n\r\n6) What IDEs can you use for AngularJS development?\r\nAns:<\/strong>\u00a0AngularJS development can be done with the help of following IDEs:\r\n\r\nVisual Studio 2012, 2013, 2015 or higher\r\nEclipse\r\nWebStorm\r\nSublime Text\r\nTextMate\r\n\r\n
\r\n\r\n7) Does AngularJS\u00a0<\/strong>has<\/strong>\u00a0<\/strong>dependency<\/strong>\u00a0on jQuery?\r\nAns:<\/strong>\u00a0AngularJS has no dependency on jQuery library. But it can be used with jQuery library.\r\n\r\n
\r\n\r\n8) How to use jQuery with AngularJS?\r\nAns:<\/strong>\u00a0By default AngularJS use jQLite which is the subset of jQuery. If you want to use jQuery then simply load the jQuery library before loading the AngularJS. By doing so, Angular will skip jQLite and will\u00a0start to use jQuery library.\r\n\r\n
\r\n\r\n9)Compare the features of AngularJS and jQuery?\r\nAns:<\/strong>\u00a0The comparison of AngularJS and jQuery features are given below:\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
Features<\/strong><\/td>\r\njQuery<\/strong><\/td>\r\nAngularJS<\/strong><\/td>\r\n<\/tr>\r\n
Abstract The DOM<\/td>\r\nY<\/td>\r\nY<\/td>\r\n<\/tr>\r\n
Animation Support<\/td>\r\nY<\/td>\r\nY<\/td>\r\n<\/tr>\r\n
AJAX\/JSONP<\/td>\r\nY<\/td>\r\nY<\/td>\r\n<\/tr>\r\n
Cross Module Communication<\/td>\r\nY<\/td>\r\nY<\/td>\r\n<\/tr>\r\n
Deferred Promises<\/td>\r\nY<\/td>\r\nY<\/td>\r\n<\/tr>\r\n
Form Validation<\/td>\r\nN<\/td>\r\nY<\/td>\r\n<\/tr>\r\n
Integration Test Runner<\/td>\r\nN<\/td>\r\nY<\/td>\r\n<\/tr>\r\n
Unit Test Runner<\/td>\r\nY<\/td>\r\nY<\/td>\r\n<\/tr>\r\n
Localization<\/td>\r\nN<\/td>\r\nY<\/td>\r\n<\/tr>\r\n
MVC Pattern<\/td>\r\nN<\/td>\r\nY<\/td>\r\n<\/tr>\r\n
Template<\/td>\r\nN<\/td>\r\nY<\/td>\r\n<\/tr>\r\n
Two-way Binding<\/td>\r\nN<\/td>\r\nY<\/td>\r\n<\/tr>\r\n
One-way Binding<\/td>\r\nN<\/td>\r\nY<\/td>\r\n<\/tr>\r\n
Dependency Injection<\/td>\r\nN<\/td>\r\nY<\/td>\r\n<\/tr>\r\n
Routing<\/td>\r\nN<\/td>\r\nY<\/td>\r\n<\/tr>\r\n
Restful API<\/td>\r\nN<\/td>\r\nY<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n\r\n
\r\n\r\n10) What is jQLite or jQuery lite?\r\nAns:<\/strong>\u00a0jQLite is a subset of jQuery that is built directly into AngularJS. jQLite provides you all the useful features of jQuery. In fact it provides you limited features or functions of jQuery.\r\n\r\nHere is a table of supported jQuery methods by jQLite.\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
jQuery Method<\/strong><\/td>\r\nLimitation, if any<\/strong><\/td>\r\n<\/tr>\r\n
addClass()<\/td>\r\n<\/td>\r\n<\/tr>\r\n
after()<\/td>\r\n<\/td>\r\n<\/tr>\r\n
append()<\/td>\r\n<\/td>\r\n<\/tr>\r\n
attr()<\/td>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
bind()<\/td>\r\nDoes not support namespace, selectors and eventData<\/td>\r\n<\/tr>\r\n
children<\/td>\r\nDoes not support selectors<\/td>\r\n<\/tr>\r\n
clone()<\/td>\r\n<\/td>\r\n<\/tr>\r\n
contents()<\/td>\r\n<\/td>\r\n<\/tr>\r\n
css()<\/td>\r\n<\/td>\r\n<\/tr>\r\n
data()<\/td>\r\n<\/td>\r\n<\/tr>\r\n
detach()<\/td>\r\n<\/td>\r\n<\/tr>\r\n
empty()<\/td>\r\n<\/td>\r\n<\/tr>\r\n
eq()<\/td>\r\n<\/td>\r\n<\/tr>\r\n
find()<\/td>\r\nLimited to lookups by tag name<\/td>\r\n<\/tr>\r\n
hasClass()<\/td>\r\n<\/td>\r\n<\/tr>\r\n
html()<\/td>\r\n<\/td>\r\n<\/tr>\r\n
text()<\/td>\r\nDoes not support selectors<\/td>\r\n<\/tr>\r\n
on()<\/td>\r\nDoes not support namespace, selectors and eventData<\/td>\r\n<\/tr>\r\n
off()<\/td>\r\nDoes not support namespace, selectors<\/td>\r\n<\/tr>\r\n
one()<\/td>\r\nDoes not support namespace, selectors<\/td>\r\n<\/tr>\r\n
parent()<\/td>\r\nDoes not support selectors<\/td>\r\n<\/tr>\r\n
prepend()<\/td>\r\n<\/td>\r\n<\/tr>\r\n
prop<\/td>\r\n<\/td>\r\n<\/tr>\r\n
ready()<\/td>\r\n<\/td>\r\n<\/tr>\r\n
remove<\/td>\r\n<\/td>\r\n<\/tr>\r\n
removeAttr()<\/td>\r\n<\/td>\r\n<\/tr>\r\n
removeClass()<\/td>\r\n<\/td>\r\n<\/tr>\r\n
removeData()<\/td>\r\n<\/td>\r\n<\/tr>\r\n
replaceWith()<\/td>\r\n<\/td>\r\n<\/tr>\r\n
toggleClass()<\/td>\r\n<\/td>\r\n<\/tr>\r\n
triggerHandler()<\/td>\r\nPasses a dummy event object to handlers<\/td>\r\n<\/tr>\r\n
unbind()<\/td>\r\nDoes not support namespace<\/td>\r\n<\/tr>\r\n
val()<\/td>\r\n<\/td>\r\n<\/tr>\r\n
wrap()<\/td>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n\r\n
\r\n\r\n11) How to access jQLite or jQuery with AngularJS? (OR)<\/strong>\r\n\r\nWhat is angular.element() in AngularJS?<\/strong>\r\n\r\nAns:<\/strong>\u00a0jQuery lite or the full jQuery library if available, can be accessed via the AngularJS code by using the element() function in AngularJS. Basically, angular.element() is an alias for the jQuery function\r\n\r\ni.e; angular.element() === jQuery() === $()\r\n\r\nFor Example:<\/strong>\r\n\r\n\r\n\r\n
\r\n
\r\n\r\n<html>\r\n\r\n<head>\r\n\r\n<script\u00a0src=”lib\/angular.js”>script>\r\n\r\n<script\u00a0type=”text\/javascript”>\r\n\r\nvar\u00a0app = angular.module(‘app’, []); app.controller(“mainCtrl”,\u00a0function\u00a0($scope, $element) {\r\n\r\n$scope.clickme =\u00a0function(){\u00a0var\u00a0elem = angular.element(document.querySelector(‘#txtName’));\r\n\r\nconsole.log(elem.val())\/\/ console the value of textbox\r\n\r\n};\r\n\r\n});\r\n\r\nscript>\r\n\r\nhead>\r\n\r\n<body\u00a0ng-app=”app”>\r\n\r\n<div\u00a0ng-controller=”mainCtrl”>\r\n\r\n<input\u00a0type=”text”\u00a0id=”txtName”\u00a0value=”Shailendra Chauhan” \/>\r\n\r\n<button\u00a0type=”button”\u00a0ng-click=”clickme()”>Click mebutton>\r\n\r\ndiv>\r\n\r\nbody>\r\n\r\nhtml>\r\n\r\n<\/div><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n\r\n\r\n\r\n\r\n
<\/td>\r\n<\/tr>\r\n
<\/td>\r\n\r\n
Click me<\/div><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
\r\n\r\nWhen you will click on the\u00a0Click me\u00a0<\/em>button, the value of textbox will be logged on console as given below:\r\n\r\n<\/div>\r\n[\/et_pb_text][et_pb_image _builder_version=”3.0.106″ show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” always_center_on_mobile=”on” force_fullwidth=”on” show_bottom_space=”on” src=”https:\/\/asha24.net\/blog\/\/wp-content\/uploads\/2018\/03\/download-120.png” \/][et_pb_text _builder_version=”3.0.106″ background_layout=”light” text_font=”Titillium Web|300|||||||” text_font_size=”20″ text_font_size_last_edited=”on|desktop” text_text_color=”rgba(0,0,0,0.8)” text_line_height=”1.6em” max_width=”800px” custom_margin=”|||10%” text_line_height_last_edited=”off|phone” max_width_last_edited=”off|phone” custom_margin_last_edited=”off|desktop”]\r\n\r\n12) Is AngularJS a library, framework, plugin or a browser extension?\r\nAns:<\/strong>\u00a0AngularJS is a first-class JavaScript framework which allows you to build well structured, easily testable, \u00a0and maintainable front-end applications. It is not a library since library provides you limited functionality or has dependencies to other libraries.\r\nIt is not a plugin or browser extension since it is based on JavaScript and compatible with both desktop and mobile browsers.\r\n\r\n
\r\n\r\n13) What browsers does AngularJS support?\r\nAns:<\/strong>\u00a0The latest version of AngularJS 1.3 support Safari, Chrome, Firefox, Opera 15+, IE9+ and mobile browsers (Android, Chrome Mobile, iOS Safari, Opera Mobile).\r\nAngularJS 1.3 has dropped support for IE8 but AngularJS 1.2 will continue to support IE8.\r\n\r\n
\r\n\r\n14) What is the size of an\u00a0<\/strong>angular.js<\/strong>\u00a0file?\r\nAns:\u00a0<\/strong>The size of the compressed and minified file is < 36KB.\r\n\r\n
\r\n\r\n15) What are AngularJS features?\r\nAns:<\/strong>\u00a0The features of AngularJS are listed below:\r\n1.\u00a0\u00a0 \u00a0Modules\r\n2.\u00a0\u00a0 \u00a0Directives\r\n3.\u00a0\u00a0 \u00a0Templates\r\n4.\u00a0\u00a0 \u00a0Scope\r\n5.\u00a0\u00a0 \u00a0Expressions\r\n6.\u00a0\u00a0 \u00a0Data Binding\r\n7.\u00a0\u00a0 \u00a0MVC (Model, View & Controller)\r\n8.\u00a0\u00a0 \u00a0Validations\r\n9.\u00a0\u00a0 \u00a0Filters\r\n10.\u00a0\u00a0 \u00a0Services\r\n11.\u00a0\u00a0 \u00a0Routing\r\n12.\u00a0\u00a0 \u00a0Dependency Injection\r\n13.\u00a0\u00a0 \u00a0Testing\r\n\r\n
\r\n\r\n16) How AngularJS handle the security?\r\nAns:<\/strong>\u00a0AngularJS provide following built-in protection from basic security holes:\r\n1.\u00a0\u00a0 \u00a0Prevent HTML injection attacks.\r\n2.\u00a0\u00a0 \u00a0Prevent Cross-Site-Scripting (CSS) attacks.\r\n3.\u00a0\u00a0 \u00a0Prevent XSRF protection for server-side communication.\r\n\r\nAlso, AngularJS is designed to be compatible with other security measures like Content Security Policy (CSP), HTTPS (SSL\/TLS) and server-side authentication and authorization that greatly reduce the possible attacks.\r\n\r\n
\r\n\r\n17) Is AngularJS a library, framework, plugin or a browser extension?<\/strong>\r\n\r\nAns:\u00a0<\/strong>AngularJS is a first class JavaScript framework which allows you to build well structured, easily testable,\u00a0 and maintainable front-end applications. It is not a library since library provides you limited functionality or has dependencies to other libraries.\r\n\r\nIt is not a plugin or browser extension since it is based on JavaScript and compatible with both desktop and mobile browsers.\r\n\r\n
\r\n\r\n18) What browsers AngularJS support?<\/strong>\r\n\r\nAns:<\/strong>\u00a0The latest version of AngularJS 1.3 support Safari, Chrome, Firefox, Opera 15+, IE9+ and mobile browsers (Android, Chrome Mobile, iOS Safari, Opera Mobile).\r\n\r\nAngularJS 1.3 has dropped support for IE8 but AngularJS 1.2 will continue to support IE8.\r\n\r\n
\r\n\r\n19) What is the size of angular.js file?<\/strong>\r\n\r\nAns:\u00a0<\/strong>The size of the compressed and minified file is < 36KB.\r\n\r\n
\r\n\r\n20) What are AngularJS features?<\/strong>\r\n\r\nAns:<\/strong>\u00a0The features of AngularJS are listed below:\r\n
    \r\n \t
  1. Modules<\/li>\r\n \t
  2. Directives<\/li>\r\n \t
  3. Templates<\/li>\r\n \t
  4. Scope<\/li>\r\n \t
  5. Expressions<\/li>\r\n \t
  6. Data Binding<\/li>\r\n \t
  7. MVC (Model, View & Controller)<\/li>\r\n \t
  8. Validations<\/li>\r\n \t
  9. Filters<\/li>\r\n \t
  10. Services<\/li>\r\n \t
  11. Routing<\/li>\r\n \t
  12. Dependency Injection<\/li>\r\n \t
  13. Testing<\/li>\r\n<\/ol>\r\n\r\n
    \r\n\r\n21) How AngularJS handle the security?<\/strong>\r\n\r\nAns:\u00a0<\/strong>AngularJS provide following built-in protection from basic security holes:\r\n
      \r\n \t
    1. Prevent HTML injection attacks.<\/li>\r\n \t
    2. Prevent Cross-Site-Scripting (CSS) attacks.<\/li>\r\n \t
    3. Prevent XSRF protection for server side communication.<\/li>\r\n<\/ol>\r\nAlso, AngularJS is designed to be compatible with other security measures like Content Security Policy (CSP), HTTPS (SSL\/TLS) and server-side authentication and authorization that greatly reduce the possible attacks.\r\n\r\n
      \r\n\r\n22) What are Modules in AngularJS?<\/strong>\r\n\r\nAns:\u00a0<\/strong>AngularJS modules are containers just like namespace in C#. They divide an angular app into small,\u00a0 reusable and functional components which can be integrated with other angular app. Each module is identified by a unique name and can be dependent on other modules. In AngularJS, every web page (view) can have a single module assigned to it via ng-app directive.\r\n\r\nCreating an AngularJS module\r\n\r\n<script\u00a0type=”text\/javascript”>\r\n\r\n\/\/ defining module\u00a0angular.module(‘myApp’, []);\r\n\r\n\/\/OR defining module which has dependency on other modules\u00a0angular.module(‘myApp’, [‘dependentModule1’,\u00a0‘dependentModule2’]);\r\n\r\nscript>\r\n\r\nUsing an AngularJS module into your app\r\n\r\nYou can bootstrap your app by using your AngularJS module as given below:\r\n\r\n<html\u00a0ng-app=”myApp”>\r\n\r\n<head>\r\n\r\n…\r\n\r\nhead>\r\n\r\n<body>\r\n\r\n…\r\n\r\nbody>\r\n\r\n
      \r\n\r\n23)\u00a0 What is core module in AngularJS?<\/strong>\r\n\r\nAns:<\/strong>\u00a0ng is the core module in angular. This module is loaded by default when an angular app is started. This module provides the essential components for your angular app like directives, services\/factories, filters, global APIs and testing components.\r\n\r\n
      \r\n\r\n24) How angular modules load the dependencies?<\/strong>\r\n\r\nAns:<\/strong>\u00a0An angular module use configuration and run blocks to inject dependencies (like providers, services and constants) which get applied to the angular app during the bootstrap process.\r\n\r\n
      \r\n\r\n

      25) What is difference between config() and run() method in AngularJS?<\/strong><\/h4>\r\nAns:<\/strong>Configuration block\u00a0<\/em>\u2013 This block is executed during the provider registration and configuration phase.\u00a0 Only providers and constants can be injected into configuration blocks. This block is used to inject module wise configuration settings to prevent accidental instantiation of services before they have been fully configured. This block is created using config() method\r\n\r\nangular.module(‘myModule’, []).\r\n\r\nconfig(function\u00a0(injectables) {\u00a0\/\/ provider-injector\r\n\r\n\/\/ This is an example of config block.\r\n\r\n\/\/ You can have as many of these as you want.\r\n\r\n\/\/ You can only inject Providers (not instances)\r\n\r\n\/\/ into config blocks.\r\n\r\n}).\r\n\r\nrun(function\u00a0(injectables) {\u00a0\/\/ instance-injector\r\n\r\n\/\/ This is an example of a run block.\r\n\r\n\/\/ You can have as many of these as you want.\r\n\r\n\/\/ You can only inject instances (not Providers)\r\n\r\n\/\/ into run blocks\r\n\r\n});\r\n\r\nRun block\u00a0<\/em>\u2013 This block is executed after the configuration block. It is used to inject instances and constants. This block is created using run() method. This method is like as main method in C or C++.\r\n\r\nThe run block is a great place to put event handlers that need to be executed at the root level for the application.\r\n\r\nFor example, authentication handlers.\r\n\r\n
      \r\n\r\n26) When dependent modules of a module are loaded?<\/strong>\r\n\r\nAns:<\/strong>\u00a0A module might have dependencies on other modules. The dependent modules are loaded by angular before the requiring module is loaded.\r\n\r\nIn other words the configuration blocks of the dependent modules execute before the configuration blocks of the requiring module. The same is true for the run blocks. Each module can only be loaded once, even if multiple other modules require it.\r\n\r\n
      \r\n\r\n27) What is Global API?<\/strong>\r\n\r\nAns:<\/strong>\u00a0Global API provides you global functions to perform common JavaScript tasks such as comparing objects, deep copying, iterating through objects, and converting JSON data etc. All global functions can be accessed by using the angular object.\r\n\r\n
      \r\n\r\n

      28) What is Angular Prefixes $ and $$?<\/strong><\/h4>\r\nAns:\u00a0<\/strong>To prevent accidental name collisions with your code, Angular prefixes names of public objects with $ and names of private objects with $$. So, do not use the $ or $$ prefix in your code.\r\n\r\n
      \r\n\r\n29) What are Filters in AngularJS?<\/strong>\r\n\r\nAns:\u00a0<\/strong>Filters are used to format data before displaying it to the user. They can be used in view templates, controllers, services and directives. There are some built-in filters provided by AngularJS like as Currency, Date, Number, OrderBy, Lowercase, Uppercase etc. You can also create your own filters.\r\n\r\nFilter Syntax:<\/em>\r\n\r\n{{ expression | filter}}\r\n\r\nFilter Example:<\/em>\r\n\r\n<script\u00a0type=”text\/javascript”>\r\n\r\n{ { 14 | currency } }\u00a0\/\/returns $14.00\r\n\r\nscript>\r\n\r\n
      \r\n\r\n30) What are Expressions in AngularJS?<\/strong>\r\n\r\nAns:<\/strong>\u00a0AngularJS expressions are much like JavaScript expressions, placed inside HTML templates by using double braces such as: {{expression}}. AngularJS evaluates expressions and then dynamically adds the result to a web page. Like JavaScript expressions, they can contain literals, operators, and variables.\r\n\r\nThere are some valid AngularJS expressions:\r\n
        \r\n \t
      • {{ 1 + 2 }}<\/li>\r\n \t
      • {{ x + y }}<\/li>\r\n \t
      • {{ x == y }}<\/li>\r\n \t
      • {{ x = 2 }}<\/li>\r\n \t
      • {{ user.Id }}<\/li>\r\n<\/ul>\r\n\r\n
        \r\n\r\n

        31) How AngularJS expressions are different from the JavaScript expressions?<\/strong><\/h4>\r\nAns:<\/strong>\u00a0AngularJS expressions are much like JavaScript expressions but they are different from JavaScript expressions in the following ways:\r\n
          \r\n \t
        • Angular expressions can be added inside the HTML templates.<\/li>\r\n \t
        • Angular expressions doesn’t support control flow statements (conditionals, loops, or exceptions).<\/li>\r\n \t
        • Angular expressions support filters to format data before displaying it.<\/li>\r\n<\/ul>\r\n\r\n
          \r\n\r\n32) What are Directives in AngularJS?<\/strong>\r\n\r\nAns:<\/strong>\u00a0AngularJS directives are a combination of AngularJS template markups (HTML attributes or elements, or CSS classes) and supporting JavaScript code. The JavaScript directive code defines the template data and behaviors of the HTML elements.\r\n\r\nAngularJS directives are used to extend the HTML vocabulary i.e. they decorate html elements with new behaviors and help to manipulate html elements attributes in interesting way.\r\n\r\nThere are some built-in directives provided by AngularJS like as ng-app, ng-controller, ng-repeat, ng-model etc.\r\n\r\n
          \r\n\r\n33) What is the role of ng-app, ng-init and ng-model directives?<\/strong>\r\n\r\nAns:\u00a0<\/strong>The main role of these directives is explained as:\r\n
            \r\n \t
          • ng-app – Initialize the angular app.<\/li>\r\n \t
          • ng-init – Initialize the angular app data.<\/li>\r\n \t
          • ng-model – Bind the html elements like input, select, text area to angular app model.<\/li>\r\n<\/ul>\r\n\r\n
            \r\n\r\n34) How to create custom directives in AngularJS?<\/strong>\r\n

            Ans:\u00a0<\/strong>You can create your own custom directive by using following syntax:<\/h4>\r\nvar\u00a0app = angular.module(‘app’, []);\r\n\r\n\/\/creating custom directive syntax\r\n\r\napp.directive(“myDir”,\u00a0function\u00a0() {\r\n\r\nreturn\u00a0{\r\n\r\nrestrict:\u00a0“E”,\u00a0\/\/define directive type like E = element, A = attribute,\r\n\r\nC = class, M = comment\r\n\r\nscope: {\u00a0\/\/create a new child scope or an isolate scope\r\n\r\ntitle:\u00a0‘@’\u00a0\/\/@ reads the attribute value,\r\n\r\n\/\/= provides two-way binding,\r\n\r\n\/\/& works with functions\r\n\r\n},\r\n\r\ntemplate:”\r\n
            {{ myName }}<\/div>\r\n“,\u00a0\/\/ define HTML markup\r\n\r\ntemplateUrl:\u00a0‘mytemplate.html’,\u00a0\/\/path to the template, used by the directive\r\n\r\nreplace:\u00a0true\u00a0|\u00a0false,\u00a0\/\/ replace original markup with template yes\/no\r\n\r\ntransclude:\u00a0true\u00a0|\u00a0false,\u00a0\/\/ copy original HTML content yes\/no\r\n\r\ncontroller:\u00a0function\u00a0(scope) {\u00a0\/\/define controller, associated with the directive\u00a0 template\r\n\r\n\/\/TODO:\r\n\r\n},\r\n\r\nlink:\u00a0function\u00a0(scope, element, attrs, controller) {\/\/define function, used for DOM manipulation\r\n\r\n\/\/TODO:\r\n\r\n}\r\n\r\n}\r\n\r\n});\r\n\r\n
            \r\n\r\n35) What are different ways to invoke a directive?<\/strong>\r\n\r\nAns:\u00a0<\/strong>There are four methods to invoke a directive in your angular app which are equivalent.\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
            Method<\/strong><\/td>\r\nSyntax<\/strong><\/td>\r\n<\/tr>\r\n
            As an\u00a0attribute<\/strong><\/td>\r\n<span\u00a0my-directive>span><\/td>\r\n<\/tr>\r\n
            As a\u00a0class<\/strong><\/td>\r\n<span\u00a0class=”my-directive: expression;”>span><\/td>\r\n<\/tr>\r\n
            As an\u00a0element<\/strong><\/td>\r\n<my-directive>my-directive><\/td>\r\n<\/tr>\r\n
            As a\u00a0comment<\/strong><\/td>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n\r\n
            \r\n\r\n36) What is restrict option in directive?<\/strong>\r\n\r\nAns:\u00a0<\/strong>The restrict option in angular directive, is used to specify how a directive will be invoked in your angular app i.e. as an attribute, class, element or comment.\r\n\r\nThere are four valid options for restrict:\r\n\r\n‘A’ (Attribute)-\u00a0<span\u00a0my-directive>span>\r\n\r\n‘C’ (Class)-\u00a0<span\u00a0class=”my-directive:expression;”>span>\u00a0‘E’ (Element)-\u00a0<my-directive>my-directive>\r\n\r\n‘M’ (Comment)-\r\n\r\n
            \r\n\r\n37) Can you define multiple restrict options on a directive?<\/strong>\r\n\r\nAns:<\/strong>\u00a0You can also specify multiple restrict options to support more than one methods of directive invocation as an element or an attribute. Make sure all are specified in the restrict keyword as:\r\n\r\nrestrict:\u00a0‘EA’\r\n\r\n
            \r\n\r\n38) What is auto bootstrap process in AngularJS?<\/strong>\r\n
            \r\n\r\nAns:<\/strong>\u00a0Angular initializes automatically upon DOMContentLoaded event or when the angular.js script is downloaded to the browser and the document.readyState is set to complete. At this point AngularJS looks for the\r\n\r\n<\/div>\r\nng-app directive which is the root of angular app compilation and tells about AngularJS part within DOM. When the ng-app directive is found then Angular will:\r\n
              \r\n \t
            1. Load the module associated with the directive.<\/li>\r\n \t
            2. Create the application injector.<\/li>\r\n<\/ol>\r\nCompile the DOM starting from the ng-app root element.\r\n\r\nExample:<\/em>\r\n\r\n<html>\r\n\r\n<body\u00a0ng-app=”myApp”>\r\n\r\n<div\u00a0ng-controller=”Ctrl”>\u00a0Hello\u00a0{{<\/strong>msg}}<\/strong>!\r\n\r\ndiv>\r\n\r\n<script\u00a0src=”lib\/angular.js”>script>\r\n\r\n<script>\r\n\r\nvar\u00a0app = angular.module(‘myApp’, []);\r\n\r\napp.controller(‘Ctrl’,\u00a0function\u00a0($scope) {\r\n\r\n$scope.msg =\u00a0‘World’;\r\n\r\n});\r\n\r\nscript>\r\n\r\nbody>\r\n\r\nhtml>\r\n\r\n
              \r\n\r\n39) How AngularJS is initialized manually?<\/strong>\r\n\r\nAns:<\/strong>\u00a0 You can manually initialized your angular app by using angular.bootstrap() function. This function takes\u00a0 the modules as parameters and should be called within angular.element(document).ready() function. The angular.element(document).ready() function is fired when the DOM is ready for manipulation.\r\n\r\nExample:<\/em>\r\n\r\n<html>\r\n\r\n<body>\r\n\r\n<div\u00a0ng-controller=”Ctrl”>\u00a0Hello\u00a0{{<\/strong>msg}}<\/strong>!\r\n\r\ndiv>\r\n\r\n<script\u00a0src=”lib\/angular.js”>script>\r\n\r\n<script>\r\n\r\nvar\u00a0app = angular.module(‘myApp’, []);\r\n\r\napp.controller(‘Ctrl’,\u00a0function\u00a0($scope) {\r\n\r\n$scope.msg =\u00a0‘World’;\r\n\r\n});\r\n\r\n\/\/manual bootstrap process\r\n\r\nangular.element(document).ready(function\u00a0() {\r\n\r\nangular.bootstrap(document, [‘myApp’]);\r\n\r\n});\r\n\r\nscript>\r\n\r\nbody>\r\n\r\nhtml>\r\n\r\nNote:<\/em>\r\n
                \r\n \t
              • You should not use the ng-app directive when manually bootstrapping your app.<\/li>\r\n \t
              • You should not mix up the automatic and manual way of bootstrapping your app.<\/li>\r\n \t
              • Define modules, controller, services etc. before manually bootstrapping your app as defined in above example.<\/li>\r\n<\/ul>\r\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section bb_built=”1″ prev_background_color=”#000000″][et_pb_row][et_pb_column type=”4_4″][et_pb_team_member _builder_version=”3.0.106″ name=”Arun Gandham” position=”Author” facebook_url=”” twitter_url=”” google_url=”” linkedin_url=”” image_url=”https:\/\/asha24.net\/blog\/\/wp-content\/uploads\/2018\/03\/123456.gif” background_layout=”light” header_font=”Titillium Web|700|||||||” body_font=”Titillium Web||||||||” body_font_size=”16″]\r\n\r\nHola peeps! A fitness freak, a lover of games, I catch a flick on the weekends and write for you about current trends.\r\n\r\n[\/et_pb_team_member][\/et_pb_column][\/et_pb_row][\/et_pb_section]\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":4,"featured_media":48090,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[57],"tags":[58],"class_list":["post-48088","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-interview-questions","tag-interview-questions"],"yoast_head":"\nAngularJS Interview Questions and Answers - Asha24 Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/asha24.net\/blog\/angularjs-interview-questions-and-answers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AngularJS Interview Questions and Answers - Asha24 Blog\" \/>\n<meta property=\"og:url\" content=\"https:\/\/asha24.net\/blog\/angularjs-interview-questions-and-answers\/\" \/>\n<meta property=\"og:site_name\" content=\"Asha24 Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-01-29T22:39:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-03T12:13:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/asha24.net\/blog\/wp-content\/uploads\/2018\/03\/angularjs-interview-questions-and-answers-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"459\" \/>\n\t<meta property=\"og:image:height\" content=\"306\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mahesh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/asha24.net\/blog\/#website\",\"url\":\"https:\/\/asha24.net\/blog\/\",\"name\":\"Asha24 Blog\",\"description\":\"Dedication Towards Learning\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/asha24.net\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/asha24.net\/blog\/angularjs-interview-questions-and-answers\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/asha24.net\/blog\/wp-content\/uploads\/2018\/03\/angularjs-interview-questions-and-answers-1.jpg\",\"contentUrl\":\"https:\/\/asha24.net\/blog\/wp-content\/uploads\/2018\/03\/angularjs-interview-questions-and-answers-1.jpg\",\"width\":459,\"height\":306},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/asha24.net\/blog\/angularjs-interview-questions-and-answers\/#webpage\",\"url\":\"https:\/\/asha24.net\/blog\/angularjs-interview-questions-and-answers\/\",\"name\":\"AngularJS Interview Questions and Answers - Asha24 Blog\",\"isPartOf\":{\"@id\":\"https:\/\/asha24.net\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/asha24.net\/blog\/angularjs-interview-questions-and-answers\/#primaryimage\"},\"datePublished\":\"2018-01-29T22:39:49+00:00\",\"dateModified\":\"2023-02-03T12:13:47+00:00\",\"author\":{\"@id\":\"https:\/\/asha24.net\/blog\/#\/schema\/person\/f6167b78bbaddfc399ae1154cd5b6759\"},\"breadcrumb\":{\"@id\":\"https:\/\/asha24.net\/blog\/angularjs-interview-questions-and-answers\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/asha24.net\/blog\/angularjs-interview-questions-and-answers\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/asha24.net\/blog\/angularjs-interview-questions-and-answers\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/asha24.net\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"AngularJS Interview Questions and Answers\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/asha24.net\/blog\/#\/schema\/person\/f6167b78bbaddfc399ae1154cd5b6759\",\"name\":\"Mahesh\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/asha24.net\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/085c03e75ffb51af2509c1cfad9c7d78b30236d43a008db2e46f96e2f40c67fc?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/085c03e75ffb51af2509c1cfad9c7d78b30236d43a008db2e46f96e2f40c67fc?s=96&d=wavatar&r=g\",\"caption\":\"Mahesh\"},\"url\":\"https:\/\/asha24.net\/blog\/author\/mahesh\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"AngularJS Interview Questions and Answers - Asha24 Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/asha24.net\/blog\/angularjs-interview-questions-and-answers\/","og_locale":"en_US","og_type":"article","og_title":"AngularJS Interview Questions and Answers - Asha24 Blog","og_url":"https:\/\/asha24.net\/blog\/angularjs-interview-questions-and-answers\/","og_site_name":"Asha24 Blog","article_published_time":"2018-01-29T22:39:49+00:00","article_modified_time":"2023-02-03T12:13:47+00:00","og_image":[{"width":459,"height":306,"url":"https:\/\/asha24.net\/blog\/wp-content\/uploads\/2018\/03\/angularjs-interview-questions-and-answers-1.jpg","path":"\/home\/reviews981\/public_html\/asha24.net\/blog\/wp-content\/uploads\/2018\/03\/angularjs-interview-questions-and-answers-1.jpg","size":"full","id":48090,"alt":"","pixels":140454,"type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mahesh","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/asha24.net\/blog\/#website","url":"https:\/\/asha24.net\/blog\/","name":"Asha24 Blog","description":"Dedication Towards Learning","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/asha24.net\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/asha24.net\/blog\/angularjs-interview-questions-and-answers\/#primaryimage","inLanguage":"en-US","url":"https:\/\/asha24.net\/blog\/wp-content\/uploads\/2018\/03\/angularjs-interview-questions-and-answers-1.jpg","contentUrl":"https:\/\/asha24.net\/blog\/wp-content\/uploads\/2018\/03\/angularjs-interview-questions-and-answers-1.jpg","width":459,"height":306},{"@type":"WebPage","@id":"https:\/\/asha24.net\/blog\/angularjs-interview-questions-and-answers\/#webpage","url":"https:\/\/asha24.net\/blog\/angularjs-interview-questions-and-answers\/","name":"AngularJS Interview Questions and Answers - Asha24 Blog","isPartOf":{"@id":"https:\/\/asha24.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/asha24.net\/blog\/angularjs-interview-questions-and-answers\/#primaryimage"},"datePublished":"2018-01-29T22:39:49+00:00","dateModified":"2023-02-03T12:13:47+00:00","author":{"@id":"https:\/\/asha24.net\/blog\/#\/schema\/person\/f6167b78bbaddfc399ae1154cd5b6759"},"breadcrumb":{"@id":"https:\/\/asha24.net\/blog\/angularjs-interview-questions-and-answers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/asha24.net\/blog\/angularjs-interview-questions-and-answers\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/asha24.net\/blog\/angularjs-interview-questions-and-answers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/asha24.net\/blog\/"},{"@type":"ListItem","position":2,"name":"AngularJS Interview Questions and Answers"}]},{"@type":"Person","@id":"https:\/\/asha24.net\/blog\/#\/schema\/person\/f6167b78bbaddfc399ae1154cd5b6759","name":"Mahesh","image":{"@type":"ImageObject","@id":"https:\/\/asha24.net\/blog\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/085c03e75ffb51af2509c1cfad9c7d78b30236d43a008db2e46f96e2f40c67fc?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/085c03e75ffb51af2509c1cfad9c7d78b30236d43a008db2e46f96e2f40c67fc?s=96&d=wavatar&r=g","caption":"Mahesh"},"url":"https:\/\/asha24.net\/blog\/author\/mahesh\/"}]}},"_links":{"self":[{"href":"https:\/\/asha24.net\/blog\/wp-json\/wp\/v2\/posts\/48088","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/asha24.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/asha24.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/asha24.net\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/asha24.net\/blog\/wp-json\/wp\/v2\/comments?post=48088"}],"version-history":[{"count":11,"href":"https:\/\/asha24.net\/blog\/wp-json\/wp\/v2\/posts\/48088\/revisions"}],"predecessor-version":[{"id":52131,"href":"https:\/\/asha24.net\/blog\/wp-json\/wp\/v2\/posts\/48088\/revisions\/52131"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/asha24.net\/blog\/wp-json\/wp\/v2\/media\/48090"}],"wp:attachment":[{"href":"https:\/\/asha24.net\/blog\/wp-json\/wp\/v2\/media?parent=48088"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/asha24.net\/blog\/wp-json\/wp\/v2\/categories?post=48088"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/asha24.net\/blog\/wp-json\/wp\/v2\/tags?post=48088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}