AngularJS Interview

1. What is AngularJS?
Ans. AngularJS 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.

AngularJS 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.

2. Why to use AngularJS?
Ans. There are following reasons to choose AngularJS as a web development framework:
  • It is based on MVC pattern which helps you to organize your web apps or web application properly.
  • It extends HTML by attaching directives to your HTML mark-up with new attributes or tags and expressions in order to define very powerful templates.
  • It encapsulates the behaviour of your application in controllers which are instantiated with the help of dependency injection.
  • It supports dependency injection which helps you to test your angular app code very easily.
  • It supports services that can be injected into your controllers to use some utility code to fulfil your need. For example, it provides $http service to communicate with REST service.
  • It supports two-way data binding i.e. connects your HTML (views) to your JavaScript objects (models) seamlessly. In this way any change in model will update the view and vice versa without any DOM manipulation or event handling.
  • It also allows you to create your own directives, making reusable components that fill your needs and abstract your DOM manipulation logic.
  • AngularJS is mature community to help you. It has widely support over the internet

3. Why this project is called "AngularJS"?
Ans. Html has angle brackets i.e. <,> and ng sound like Angular. That’s why it is called AngularJS

4. What are the advantages of AngularJS?
Ans. Following advantages:
  1. Data Binding - AngularJS provides a powerful data binding mechanism to bind data to HTML elements by using scope.
  2. Code Reusability - AngularJS allows you to write code which can be reused. For example, custom directive which you can reuse.
  3. Customize & Extensible - AngularJS is customized and extensible as per your requirement. You can create your own custom components like directives, services etc.
  4. Compatibility - AngularJS 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.
  5. Support – AngularJS is mature community to help you. It has widely support over the internet. Also, AngularJS is supported by Google which gives it an advantage.
  6. Testing - AngularJS 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.

5. How AngularJS is different from other JavaScript Framework?
Ans. Today, 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.
AngularJS is different from other JavaScript framework in following ways:
  1. AngularJS mark-up lives in the DOM.
  2. AngularJS uses plain old JavaScript objects (POJO).
  3. AngularJS is leverages with Dependency Injection.

6. What IDEs you can use for AngularJS development?
Ans. AngularJS development can be done with the help of following IDEs:
1. Visual Studio Code, 2. Visual Studio 2012 or higher, 3. Eclipse, 4. WebStorm, 5. Sublime Text and 6. Atom

7. Does AngularJS have dependency on jQuery?
Ans. AngularJS has no dependency on jQuery library. But it can be used with jQuery library.

8. How to use jQuery with AngularJS?
Ans. By 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 started to use jQuery library.

9. Compare the features of AngularJS and jQuery?
Ans. The comparison of AngularJS and jQuery features are given below:

imga33sdd


10. What is jQLite or jQuery lite?
Ans. jQLite 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.
Here is a table of supported jQuery methods by jQLite.

imagess.........


11. How to access jQLite or jQuery with AngularJS?
OR
What is angular.element() in AngularJS?
Ans. jQuery 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 i.e.
angular.element() === jQuery() === $() 

Example:
   <html>
                <head>
                <script src="lib/angular.js">  </script>
                <script type="text/javascript">
                var app = angular.module('app', []);
                app.controller("mainCtrl", function ($scope, $element) {              
                $scope.clickme = function () {
                var elem = angular.element(document.querySelector('#txtName'));
                console.log(elem.val())// console the value of textbox
                };
                });
                </script>
                </head>                
                <body ng-app="app">
                <div ng-controller="mainCtrl">
                <input type="text" id="txtName" value="Santosh Kumar Singh" />
                <button type="button" ng-click="clickme()">Click me</button>
                </div>
                </body>
                </html>

12. Is AngularJS a library, framework, plugin or a browser extension?
Ans:
AngularJS is a first class JavaScript framework which allows you to build well structured, easily testable, and maintainable front-end applications. It is not a library since library provides you limited functionality or has dependencies to other libraries.
It is not a plugin or browser extension since it is based on JavaScript and compatible with both desktop and mobile browsers.

13. What browsers AngularJS support?
Ans:
The latest version of AngularJS 1.5.x support Safari, Chrome, Firefox, Opera 15+, IE9+ and mobile browsers (Android, Chrome Mobile, iOS Safari, Opera Mobile).
AngularJS 1.3 has dropped support for IE8 but AngularJS 1.2 will continue to support IE8

14. What are AngularJS features?
Ans:
  1. Modules
  2. Directives
  3. Templates
  4. Scope
  5. Expressions
  6. Data Binding
  7. MVC (Model, View & Controller)
  8. Validations
  9. Filters
  10. Services
  11. Routing
  12. Dependency Injection
  13. Testing

15. How AngularJS handle the security?
Asn:
AngularJS provide following built-in protection from basic security holes:

1. Prevent HTML injection attacks.
2. Prevent Cross-Site-Scripting (CSS) attacks.
3. Prevent XSRF protection for server side communication.
Also, 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.

16. What are Modules in AngularJS?
Ans:
AngularJS modules are containers just like namespace in C#. They divide an angular app into small, 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.

Creating an AngularJS module
            <script type="text/javascript">
                // defining module
                angular.module('myApp', []);

                //OR defining module which has dependency on other modules
                angular.module('myApp', ['dependentModule1', 'dependentModule2']);
            </script>
  
         

Using an AngularJS module into your app
You can bootstrap your app by using your AngularJS module as given below:
    <html ng-app="myApp">
    <head> ...
    </head>
    <body> ...
    </body>
;