{"id":3340,"date":"2018-03-23T10:50:20","date_gmt":"2018-03-23T05:20:20","guid":{"rendered":"https:\/\/code4developers.com\/?p=3340"},"modified":"2018-03-26T15:59:58","modified_gmt":"2018-03-26T10:29:58","slug":"top-angularjs-interview-question","status":"publish","type":"post","link":"https:\/\/code4developers.com\/top-angularjs-interview-question\/","title":{"rendered":"Top AngularJS interview questions"},"content":{"rendered":"<p style=\"padding-left: 30px;\">Read <strong>Angular js interview questions<\/strong> including topic advanced topics like <strong>Dependency injection<\/strong>, <strong>Two-way binding<\/strong>, <strong>scope in angular js and many more.<\/strong><!--more--><\/p>\n<h4 id=\"1-explain-directive-scopes\" style=\"padding-left: 30px;\">1.Explain Directive scopes?<\/h4>\n<p style=\"padding-left: 30px;\">There are three types of directive scopes available in Angular.<\/p>\n<ul>\n<li>Parent Scope: is default scope<\/li>\n<li>Child Scope: If the properties and functions you set on the scope are not relevant to other directives and the parent, you should probably create a new child scope.<\/li>\n<li>Isolated Scope: Isolated Scope is used if the directive you are going to build is self-contained and reusable. Does not inherit from parent scope, used for private\/internal use.<\/li>\n<\/ul>\n<ol start=\"2\">\n<li>\n<h4 id=\"how-to-isolate-a-directives-scope-in-angular\">How to isolate a directive\u2019s Scope in Angular?<\/h4>\n<\/li>\n<\/ol>\n<p style=\"padding-left: 30px;\">You can isolate a directive\u2019s Scope by passing an object to the scope option of directive.<\/p>\n<p style=\"padding-left: 30px;\">This tells the directive to keep scope inside of itself and not to inherit or share with other scopes.<\/p>\n<ol start=\"3\">\n<li>\n<h4 id=\"how-would-you-make-an-angular-service-return-a-promise-write-a-code-snippet-as-an-example\">How would you make an Angular service return a promise? Write a code snippet as an example<\/h4>\n<\/li>\n<\/ol>\n<p style=\"padding-left: 30px;\">To add promise functionality to a service, we inject the \u201c$q\u201d dependency in the service, and then use it like so:<\/p>\n<pre class=\"EnlighterJSRAW\" style=\"padding-left: 60px;\" data-enlighter-language=\"js\">angular.factory('testService', function($q){\r\n  return {\r\n     getName: function(){\r\n        var deferred = $q.defer();\r\n          \/\/API call here that returns data\r\n          testAPI.getName().then(function(name){\r\n            deferred.resolve(name)\r\n          })\r\n        return deferred.promise;\r\n     }\r\n   }\r\n})<\/pre>\n<p style=\"padding-left: 30px;\">The $q library is a helper provider that implements promises and deferred objects to enable asynchronous functionality<\/p>\n<p style=\"padding-left: 30px;\">Source: <a href=\"https:\/\/docs.angularjs.org\/api\/ng\/service\/$q\" target=\"_blank\" rel=\"noopener\">https:\/\/docs.angularjs.org\/api\/ng\/service\/$q<\/a><\/p>\n<ol start=\"4\">\n<li>\n<h4 id=\"explain-how-does-angular-implement-two-way-binding\">Explain how does Angular implement two-way binding?<\/h4>\n<\/li>\n<\/ol>\n<p style=\"padding-left: 30px;\">Data-binding in Angular apps is the automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change and vice versa.<\/p>\n<ol start=\"5\">\n<li>\n<h4 id=\"what-is-the-difference-between-scope-and-scope\">What is the difference between $scope and scope?<\/h4>\n<\/li>\n<\/ol>\n<p style=\"padding-left: 30px;\">In Angular js $scope is used whenever we have to use dependency injection (D.I) whereas as the scope is used for directive linking.<\/p>\n<ol start=\"6\">\n<li>\n<h4 id=\"what-is-angulars-prefixes-and\">What is Angular\u2019s prefixes $ and $$?<\/h4>\n<\/li>\n<\/ol>\n<p style=\"padding-left: 30px;\">Angular uses these prefixes to prevent accidental code collision with users code.<\/p>\n<p style=\"padding-left: 30px;\">$ prefix is used with public objects whereas $$ prefix is used with a single public object.<\/p>\n<ol start=\"7\">\n<li>\n<h4 id=\"what-is-the-difference-between-a-link-and-compile-in-angular-js\">What is the difference between a link and compile in Angular JS?<\/h4>\n<\/li>\n<\/ol>\n<ul>\n<li><strong>Compile function:<\/strong> To template DOM manipulation and to gather all the directives, the compile function is used.<\/li>\n<li><strong>Link function:<\/strong> To register DOM listeners as well as for the instance DOM manipulation, the Link function is used.<\/li>\n<\/ul>\n<ol start=\"8\">\n<li>\n<h4 id=\"how-do-you-share-data-between-controllers-in-angularjs\">How do you share data between controllers in AngularJs?<\/h4>\n<\/li>\n<\/ol>\n<p style=\"padding-left: 30px;\">We can share data by creating a service, Services are easiest, fastest and cleaner way to share data between controllers in AngularJs.<\/p>\n<p style=\"padding-left: 30px;\">There are also other ways to share data between controllers, they are<\/p>\n<ul>\n<li>Using Events<\/li>\n<li>$parent, nextSibling, controllerAs<\/li>\n<li>Using the $rootScope<\/li>\n<\/ul>\n<ol start=\"9\">\n<li>\n<h4 id=\"what-is-internationalization-in-angularjs\">What is internationalization in Angularjs?<\/h4>\n<\/li>\n<\/ol>\n<p style=\"padding-left: 30px;\">Internationalization is a way to show locale-specific information on a website. It is used to create multilingual language websites.<\/p>\n<ol start=\"10\">\n<li>\n<h4 id=\"what-is-dependency-injection-and-how-does-it-work\">What is dependency injection and how does it work?<\/h4>\n<\/li>\n<\/ol>\n<p style=\"padding-left: 30px;\">AngularJS was designed to highlight the power of dependency injection, a software design pattern that places an emphasis on giving components their dependencies instead of hardcoding them within the component. For example, if you had a controller that needed to access a list of customers, you would store the actual list of customers in a service that can be injected into the controller instead of hardcoding the list of customers into the code of the controller itself. In AngularJS you can inject values, factories, services, providers, and constants.<\/p>\n<ol start=\"11\">\n<li>\n<h4 id=\"list-some-of-the-built-in-validators-in-angular-js\">List some of the built-in validators in Angular JS?<\/h4>\n<\/li>\n<\/ol>\n<p style=\"padding-left: 30px;\">Angular js supports all standard HTML5 attributes to validate input.Below are few built-in validators in Angular js.<\/p>\n<ul>\n<li>required<\/li>\n<li>min<\/li>\n<li>max<\/li>\n<li>type=\u201dnumber\u201d OR type=\u201demail\u201d<\/li>\n<\/ul>\n<ol start=\"12\">\n<li>\n<h4 id=\"how-to-access-parent-scope-from-child-controller-in-angular-js\">How to access parent scope from child controller in Angular JS?<\/h4>\n<\/li>\n<\/ol>\n<p style=\"padding-left: 30px;\">In angular there is a scope variable called $parent (i.e. $scope.$parent). $parent is used to access parent scope from child controller in Angular JS.<\/p>\n<p style=\"padding-left: 30px;\">Example:<\/p>\n<pre class=\"EnlighterJSRAW\" style=\"padding-left: 60px;\" data-enlighter-language=\"js\">&lt;div ng-controller=\"ParentCtrl\"&gt;\r\n    &lt;h1&gt;{{ name }}&lt;\/h1&gt;\r\n    &lt;p&gt;{{ address }}&lt;\/p&gt;\r\n    &lt;div ng-controller=\"ChildCtrl\"&gt;\r\n        &lt;h1&gt;{{ title }}&lt;\/h1&gt;\r\n        &lt;input type=\"text\" ng-model=\"$parent.address\" \/&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p style=\"padding-left: 30px;\">Now that you\u2019ve read all the AngularJS interview questions and answers above, you are a step closer to passing your interview and getting your dream job.<br \/>\nIf you feel that you need to refresh your knowledge on some concepts and master front-end web development with Angular, consider reading our <a href=\"https:\/\/code4developers.com\/category\/angularjs\/\">other articles on AngularJS.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Read Angular js interview questions including topic advanced topics like Dependency injection, Two-way binding, scope in angular js and many more.<\/p>\n","protected":false},"author":7,"featured_media":2560,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4],"tags":[136,138,139,137],"powerkit_post_featured":[],"class_list":{"0":"post-3340","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-angularjs","8":"tag-dependency-injection","9":"tag-scope-in-angular-js","10":"tag-top-angularjs-interview-question","11":"tag-two-way-binding"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-RS","jetpack-related-posts":[{"id":3222,"url":"https:\/\/code4developers.com\/improving-the-performance-of-angular-js-code-by-learning-the-basics-of-ng-repeat\/","url_meta":{"origin":3340,"position":0},"title":"How to optimize the performance of ng-repeat in AngularJS?","author":"Arif Khoja","date":"February 7, 2018","format":false,"excerpt":"Today we would focus on improving the performance of Angular JS code by learning the basics of ng-repeat and then how to enhance its capabilities. ng-repeat :-\u00a0 It is directive which create instant of template for each item in the collection. It is identical to looping concept in any language\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"AngularJs LOGO","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2613,"url":"https:\/\/code4developers.com\/ui-routing-basics\/","url_meta":{"origin":3340,"position":1},"title":"UI-Routing &#8211; Basics","author":"Arif Khoja","date":"June 17, 2017","format":false,"excerpt":"Introduction In the present scenario, AngularJS is the most trusted framework for the creation of Single Page Applications (SPA), and UI-Routing is one of the most important aspects. We want to keep our navigation feeling like a normal site and want to load the pages without refreshing the Browser. For\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3097,"url":"https:\/\/code4developers.com\/angularjs-10-best-practices-create-custom-directives\/","url_meta":{"origin":3340,"position":2},"title":"AngularJS &#8211; 10 Best Practices to Create Custom Directives","author":"Arif Khoja","date":"September 2, 2017","format":false,"excerpt":"This article represents top 10 best practices that one may want to apply while creating custom directives. Please feel free to comment\/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following is listed the best practices for creating custom directives: Naming Convention: Prefer\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"AngularJs LOGO","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2575,"url":"https:\/\/code4developers.com\/remove-hash-from-application-url-in-angularjs\/","url_meta":{"origin":3340,"position":3},"title":"How To Remove Hash From Application URL In AngularJS","author":"Arif Khoja","date":"June 10, 2017","format":false,"excerpt":"Introduction Angular is a framework, which is developed and maintained by Google. It has features such as Two-Way binding, Dependency Injection, Testing and Directives. It is widely used to create a Single Page Application(SPA) with Two-Way binding. To find more, refer the URL https:\/\/docs.angularjs.org\/guide Going further, I assume that you\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3047,"url":"https:\/\/code4developers.com\/apply-mcustomscrollbar-using-angular-directive\/","url_meta":{"origin":3340,"position":4},"title":"Apply mCustomScrollbar using Angular Directive","author":"Pawan Ingale","date":"August 14, 2017","format":false,"excerpt":"ngCustomScrollbar Directives are very well-known in the world of angular developers. Every developer knows the power of a\u00a0Directive. AngularJS has already provided many inbuilt directives which we are using on daily basis. Why custom scroll bars are useful? Browser default scroll bar are not so good to see while adjusting\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"AngularJs LOGO","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3489,"url":"https:\/\/code4developers.com\/automatic-bootstrapping-and-manual-bootstrapping-multiple-modules-in-angularjs\/","url_meta":{"origin":3340,"position":5},"title":"Bootstrapping multiple modules in AngularJS","author":"Arif Khoja","date":"April 26, 2018","format":false,"excerpt":"In this article we will be\u00a0Understanding AngularJS Bootstrap Process talking about automatic\u00a0Bootstrapping and manual Bootstrapping multiple modules in AngularJS. Angular initiates automatically upon [marker color=\"#dbdbdb\" textcolor=\"#1e73be\"]DOMContentLoaded[\/marker] event or when the angular.js script is downloaded to the browser and the [marker color=\"#dbdbdb\" textcolor=\"#1e73be\"]document.readyState[\/marker] is set to [marker color=\"#dbdbdb\" textcolor=\"#1e73be\"]complete[\/marker]. At this\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"AngularJs LOGO","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3340","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=3340"}],"version-history":[{"count":8,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3340\/revisions"}],"predecessor-version":[{"id":3373,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3340\/revisions\/3373"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/2560"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=3340"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=3340"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=3340"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=3340"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}