Basic AngularJS Interview Questions and Answers for Front-end Web Developers

Basic AngularJS Interview Questions and Answers for Front-end Web Developers

AngularJS is widely known Javascript framework. If you are a front-end web developer preparing for AngularJS interview, following basic AngularJS interview questions and answers might help you little bit. Before going to AngularJS interview, you should know basic concepts and architecture of AngularJS, key features of AngularJS, how AngularJS is different from jQuery or other Javascript frameworks etc. Following basic AngularJS interview questions and answers will give you little insight of these concepts.

1. Why is this project called "AngularJS"? Why is the namespace called "ng"?

Because HTML has Angular brackets and "ng" sounds like "Angular".

2. Is AngularJS a library, framework, plugin or a browser extension?

AngularJS fits the definition of a framework the best, even though it's much more lightweight than a typical framework and that's why many confuse it with a library.


AngularJS is 100% JavaScript, 100% client side and compatible with both desktop and mobile browsers. So it's definitely not a plugin or some other native browser extension.

3. Why to choose AngularJS Javascript Framework for front-end web development?


4. What are the key features of AngularJS?

Scope

The job of the Scope is to detect changes to model objects and create an execution context for expressions. There is one root scope for the application (ng-app) with hierarchical children scopes. It marshals the model to the view and forwards events to the controller.

Controller

The Controller is responsible for construction of the model and connects it to the view (HTML). The scope sits between the controller and the view. Controllers should be straightforward and simply contain the business logic needed for a view. Generally you want thin controllers and rich services. Controllers can be nested and handle inheritance. The big difference in AngularJS from the other JavaScript frameworks is there is no DOM manipulation in controllers. It is something to unlearn when developing in AngularJS.

Model

In AngularJS, a Model is simply a JavaScript object. No need to extend anything or create any structure. This allows for nested models  - something that Backbone doesn’t do out-of-the-box.

View

The View is based on DOM objects, not on strings. The view is the HTML. HTML is declarative – well suited for UI design. The View should not contain any functional behavior. The flexibility here is to allow for multiple views per Controller.

Services

The Services in AngularJS are singletons that perform common tasks for web applications. If you need to share common functionality between Controllers, then use Services. Built-in AngularJS, Services start with a $. There are several ways to build a service: Service API, Factory API, or the $provide API.

Data Binding

Data Binding in AngularJS is a two-way binding between the View and the Model. Automatic synchronizing between views and data models makes this really easy (and straightforward) to use. Updating the model is reflected in View without any explicit JavaScript code to bind them together, or to add event listeners to reflect data changes.

Directives

Now this is cool. AngularJS allows you to use Directives to transform the DOM or to create new behavior. A directive allows you to extend the HTML vocabulary in a declarative fashion. The ‘ng’ prefix stands for built-in AngularJS directives. The App (ng-app), Model (ng-model), the Controller (ng-controller), etc. are built into the framework. AngularJS allows for building your own directives. Building directives is not extremely difficult, but not easy either. There are different things that can be done with them. Please check out AngularJS’s documentation on directives.

Filters

The Filters in AngularJS perform data transformation. They can be used to do formatting (like I did in my Directives example with padding zeros), or they can be used to do filter results (think search).

Validation

AngularJS has some built-in validation around HTML5 input variables (text, number, URL, email, radio, checkbox) and some directives (required, pattern, minlength, maxlength, min, max). If you want to create your own validation, it is just as simple as creating a directive to perform your validation.

Testable

Testing is a big concern for enterprise applications. There are several different ways to write and run tests against JavaScript code, thus against AngularJS. The developers at AngularJS advocate using Jasmine tests ran using Testacular. I have found this method of testing very straightforward and, while writing tests may not be the most enjoyable, it is just as importable as any other piece of developing an application.

5. What is a scope in AngularJS?

scope is an object that refers to the application model. It is the glue between application controller and the view. Both the controllers and directives have reference to the scope, but not with each other. It is an execution context for expressions and arranged in hierarchical structure. Scopes can watch expressions and propagate events.

6. Can you explain the concept of scope hierarchy? How many scopes can an application have?

Each Angular application has exactly one root scope, but may have several child scopes. The application can have multiple scopes, because child controllers and some directives create new child scopes. When new scopes are created, they are added as children of their parent scope. This creates a hierarchical structure similar to the DOM where they're attached.

When Angular evaluates a bound variable like say {{firstName}}, it first looks at the scope associated with the given element for the firstName property. If no such property is found, it searches the parent scope and so on until the root scope is reached. In JavaScript this behaviour is known as prototypical inheritance, and child scopes prototypically inherit from their parents. The reverse is not true. i.e. the parent can't see it's children's bound properties.

7. Is AngularJS a templating system?

At the highest level, Angular does look like a just another templating system. But there is one important reason why the Angular templating system is different, that makes it very good fit for application development: bidirectional data binding. The template is compiled in the browser and the compilation step produces a live view. This means you, the developers, don't need to write code to constantly sync the view with the model and the model with the view as in other templating systems.

8. Do I need to worry about security holes in AngularJS?

Like any other technology, AngularJS is not impervious to attack. Angular does, however, provide built-in protection from basic security holes including cross-site scripting and HTML injection attacks. AngularJS does round-trip escaping on all strings for you and even offers XSRF protection for server-side communication.

AngularJS was 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 attack vectors and we highly recommended their use.

9. What's Angular's performance like?

The startup time heavily depends on your network connection, state of the cache, browser used and available hardware, but typically we measure bootstrap time in tens or hundreds of milliseconds.

The runtime performance will vary depending on the number and complexity of bindings on the page as well as the speed of your backend (for apps that fetch data from the backend). Just for an illustration we typically build snappy apps with hundreds or thousands of active bindings.

10. Does Angular use the jQuery library?

Yes, Angular can use jQuery if it's present in your app when the application is being bootstrapped. If jQuery is not present in your script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite.

Due to a change to use on()/off() rather than bind()/unbind(), Angular 1.2 only operates with jQuery 1.7.1 or above.

11. What are the key differences between AngularJS and jQuery?


12. How will you compare AngularJS with other Javascript frameworks like Ember and Backbone?

Read complete answer

13. How will you display different images based on the status being red, amber, or green?

Use the ng-switch and ng-switch-when directives as shown below.

<div ng-switch on="account.status">
 <div ng-switch-when="AMBER">
  <img class="statusIcon"
   src='apps/dashboard/amber-dot.jpg' />
 </div>
 <div ng-switch-when="GREEN">
  <img class="statusIcon"
   src='apps/dashboard/green-dot.jpg' />
 </div>
 <div ng-switch-when="RED">
  <img class="statusIcon"
   src='apps/dashboard/red-dot.jpg' />
 </div>
</div>

14. How will you initialize a select box with options on page load?

Use the ng-init directive.

<div ng-controller="apps/dashboard/account" ng-switch
 on="!!accounts" ng-init="loadData()">

15. How will you show/hide buttons and enable/disable buttons conditionally?

Using the ng-show and ng-disabled directives.

<div class="dataControlPanel"
    ng-show="accounts.releasePortfolios">
     
    <div class="dataControlButtons">
     <button class="btn btn-primary btn-small"
      ng-click="saveComments()" ng-disabled="disableSaveButton">Save</button>
     <button class="btn btn-primary btn-small"
      ng-click="releaseRun()" ng-disabled="disableReleaseButton">Release</button>
    </div>
</div>

16. How will you loop through a collection and list each item?

Using the ng-repeat directive.

<table
  class="table table-bordered table-striped table-hover table-fixed-head portal-data-table">
  <thead>
   <tr>
    <th>account</th>
    <th>Difference</th>
    <th>Status</th>
   </tr>
  </thead>
  <tbody>
   <tr
    ng-repeat="account in acounts">
    <td width="40%">{{account.accountCode}}</td>
    <td width="30%" style="text-align: right">{{account.difference
     | currency: ""}}</td>
    <td width="30%">

     <div ng-switch on="account.status">
      <div ng-switch-when="AMBER">
       <img class="statusIcon"
        src='apps/dashboard/amber-dot.jpg' />
      </div>
      <div ng-switch-when="GREEN">
       <img class="statusIcon"
        src='apps/dashboard/green-dot.jpg' />
      </div>
      <div ng-switch-when="RED">
       <img class="statusIcon"
        src='apps/dashboard/red-dot.jpg' />
      </div>
     </div>

    </td>
   </tr>
  </tbody>
</table>

17. How will you add options to a select box?

Using the ng-options and ng-model directives.

<fieldset>
 <dl class="control-group">
  <dt>
   <label for="cientId">
    <h4>Client Id:</h4>
   </label>
  </dt>
  <dd>
   <select id="cientId" class="input-xlarge" ng-model="clientId"
    ng-options="reportClient.clientId as reportClient.clientId  for reportClient in reportClients "
    ng-click="getReportParams()" ng-change="getValuationDates()" />
  </dd>
 </dl>
 <dl class="control-group">
  <dt>
   <label for="valuationDate">
    <h4>
     Valuation Date <small>(dd/mm/yyyy)</small>
    </h4>
   </label>
  </dt>
  <dd>
   <select id="valuationDate" class="input-xlarge"
    ng-model="valuationDate"
    ng-options="reportdate for reportdate in reportDates" />
  </dd>
 </dl>
</fieldset>

18. How will you display inprogress revolving image to indicate that RESTful data is bing loaded?

<div ng-show="loading">
 <img class="loading" src="portal/images/loading_32.gif" />
</div>

 $scope.loadReportData = function($http) {
 $scope.loading = true;  // start spinng the image
 $http(
   {
    method : 'GET',
    url : propertiesService.get('restPath')
      + '/myapp/portfolio/'
      + $scope.clientId
      + '/'
      + dateService
        .userToRest($scope.reportDate),
    cacheBreaker : true
   }).success(
   function(data, config) {
    $scope.reportData = data;
    portal.log('reportData: ',
      $scope.reportData);
    $scope.loading = false;   // stop spinning the image
   }).error(
   function(data, status, headers, config) {
    if(data.errorMsg != null) {
     $scope.httpError = data.errorMsg;
    }
    else {
    $scope.httpError = "Error retrieving data from " + errorService
      .getApacheErrorTitleMessage(status,
        data, config);
       }
    $scope.loading = false;  // stop spinning the image
   });

};

40 comments

Angularjs training is essential for developing any single page web application. You have to learn Angularjs indepth to creating enterpirse SPA application.

Angularjs Training | Angular.js Course | Angularjs Online Training | Angularjs Training in Chennai | AngularJS Interview Questions

Reply

Angularjs is the great javascript framework that has some compelling features not for developers but also for the designers. Angularjs is very essential for the web developers to know about its importance.
Angularjs Training in Chennai | angularjs course in chennai

Reply

Thanks a lot for sharing this amazing knowledge with us. This site is fantastic. I always find great knowledge from it.
Hire Angular JS Developer

Reply

keep posting more informative posts like that,
javascript image editor

Reply



Great information. Thanks for providing us such a useful information. Keep up the good work and continue providing us more quality information from time to time.


Angularjs 2 Development Company

Reply

Nice to read this article.... Thanks for sharing..... Well written.....
angularjs training course in chennai

Reply

Great efforts put it to find the list of articles. thanks for taking the time to discuss this, I feel happy about it and I love learning more about this topic.
Angular JS Training in Chennai | Angular JS Training in Velachery | Angular JS Training in OMR

Reply

It's very nice blog. I'm so happy to gain some knowledge from here.

Reply

Your blog is very useful for me, Thanks for your sharing.





MSBI Training in Hyderabad

Reply

Your blog is very useful for me, Thanks for your sharing.




MSBI Training in Hyderabad

Reply

Wonderful article, very useful and well explained.


MSBI Training in Hyderabad


Reply

Lovely blog with much more interesting article, I will keep on reading your update. Thanks for the share Web Designers in Bangalore | Website Designers in Bangalore | Website Design in Bangalore Bangalore

Reply

Wow such a nice post which you uploaded here. Thanks for sharing so nice article. It really helps me out.
Angularjs Development Company |
Hire Angularjs Developer

Reply

From your discussion I have understood that which will be better for me and which is easy to use. Really, I have liked your brilliant discussion. I will comThis is great helping material for every one visitor. You have done a great responsible person. i want to say thanks owner of this blog.
python training in rajajinagar
Python training in bangalore
Python training in usa

Reply

Thank you for updating such an informative content. I Sugessed SLA for the Best Software Training in Chennai with 100% Placement. Offering Courses are Angular JS Training Course,Hardware and Networking Training, Machine Learning Training in Chennai, etc.,.

Reply

Great Article, Thank you for sharing this useful information!!

CEH Training In Hyderbad


Reply


Thanks for sharing this Information. This content is so informative and helpful for many people.
AngularJS Training in Noida

Reply

Amazing article. Your blog helped me to improve myself in many ways thanks for sharing this kind of wonderful informative blogs in live.
angularjs training in chennai | angularjs course in chennai | angularjs training institute in chennai | angularjs training institutes in chennai

Reply

Being one of the best Angular JS Development Company USA , HireFullStackDeveloperIndia is devoted to providing the most excellent proficiency to deliver dazzling applications and websites. They aspire at delivering high-class AngularJS based solutions to assist their customers.

Reply

Contents of the posts are Giving Different Types of information's about Studies and getting new innovative ideas Through this Blogs.Thanks for sharing your valuable time with Perfect content.
python training in chennai | python training in annanagar | python training in omr | python training in porur | python training in tambaram | python training in velachery

Reply

Very nice post here and thanks for it .I always like and such a super contents of these post.
Excellent and very cool idea and great content of different kinds of the valuable information's.
Salesforce Training in Chennai

Salesforce Online Training in Chennai

Salesforce Training in Bangalore

Salesforce Training in Hyderabad

Salesforce training in ameerpet

Salesforce Training in Pune

Salesforce Online Training

Salesforce Training

Reply

Fantastic post! continue sharing this article
Azure devops course in Hyderabad

Reply

Post a Comment