{"id":1741,"date":"2021-05-24T10:28:41","date_gmt":"2021-05-24T10:28:41","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=1741"},"modified":"2021-05-24T10:28:41","modified_gmt":"2021-05-24T10:28:41","slug":"top-45-angularjs-interview-questions-with-answers","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=1741","title":{"rendered":"Top 45 AngularJS Interview Questions with Answers"},"content":{"rendered":"\n<p>AngularJS continues to rise in popularity, and more companies are seeking talented AngularJS developers. More than&nbsp;<strong>6,700 companies<\/strong>&nbsp;report that they use AngularJS in their tech stacks, including Google, Amazon, Lyft, Snapchat, and more.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Cracking your AngularJS interview is crucial to landing one of these coveted roles. To help you prepare, we\u2019ve compiled the top 45 essential AngularJS coding interview questions. This detailed guide with answers will help you to&nbsp;<em>crack your AngularJS coding interview.<\/em><\/p>\n\n\n\n<p><strong>This guide at a glance:<\/strong><small><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#1\">1. What is AngularJS and its key features?<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#2\">2. What are scopes in AngularJS?<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#3\">3. What are services in AngularJS?<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#4\">4. Explain the difference between AngularJS expressions and JavaScript expressions.<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#5\">5. What are directives?<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#6\">6. What is data binding in AngularJS?<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#7\">7. What is interpolation?<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#8\">8. What is the factory function?<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#9\">9. What are the characteristics of&nbsp;<code>Scope<\/code>?<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#10\">10. What is dependency injection?<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#11\">11. How do you integrate AngularJS with HTML?<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#12\">12. Why do we use double click in AngularJS?<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#13\">13. How can you reset a&nbsp;<code>$timeout<\/code>&nbsp;and disable a&nbsp;<code>$watch()<\/code>?<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#14\">14. What is the digest phase?<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#15\">15. What is&nbsp;<code>$rootScope<\/code>&nbsp;and how does it relate to&nbsp;<code>$scope<\/code>?<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#16\">16. What is scope hierarchy?<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#17\">17. How can you make an ajax call?<\/a><\/small><small><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#18\">18. What are some common Angular Global API functions?<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#19\">19. How do you hide an HTML tag?<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#20\">20. Describe different phases of the AngularJS&nbsp;<code>Scope<\/code>&nbsp;lifecycle.<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#21\">21. How do you create nested controllers?<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#22\">22. Explain the differences between Angular and jQuery.<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#23\">23. Which hooks are available in AngularJS?<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#24\">24. What are pipes?<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#25\">25. What are isolated unit tests?<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#26\">26. What is Angular CLI?<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#27\">27. How does the&nbsp;<code>angular.Module<\/code>&nbsp;work?<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#28\">28. What are some ways to improve performance in an AngularJS app?<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#29\">29. What is the difference between an Angular Component and a Directive?<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#30\">30. When a scope is terminated, two&nbsp;<code>destroy<\/code>&nbsp;events are fired. What are they for?<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#more\">15 more questions to explore<\/a><a href=\"https:\/\/www.educative.io\/blog\/angularjs-interview-questions?fbclid=IwAR1e5wmXPi3bMtyaN2HTtjYVzkCvC6lyTz1UTgHLPcj5sCrgE8OVu21N0sc#how\">How to prepare for your interview<\/a><\/small><\/p>\n\n\n\n<h4><strong>Prepare for front end interview the easy way.<\/strong>In this path, you\u2019ll refresh your knowledge of CSS, HTML, JavaScript, and frameworks with dozens of real questions.<strong><a href=\"https:\/\/www.educative.io\/path\/ace-front-end-interview\" target=\"_blank\" rel=\"noreferrer noopener\">Ace the Front End Interview<\/a><\/strong><\/h4>\n\n\n\n<h4><\/h4>\n\n\n\n<h2>1. What is AngularJS and its key features?<\/h2>\n\n\n\n<p>AngularJS is a&nbsp;<a href=\"https:\/\/www.educative.io\/blog\/compare-popular-frontend-javascript-frameworks\" target=\"_blank\" rel=\"noreferrer noopener\">JavaScript framework<\/a>&nbsp;for building large-scale, single page web applications. With AngularJS, you can use HTML as a template language and extend HTML\u2019s syntax to express application components.<\/p>\n\n\n\n<p>AngularJS is known for writing client-side applications with JavaScript and an&nbsp;<a href=\"https:\/\/www.educative.io\/blog\/mvc-tutorial\" target=\"_blank\" rel=\"noreferrer noopener\">MVC model<\/a>, creating cross-browser compliant applications, and being easy to maintain.<\/p>\n\n\n\n<p>The key features of AngularJS are:<\/p>\n\n\n\n<ul><li>Testable<\/li><li>Directives<\/li><li>Services<\/li><li>Scope<\/li><li>Controller<\/li><\/ul>\n\n\n\n<ul><li>Testable<\/li><li>Directives<\/li><li>Services<\/li><li>Scope<\/li><li>Controller<\/li><\/ul>\n\n\n\n<h2>2. What are scopes in AngularJS?<\/h2>\n\n\n\n<p>Scopes are like the glue between controller and view. Scopes are objects that refer to the application\u2019s model. They are arranged in a hierarchical structure and mimic the DOM structure.<\/p>\n\n\n\n<p><code>$scope<\/code>&nbsp;is a built-in object with application data and methods. You create properties of a&nbsp;<code>$scope<\/code>&nbsp;object inside a controller function.<\/p>\n\n\n\n<h2>3. What are services in AngularJS?<\/h2>\n\n\n\n<p>In AngularJS, services are the singleton objects or functions that carry out tasks. They are wired together with dependency injection (DI) and can be used to organize or share code across an app.<\/p>\n\n\n\n<p>AngularJS comes with many built-in services, like&nbsp;<code>$https: service<\/code>&nbsp;for making XMLHttpRequests. Most AngularJS develops make their own services.<\/p>\n\n\n\n<h2>4. Explain the key difference between AngularJS expressions and JavaScript expressions.<\/h2>\n\n\n\n<p>Just like JavaScript, AngularJS expressions are code snippets placed in binding like&nbsp;<code>{{ expression }}<\/code>. Their most notable differences are:<\/p>\n\n\n\n<ul><li>In AngularJS, expressions are evaluated against a scope object (<em>see #2<\/em>).<\/li><li>In JavaScript, expressions are evaluated against the global window.<\/li><li>In AngularJS, expression evaluation is forgiving to&nbsp;<code>null<\/code>&nbsp;and&nbsp;<code>undefined<\/code>.<\/li><li>In JavaScript, any undefined properties will return an error<\/li><li>In AngularJS, loops and conditionals cannot be added to an expression<\/li><\/ul>\n\n\n\n<h2>5. What are directives in AngularJS?<\/h2>\n\n\n\n<p>Directives are markers on DOM elements that attach new behavior to it. We can use them to creative custom HTML tags that work like custom widgets. Directives are arguably the most important component of an AngularJS application.<\/p>\n\n\n\n<p>The most common, build-in directives are:<\/p>\n\n\n\n<ul><li><code>ng-model<\/code><\/li><li><code>ng-repeat<\/code><\/li><li><code>ng-App<\/code><\/li><li><code>ng-show<\/code><\/li><li><code>ng-bind<\/code><\/li><\/ul>\n\n\n\n<h2>6. What is data binding in AngularJS?<\/h2>\n\n\n\n<p>In AngularJS, data binding in is the automatic data synchronization between the model and view components. The&nbsp;<code>ng-model<\/code>&nbsp;directive is used for data binding.<\/p>\n\n\n\n<p>This allows you to treat the model as the&nbsp;<em>single-source-of-truth<\/em>, since the view serves as a projection of the model at any given time. This way, the controller and view are totally separate, which improves testing as you can test your controller in isolation.<\/p>\n\n\n\n<h2>7. What is interpolation? Why use it in AngularJS?<\/h2>\n\n\n\n<p>Interpolation markup with embedded expressions provides data binding to text nodes and attribute values. During the compilation process, the compiler will match text and attributes.<\/p>\n\n\n\n<p>AngularJS uses an&nbsp;<code>$interpolate<\/code>&nbsp;service to check if they contain any interpolation markup with embedded expressions, which are then updated and registered as watches.<\/p>\n\n\n\n<h2>8. What is factory in AngularJS?<\/h2>\n\n\n\n<p>A factory is a simple function that allows us to add logic to an object and return that object. The factory can also be used to create a reusable function. When using factory, it will always return a new instance for that object, which can be integrated with other components like filter or directive.<\/p>\n\n\n\n<h2>9. What are the characteristics of Scope?<\/h2>\n\n\n\n<p>Scope has five main characteristics:<\/p>\n\n\n\n<ul><li>Scope provides context that expressions are evaluated against<\/li><li>To observe model mutations scopes using&nbsp;<code>$watch<\/code><\/li><li>Scopes provide APIs using&nbsp;<code>$apply<\/code>&nbsp;that will propagate model changes through the system into the view from outside of the realm of controllers, services, or AngularJS event handlers<\/li><li>Scope inherits properties from its parent and provides access to shared model properties<\/li><li>Scopes can be nested to isolate components<\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><em><strong>Want more free content?<\/strong>&nbsp;Scroll down to&nbsp;<a href=\"https:\/\/www.educative.io\/blog\/blog-newsletter-annoucement\" target=\"_blank\" rel=\"noreferrer noopener\">sign up<\/a>&nbsp;for our free, bi-monthly newsletter.<\/em><\/p><\/blockquote>\n\n\n\n<h2>10. What is dependency injection?<\/h2>\n\n\n\n<p>Dependency Injection (DI) is a software design pattern that addresses how components their dependencies. This relieves a component from finding a dependency and makes them more configurable, reusable, and testable.<\/p>\n\n\n\n<p>DI is pervasive throughout AngularJS, and it can be used either when providing&nbsp;<code>run<\/code>\/<code>config<\/code>&nbsp;blocks or when defining individual components.<\/p>\n\n\n\n<p>AngularJS provides has an excellent Dependency Injection functionality using the following components:<\/p>\n\n\n\n<ul><li>Provider<\/li><li>Value<\/li><li>Factory<\/li><li>Constant<\/li><li>Service<\/li><\/ul>\n\n\n\n<h2>11. How do you integrate AngularJS with HTML?<\/h2>\n\n\n\n<ol><li>Include AngularJS JavaScript in the HTML page.<\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head&gt;<br>&nbsp;&nbsp;&nbsp;&lt;script&nbsp;src&nbsp;=&nbsp;\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.3.14\/angular.min.js\"&gt;&lt;\/script&gt;<br>&lt;\/head&gt;<\/code><\/pre>\n\n\n\n<ol start=\"2\"><li>Add the&nbsp;<code>ng-app<\/code>&nbsp;attribute into the HTML body tag.<\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/&nbsp;example&nbsp;<br>&lt;body&nbsp;ng-app&nbsp;=&nbsp;\"testapp\"&gt;<br>&lt;\/body&gt;<\/code><\/pre>\n\n\n\n<h2>12. Why do we use double click in AngularJS?<\/h2>\n\n\n\n<p>The&nbsp;<code>ngDblclick<\/code>&nbsp;directive makes it possible to specify custom behavior on any&nbsp;<code>dblclick<\/code>&nbsp;event. This directive gives AngularJS an action when an HTML element is double-clicked. The&nbsp;<code>ngDblclick<\/code>&nbsp;directive does not override an element\u2019s&nbsp;<code>ondblclick<\/code>&nbsp;event.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/&nbsp;example<br>&lt;button&nbsp;ng-dblclick=\"count&nbsp;=&nbsp;count&nbsp;+&nbsp;1\"&nbsp;ng-init=\"count=0\"&gt;<br>&nbsp;&nbsp;Increment&nbsp;(on&nbsp;double&nbsp;click)<br>&lt;\/button&gt;<br>count:&nbsp;{{count}}<\/code><\/pre>\n\n\n\n<h2>13. How do you reset a&nbsp;<code>$timeout<\/code>&nbsp;and disable a&nbsp;<code>$watch()<\/code>?<\/h2>\n\n\n\n<p>You must assign the function\u2019s result to a variable. To resent&nbsp;<code>$timeout<\/code>&nbsp;or&nbsp;<code>$interval()<\/code>, we use&nbsp;<code>.cancel()<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var&nbsp;customTimeout&nbsp;=&nbsp;$timeout(function&nbsp;()&nbsp;{<br><br>},&nbsp;55);<br><br>$timeout.cancel(customTimeout);<\/code><\/pre>\n\n\n\n<p>To disable&nbsp;<code>$watch<\/code>, we call it.<\/p>\n\n\n\n<h2>14. What is the digest phase?<\/h2>\n\n\n\n<p>The digest cycle is crucial for data binding. It essentially compares an old and a new version of the same scope model. The digest cycle can triggered automatically or manually with&nbsp;<code>$apply()<\/code>.<\/p>\n\n\n\n<p>With every digest cycle, every scope model is compared against their previous values. When a change is found, the watches of that model are fired, and another digest cycle is initiated until it is stable.<\/p>\n\n\n\n<p>This is not needed if we only use core directives. If there are any external changes to the code, the digest cycle needs to be called&nbsp;<em>manually<\/em>.<\/p>\n\n\n\n<h2>15. What is&nbsp;<code>$rootScope<\/code>&nbsp;and how does it relate to&nbsp;<code>$scope<\/code>?<\/h2>\n\n\n\n<p><code>$rootScope<\/code>&nbsp;is a scope created on the DOM element that contains the&nbsp;<code>ng-app<\/code>&nbsp;directive. It is available throughout the entire application. An AngularJS application can only have one&nbsp;<code>$rootScope<\/code>. Other scopes are the&nbsp;<em>child scope<\/em>.<\/p>\n\n\n\n<h2>16. What is scope hierarchy in AngularJS?<\/h2>\n\n\n\n<p>Each AngularJS application has one root scope and many child scopes. When a new scope is created, it is added as a child of its parent. This will implement a hierarchical structure like the DOM.<\/p>\n\n\n\n<p><code>$rootScope<\/code><\/p>\n\n\n\n<ul><li><code>$scope<\/code>&nbsp;for&nbsp;<code>myController 1<\/code><\/li><li><code>$scope<\/code>&nbsp;for&nbsp;<code>myController 2<\/code><\/li><\/ul>\n\n\n\n<h2>17. How can you make an ajax call using AngularJS?<\/h2>\n\n\n\n<p>AngularJS uses the&nbsp;<code>$https:<\/code>&nbsp;to make ajax calls. The server will make a database call to get records. AngularJS uses the JSON format for data.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function&nbsp;employeeController($scope,$https:)&nbsp;{<br>&nbsp;&nbsp;&nbsp;var&nbsp;url&nbsp;=&nbsp;\"tasks.txt\";<br>&nbsp;&nbsp;&nbsp;$https.get(url).success(&nbsp;function(response)&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$scope.employee&nbsp;=&nbsp;response;&nbsp;<br>&nbsp;&nbsp;&nbsp;});<br>}<\/code><\/pre>\n\n\n\n<h2>18. What are some common Angular Global API functions?<\/h2>\n\n\n\n<p>The following four Global API functions are commonly used in AgularJS:<\/p>\n\n\n\n<ul><li><code>Angular.isNumber<\/code>: returns&nbsp;<code>true<\/code>&nbsp;if the reference is a numeric value<\/li><li><code>Angular.isString<\/code>: return true if the reference is a string type<\/li><li><code>Angular.lowercase<\/code>: converts a string to lowercase letters<\/li><li><code>Angular.uppercase<\/code>: converts a string to uppercase letters<\/li><\/ul>\n\n\n\n<h3>Ace your interview the first time around<\/h3>\n\n\n\n<p>Brush up on your front end interview skills without scrubbing through videos or documentation. Educative\u2019s text-based learning paths are easy to skim and feature live coding environments, making learning quick and efficient.<\/p>\n\n\n\n<p><strong><a href=\"https:\/\/www.educative.io\/path\/ace-front-end-interview\" target=\"_blank\" rel=\"noreferrer noopener\">Ace the Front End Interview<\/a><\/strong><\/p>\n\n\n\n<h2>19. How do you hide an HTML tag?<\/h2>\n\n\n\n<p>You can use the&nbsp;<code>ngHide<\/code>&nbsp;directive to reveal or hide an HTML element that is provided to the attribute. By removing or adding the&nbsp;<code>.ng-hide<\/code>&nbsp;<a href=\"https:\/\/www.educative.io\/blog\/css-interview-questions-cheat-sheet\" target=\"_blank\" rel=\"noreferrer noopener\">CSS class<\/a>&nbsp;onto the element, the HTML element is hidden or revealed. The&nbsp;<code>.ng-hide<\/code>&nbsp;CSS class is predefined.<\/p>\n\n\n\n<p>The&nbsp;<code>.ng-hide<\/code>&nbsp;class will style an element with&nbsp;<code>display: none !important<\/code>&nbsp;by default. This can be overwritten with the&nbsp;<code>.ng-hide<\/code>&nbsp;CSS class.<\/p>\n\n\n\n<h2>20. Name and describe different phases of the AngularJS Scope lifecycle.<\/h2>\n\n\n\n<p>The phases of AngularJS Scope lifecycle are as follows:<\/p>\n\n\n\n<ul><li><strong>Creation:<\/strong>&nbsp;The root scope is created during the application.<\/li><li><strong>Model mutation:<\/strong>&nbsp;Directives register watches on the scope that propagate model values to the DOM.<\/li><li><strong>Watcher registration:<\/strong>&nbsp;Mutations should only be made only within the&nbsp;<code>scope.$apply()<\/code>. This is done implicitly by AngularJS.<\/li><li><strong>Mutation observation:<\/strong>&nbsp;After&nbsp;<code>$apply<\/code>, the&nbsp;<code>$digest<\/code>&nbsp;cycle starts on the root scope, during which&nbsp;<code>$watched<\/code>&nbsp;expressions are checked for any model mutation.<\/li><li><strong>Scope destruction:<\/strong>&nbsp;The scope creator will destroy unnecessary child scopes using the&nbsp;<code>scope.$destroy()<\/code>&nbsp;API. Memory used by the child scopes are then reclaimed by the garbage collector.<\/li><\/ul>\n\n\n\n<h2>21. How do you create nested controllers in AngularJS?<\/h2>\n\n\n\n<p>In AngularJS, it is possible to create nested controllers. Nesting controllers will chains the&nbsp;<code>$scope<\/code>, and it changes the same&nbsp;<code>$scope<\/code>&nbsp;variable in the parent controller as well.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div&nbsp;ng-controller=\"MainCtrl\"&gt;<br>&nbsp;&lt;p&gt;{{msg}}&nbsp;{{name}}!&lt;\/p&gt;<br>&lt;div&nbsp;ng-controller=\"SubCtrl1\"&gt;<br>&lt;p&gt;Hi&nbsp;{{name}}!&lt;\/p&gt;<br>&nbsp;&nbsp;&nbsp;&lt;div&nbsp;ng-controller=\"SubCtrl2\"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;{{msg}}&nbsp;{{name}}!&nbsp;Your&nbsp;name&nbsp;is&nbsp;{{name}}.&lt;\/p&gt;<br>&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<br>&lt;\/div&gt;<br>&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h2>22. Explain the differences between Angular and jQuery. Which do you use for certain cases?<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.educative.io\/blog\/what-is-jquery-javascript-library\" target=\"_blank\" rel=\"noreferrer noopener\">jQuery<\/a>&nbsp;is a library for DOM manipulation. jQuery functions best for the following uses:<\/p>\n\n\n\n<ul><li>HTML and DOM manipulation<\/li><li>Event Handling<\/li><li>CSS manipulation<\/li><li>Animation control<\/li><li>Ajax\/JSON support<\/li><\/ul>\n\n\n\n<p>AngularJS is a JavaScript framework. It is best for the following use cases:<\/p>\n\n\n\n<ul><li>Directives as an extension to HTML<\/li><li>Web application development<\/li><li>Dependency Injection<\/li><li>Unit Testing<\/li><li><a href=\"https:\/\/www.educative.io\/blog\/mvc-tutorial\" target=\"_blank\" rel=\"noreferrer noopener\">MVC Framework<\/a>&nbsp;support<\/li><li>Two way data binding<\/li><li>RESTful API support<\/li><\/ul>\n\n\n\n<p>AngularJS is considered more difficult to understand, while jQuery is considered easier to understand than AngularJS. AngularJS supports&nbsp;<strong>two-way binding process<\/strong>, and jQuery does not. AngularJS also provides support for&nbsp;<strong>deep linking routing<\/strong>, and jQuery does not.<\/p>\n\n\n\n<h2>23. Which hooks are available in AngularJS? What are their use cases?<\/h2>\n\n\n\n<p>An AngularJS component can implement lifecycle hooks, which are methods to be called during a component\u2019s life. The following are hook methods can be implemented in AngularJS.<\/p>\n\n\n\n<ul><li><code>$onInit()<\/code><\/li><li><code>$onChanges(changesObj)<\/code><\/li><li><code>$doCheck()<\/code><\/li><li><code>$onDestroy()<\/code><\/li><li><code>$postLink()<\/code><\/li><\/ul>\n\n\n\n<h2>24. What are pipes in AngularJS?<\/h2>\n\n\n\n<p>Pipes provide a simple method for transforming data. They are simple functions useable in template expressions. They take an inputted value and return a transformed one. Pipes work by converting data into the specified format. AngularJS it provides built-in pipes, or they can be created by the developer.<\/p>\n\n\n\n<p>To make a pipe, we use the pipe character (<code>|<\/code>) followed by a filter within a template expression.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;Their&nbsp;full&nbsp;name&nbsp;is&nbsp;{{&nbsp;lastName&nbsp;|&nbsp;uppercase&nbsp;}}&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<h2>25. What are isolated unit tests?<\/h2>\n\n\n\n<p>In AngularJS, an isolated unit test involves checking the instance of a class&nbsp;<strong>without using injected values<\/strong>. Unit testing means we are testing individual units of code. To do&nbsp;<a href=\"https:\/\/www.educative.io\/blog\/software-testing-types-101\" target=\"_blank\" rel=\"noreferrer noopener\">software testing<\/a>&nbsp;correctly, we must isolate the unit that we want to test. This avoids other complications, like making XHR calls to fetch the data.<\/p>\n\n\n\n<h2>26. What is Angular CLI? What are its uses?<\/h2>\n\n\n\n<p>Angular CLI is also called the command line interface tool for AngularJS. It can be used to build, initialize, or maintain Angular apps. It offers interactive UI like command shell. Angular CLI drastically speeds up development time.<\/p>\n\n\n\n<p>It is great for quickly building ng2 apps. It is not recommended for new AngularJS developers who want to understand what is going on underneath the hood.<\/p>\n\n\n\n<h2>27 How does the&nbsp;<code>angular.Module<\/code>&nbsp;work?<\/h2>\n\n\n\n<p>The&nbsp;<code>angular.Module<\/code>&nbsp;is a global place for creating and registering modules. Any modules available to an AngularJS application must be registered with&nbsp;<code>angular.Module<\/code>.<\/p>\n\n\n\n<p>Passing one argument will retrieve an&nbsp;<code>angular.Module<\/code>. Passing more than one argument creates a new&nbsp;<code>angular.Module<\/code>.<\/p>\n\n\n\n<h2>28. What are some ways to improve performance in an AngularJS app?<\/h2>\n\n\n\n<p>There are two methods that are officially recommended for production:&nbsp;<strong>enabling strict DI mode<\/strong>&nbsp;and&nbsp;<strong>disabling debug data<\/strong>.<\/p>\n\n\n\n<p>Enabling strict DI mode can be achieved by being set as a directive, like so:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&nbsp;ng-app=\u201cmyApp\u201d&nbsp;ng-strict-di&gt;<\/code><\/pre>\n\n\n\n<p>Disabling debug data can be achieved with the&nbsp;<code>$compileProvider<\/code>, like so:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>myApp.config(function&nbsp;($compileProvider)&nbsp;{<br>&nbsp;&nbsp;$compileProvider.debugInfoEnabled(false);<br>});<\/code><\/pre>\n\n\n\n<p>Some other popular enhancements to performance are:<\/p>\n\n\n\n<ul><li>Using one-time binding (when possible)<\/li><li>Making&nbsp;<code>$httpProvider<\/code>&nbsp;use&nbsp;<code>applyAsync<\/code><\/li><\/ul>\n\n\n\n<h2>29. What is the difference between an Angular Component and a Directive?<\/h2>\n\n\n\n<p>An&nbsp;<strong>AngularJS component<\/strong>&nbsp;is a directive that makes it possible to use the web component functionality throughout an application. With a component, you can divide your application into smaller components. The role of components is to:<\/p>\n\n\n\n<ul><li>Declare new HTML via a&nbsp;<code>templateUrl<\/code>&nbsp;or&nbsp;<code>template<\/code><\/li><li>Create components as part of a component architecture<\/li><li>Bind view logic to HTML<\/li><li>Define pipes<\/li><\/ul>\n\n\n\n<p>An&nbsp;<strong>AngularJS directive<\/strong>&nbsp;is a technique we use to attach behavior to an element. This aids with reusability of your components. The role of directives is to:<\/p>\n\n\n\n<ul><li>Add behavior or extend the existing DOM<\/li><li>Add existing behavior to an element<\/li><\/ul>\n\n\n\n<h2>30. When a scope is terminated, two&nbsp;<code>destroy<\/code>&nbsp;events are fired. What are they used for?<\/h2>\n\n\n\n<p>The first event is an AngularJS event called&nbsp;<code>$destroy<\/code>. This can be used by AngularJS scopes.<\/p>\n\n\n\n<p>The second event is a&nbsp;<em>jqLite\/jQuery<\/em>&nbsp;event. This event is called when a node is removed.<\/p>\n\n\n\n<h2>15 more questions to explore<\/h2>\n\n\n\n<ol><li>What is the Ahead of Time Compilation?<\/li><\/ol>\n\n\n\n<ol start=\"9\"><li>How do you implement the lowercase filter?<\/li><\/ol>\n\n\n\n<h2>How to prepare for your interview<\/h2>\n\n\n\n<p>Congrats! You\u2019ve made it to the end. Preparing for your AngularJS interview will take time, so be patient with the process. The best way to continue learning is:<\/p>\n\n\n\n<ul><li>Read and understand the official AngularJS Developer Guide<\/li><li>Investigate performance issues and learn how to articulate solutions<\/li><li>Get hands-on practice with questions<\/li><li>Brush up on your front end interview skills, including HTML and JavaScript<\/li><\/ul>\n\n\n\n<p>To get more practice with front end interview, check out Educative\u2019s curated learning path&nbsp;<strong><a href=\"https:\/\/www.educative.io\/path\/ace-front-end-interview\" target=\"_blank\" rel=\"noreferrer noopener\">Ace the Front End Interview&nbsp;<\/a><\/strong>. This path will help you make sure you shake off any cobwebs and make a lasting positive impression on your interviewers. You\u2019ll review all the key concepts you need to be familiar with in CSS, HTML, and JavaScript, frameworks, libraries and more.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>AngularJS continues to rise in popularity, and more companies are seeking talented AngularJS developers. More than&nbsp;6,700 companies&nbsp;report that they use AngularJS in their tech stacks, including Google, Amazon, Lyft, Snapchat, and more.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[132],"tags":[123],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1741"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1741"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1741\/revisions"}],"predecessor-version":[{"id":1742,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1741\/revisions\/1742"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}