AngularJS Interview Questions And Answers

  • Que 1:

    What is AngularJS?

    Answer:

    AngularJS has been introduced by the giant, Google. It is a framework that helps you to create dynamic Web apps. Normally, AngularJS uses HTML as the backbone. AngularJS creates extended HTML tags that can be used as normal HTML tags. These tags will help you to write an efficient code. The interesting fact is that you can reduce the lines of code  you may need to write when you use normal JavaScript.

    AngularJS is an open-source JavaScript framework developed by Google. It is a structural framework for dynamic Web apps. It is easy to update and get information from your HTML document. It helps in writing a proper maintainable architecture, that can be tested at a client side code.

    • This framework is developed on MVC (Model-View-Controller) design pattern.
    • It provides full featured SPA (Single Page Application) framework.
    • It supports Dependency Injection.
    • It supports two-way data binding.
    • It provides routing features.
    • Testing was designed right from the beginning; so you can build robust tests.
    • For DOM manipulation, jqLite is built-in; which is kind of like the Mini-Me of jQuery.
    • Separation of the client side of an Application from the Server side.
    • The AngularJS framework uses Plain Old JavaScript Objects(POJO), it doesn’t need the getter or setter functions.

    Using the code

    Let's start using AngularJS. What would be the first step that you need to do? That would be to include the relevant JavaScript file as in the following:

     

  • Que 2:

    What are expressions in AngularJS?

    Answer:

    Expressions in AngularJS are just like JavaScript code snippets. JavaScript code is usually written inside double braces: {{expression}}. In other words, Angular Expressions are JavaScript code snippets with limited sub-set. Expressions are included in the HTML elements.

    Like JavaScript expressions, AngularJS expressions can also have various valid expressions. We can use the operators between numbers and strings, literals, objects and arrarys inside the expression {{ }}. For example,

    • {{ 2 + 2 }} (numbers)
    • {{Name + " " + email}} (string)
    • {{ Country.Name }} (object)
    • {{ fact[4] }} (array)

       
    •  

    Example

    1. <div ng-controller="appController">  
    2.     <span>   
    3. 4+5 = {{4+5}}   
    4. </span>  
    5.     <br />  
    6.     <br />  
    7.     <span ng-init="quantity=5;cost=25">   
    8. Total Cost = {{quantity * cost}}   
    9. </span>  
    10. </div> 

     

  • Que 3:

    Explain data binding in AngularJS.

    Answer:

    According to AngularJS.org, “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.”

    There are two ways of data binding:

    1. Data mining in classical template systems
    2. Data binding in angular templates

  • Que 4:

    Name the key features of AngularJS ?

    Answer:

    The key features of AngularJS are:

    • Scope
    • Controller
    • Model
    • View
    • Services
    • Data Binding
    • Directives
    • Filters
    • Testable

  • Que 5:

    What are directives in AngularJS?

    Answer:

    A core feature of AngularJS, directives are attributes that allow you to invent new HTML syntax, specific to your application. They are essentially functions that execute when the Angular compiler finds them in the DOM.  Some of the most commonly used directives are ng-app,ng-controller and ng-repeat.

    The different types of directives are:

    • Element directives
    • Attribute directives
    • CSS class directives
    • Comment directives

  • Que 6:

    What are Controllers in AngularJS?

    Answer:

    Controllers are Javascript functions which provide data and logic to HTML UI. As the name suggests, they control how data flows from the server to HTML UI.

  • Que 7:

    What is Angular Expression? How do you differentiate between Angular expressions and JavaScript expressions?

    Answer:

    Angular expressions are code snippets that are usually placed in binding such as {{ expression }} similar to JavaScript.

    The main differences between Angular expressions and JavaScript expressions are:

    • Context : The expressions are evaluated against a scope object in Angular, while Javascript expressions are evaluated against the global window
    • Forgiving: In Angular expression, the evaluation is forgiving to null and undefined whereas in JavaScript undefined properties generate TypeError or ReferenceError
    • No Control Flow Statements: We cannot use loops, conditionals or exceptions in an Angular expression
    • Filters: In Angular unlike JavaScript, we can use filters to format data before displaying it

  • Que 8:

    What are the characteristics of ‘Scope’?

    Answer:

    Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events. The characteristics of Scope are:

    • Scopes provide APIs ($watch) to observe model mutations.

    • Scopes provide APIs ($apply) to propagate any model changes through the system into the view from outside of the “Angular realm” (controllers, services, Angular event handlers).
    • Scopes can be nested to limit access to the properties of application components while providing access to shared model properties. Nested scopes are either “child scopes” or “isolate scopes”. A “child scope” (prototypically) inherits properties from its parent scope. An “isolate scope” does not. See isolated scopes for more information.
    • Scopes provide context against which expressions are evaluated. For example {{username}} expression is meaningless, unless it is evaluated against a specific scope which defines the username property.

  • Que 9:

    What are the advantages of using Angular.js framework?

    Answer:

    Angular.js framework has the following advantages:

    • Supports two way data-binding
    • Supports MVC pattern
    • Support static template and angular template
    • Can add custom directive
    • Supports REST full services
    • Supports form validations
    • Support both client and server communication
    • Support dependency injection
    • Applying Animations
    • Event Handlers

  • Que 10:

    What is the difference between AngularJS and backbone.js?

    Answer:

    AngularJS combines the functionalities of most third party libraries and supports individual functionalities required to develop HTML5 Apps.  While Backbone.js does these jobs individually.

  • Que 11:

    Explain what is injector in AngularJS?

    Answer:

    An injector is a service locator, used to retrieve object instance as defined by provider, instantiate types, invoke methods, and load modules.

  • Que 12:

    What is factory method in AngularJS?

    Answer:

    Factory method is used for creating a directive.  It is invoked when the compiler matches the directive for the first time. We can invoke the factory method using $injector.invoke.

    Syntax: module.factory( 'factoryName', function );
    Result: When declaring factoryName as an injectable argument you will be provided with the value that is returned by invoking the function reference passed to module.factory.

  • Que 13:

    What is ng-app, ng-init and ng-model?

    Answer:

    • ng-app : Initializes application.
    • ng-model : Binds HTML controls to application data.
    • ng-Controller : Attaches a controller class to view.
    • ng-repeat : Bind repeated data HTML elements. Its like a for loop.
    • ng-if : Bind HTML elements with condition.
    • ng-show : Used to show the HTML elements.
    • ng-hide : Used to hide the HTML elements.
    • ng-class : Used to assign CSS class.
    • ng-src : Used to pass the URL image etc.

  • Que 14:

    Does Angular use the jQuery library?

    Answer:

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

  • Que 15:

    Can AngularJS have multiple ng-app directives in a single page?

    Answer:

    No. Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. If another ng-app directive has been placed then it will not be processed by AngularJS and we will need to manually bootstrap the second app, instead of using second ng-app directive.

  • Que 16:

    Can angular applications (ng-app) be nested within each other?

    Answer:

    No. AngularJS applications cannot be nested within each other.

  • Que 17:

    What is internationalization and how to implement it in AngularJS?

    Answer:

    Internationalization is a way in which you can show locale specific information on a website. AngularJS supports inbuilt internationalization for three types of filters: currency, date and numbers. To implement internalization, we only need to incorporate corresponding js according to locale of the country. By default it handles the locale of the browser.

  • Que 18:

    On which types of component can we create a custom directive?

    Answer:

    AngularJS provides support to create custom directives for the following:

    • Element directives − Directive activates when a matching element is encountered.
    • Attribute − Directive activates when a matching attribute is encountered.
    • CSS − Directive activates when a matching css style is encountered.
    • Comment − Directive activates when a matching comment is encountered.

  • Que 19:

    What is $rootscope in AngularJS?

    Answer:

    Every application has a single root scope. All other scopes are descendant scopes of the root scope. Scopes provide separation between the model and the view, via a mechanism for watching the model for changes. They also provide event emission/broadcast and subscription facility.

  • Que 20:

    Can we have nested controllers in AngularJS

    Answer:

    Yes, we can create nested controllers in AngularJS. Nested controllers are defined in hierarchical manner while using in View.