AngularJs Questions


AngularJs Interview Questions :-


  What is AngularJS?

AngularJS is a javascript framework used for creating single web page applications. It allows you to use HTML as your template language and enables you to extend HTML's syntax to express your application's components clearly.


  Explain data binding in AngularJS.

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.


  Explain what are the key features of AngularJS?

The key features of AngularJS are :-

1. Scope

2. Controller

3. Model

4. View

5. Services

6. Data Binding

7. Directives

8. Filters

9. Testable


  What are directives in AngularJS?

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 :-

1. Element directives

2. Attribute directives

3. CSS class directives

4. Comment directives


  Explain what is scope in AngularJS?

Scope refers to the application model, it acts like glue between application controller and the view. Scopes are arranged in hierarchical structure and impersonate the DOM ( Document Object Model) structure of the application. It can watch expressions and propagate events.


  Explain Directives in AngularJS?

AngularJS directives are only used to extend HTML and DOM elements' behavior. These are the special attributes, that start with ng- prefix, that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element.

AngularJS has a set of built-in directives like :-

1. ngBind

2. ngModel

3. ngClass

4. ngApp

5. ngInit

6. ngRepeat


  Explain what is services in AngularJS ?

In AngularJS services are the singleton objects or functions that are used for carrying out specific tasks. It holds some business logic and these function can be called as controllers, directive, filters and so on.


  What are Controllers in AngularJS?

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.


  What are the characteristics of 'Scope'?

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

2. 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).

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

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


  What is the difference between AngularJS and backbone.js?

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.


  Explain what is Angular Expression? Explain what is key difference between angular expressions and JavaScript expressions?

Like JavaScript, Angular expressions are code snippets that are usually placed in binding such as {{expression}}

The key difference between the JavaScript expressions and Angular expressions :-

1. Context :- In Angular, the expressions are evaluated against a scope object, while the JavaScript expressions are evaluated against the global window

2. Forgiving :- In Angular expression evaluation is forgiving to null and undefined, while in JavaScript undefined properties generates TypeError or ReferenceError.

3. No Control Flow Statements :- Loops, conditionals or exceptions cannot be used in an angular expression.

4. Filters :- To format data before displaying it you can use filters.


  What is "$rootScope" in AngularJS?

A scope provides a separation between View and its Model. Every application has a $rootScope provided by AngularJS and every other scope is its child scope.

Using $Rootscope :-

Using rootscope we can set the value in one controller and read it from the other controller.


  With options on page load how you can initialize a select box ?

You can initialize a select box with options on page load by using ng-init directive

<div ng-controller = "apps/dashboard/account" ng-switch

On = "!!accounts" ng-init ="loadData( )">


  What are the advantages of using AngularJS?

AngularJS has several advantages in web development.

1. AngularJS supports MVC pattern

2. Can do two ways data binding using AngularJS

3. It has per-defined form validations

4. It supports both client server communication

5. It supports animations


  Explain what is injector in AngularJS?

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


  Does Angular use the jQuery library?

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.


  Explain what is string interpolation in Angular.js?

In Angular.js the compiler during the compilation process matches text and attributes using interpolate service to see if they contains embedded expressions. As part of normal digest cycle these expressions are updated and registered as watches.


  Explain what is linking function and type of linking function?

Link combines the directives with a scope and produce a live view. For registering DOM listeners as well as updating the DOM, link function is responsible. After the template is cloned it is executed.

1. Pre-linking function :-Pre-linking function is executed before the child elements are linked. It is not considered as the safe way for DOM transformation.

2. Post linking function :-Post linking function is executed after the child elements are linked. It is safe to do DOM transformation by post-linking function.


  What is a Factory method in AngularJS?

AngularJS Factory Method :-the purpose of Factory is also the same as Service, however in this case we create a new object and add functions as properties of this object and at the end we return this object.


  How are validations implemented in AngularJS?

One of the coolest features of AngularJS is client-side validation. There are so many form directives available in AngularJS. We will talk about some of them here, we will also explain custom validation. Using it you can create your own validations.


  Explain what is Dependency Injection in AngularJS?

Dependency Injection is one of the best features of AngularJS. It is a software design pattern in which objects are passed as dependencies. It helps us to remove hard coded dependencies and makes dependencies configurable. Using Dependency Injection, we can make components maintainable, reusable and testable.


  What are the filters in AngularJS?

Filters are used to modify the data and can be clubbed in expression or directives using a pipe character. A filter formats the value of an expression for display to the user. They can be used in view templates, controllers, or services, and we can easily create our own filter. Filter is a module provided by AngularJS.

There are nine components of filter which are provided by AngularJS. We can write custom as well.

1. currency

2. date

3. filter

4. json

5. limitTo

6. lowercase

7. number

8. orderBy

9. uppercase


  What are the styling form that ngModel adds to CSS classes?

ngModel adds these CSS classes to allow styling of form as well as control :-

1. ng- valid

2. ng- invalid

3. ng-pristine

4. ng-dirty


  Who created Angular JS?

Initially it was developed by Misko Hevery and Adam Abrons. Currently it is being developed by Google.


  Explain what AngularJS routes does?

Angular js routes enable you to create different URLs for different content in your application. Different URLs for different content enables user to bookmark URLs to specific content. Each such bookmarkable URL in AngularJS is called a route.

A value in Angular JS is a simple object. It can be a number, string or JavaScript object. Values are typically used as configuration injected into factories, services or controllers. A value should be belong to an AngularJS module.

Injecting a value into an AngularJS controller function is done by adding a parameter with the same name as the value.


  Can we force the digest cycle to run manually?

Yes , you can force it to run manually by calling the "$apply()" method.


  Explain compile and link phase?

At the heart Angular framework is a parser. A parser which parses the Angular directives and render's HTML output.

Angular parser works in 3 steps :-

1. HTML browser parses the HTML and creates a DOM (Document Object Model).

2. Angular framework runs over this DOM looks at the Angular directives and manipulates the DOM accordingly.

3. This manipulated is then rendered as HTML in the browser.


  How can we implement SPA with Angular?

By using Angular routes.


  Can I set an Angular directive template to a HTML web page?

Yes, you can set template to page directly by using "templateUrl" property of the directive as shown in the code snippet below.

directive.templateUrl = "/templates/footer.html";


  What makes AngularJS better?

1. Registering Callbacks :- There is no need to register callbacks . This makes your code simple and easy to debug.

2. Control HTML DOM programmatically :- All the application that are created using Angular never have to manipulate the DOM although it can be done if it is required.

3. Transfer data to and from the UI :- AngularJS helps to eliminate almost all of the boiler plate like validating the form, displaying validation errors, returning to an internal model and so on which occurs due to flow of marshalling data.

4. No initialization code :- With AngularJS you can bootstrap your app easily using services, which auto-injected into your application in Guice like dependency injection style.


  In which language, AngularJS is written?

AngularJS is written in javaScript.


  When First AngularJS was released?

First AngularJS was released is 2009.


  When latest AngularJS was released?

Latest AngularJS was released in February 05, 2016.


  What is latest version of AngularJS?

1.5.0, is the latest version of AngularJS.


  Is it open-source?

Yes, It is free to use.


  What is the CDN link for AngularJS?

CDN is a permanent Global space where from we can access the various versions of library file to use directly in our web applications. For AngularJS you can refer the following CDN link.

Note :- Please copy below link and you can access the various versions of library file.

https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js


  Is AngularJS supports MVVM with MVC?

Yes, AngularJS is an Advanced JavaScript framework. It supports both MVVM and MVC design patterns.


  Can you please explain what is testability like in angular?

Very testable and designed this way from ground up. It has an integrated dependency injection framework, provides mocks for many heavy dependencies (server-side communication).


  Tell me which browsers does angular work with?

We run our extensive test suite against the following browsers: Safari, Chrome, Firefox, Opera, IE8, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari). See Internet Explorer Compatibility for more details in supporting legacy IE browsers.


  What is looping in angularjs?

It is used to display the data in loop same as foreach in PHP.


  What is forgiving in angularjs?

In Angular expression evaluation is forgiving to null and undefined, while in JavaScript undefined properties generates TypeError or ReferenceError.


  What is "no control flow statements" in Angularjs?

Loops, conditionals or exceptions cannot be used in an angular expression.


  What is "control html dom programmatically" in Angularjs?

All the application that are created using Angular never have to manipulate the DOM although it can be done if it is required.


  What is "transfer data to and from the UI" in Angularjs?

Angular.js helps to eliminate almost all of the boiler plate like validating the form, displaying validation errors, returning to an internal model and so on which occurs due to flow of marshalling data.


  What is pre-linking function in Angularjs?

Pre-linking function is executed before the child elements are linked. It is not considered as the safe way for DOM transformation.


  What is post linking function in Angularjs?

Post linking function is executed after the child elements are linked. It is safe to do DOM transformation by post-linking function.


  What IDEs you can use for AngularJS development?

AngularJS development can be done with the help of following IDEs :-

1. Visual Studio 2012, 2013, 2015 or higher

2. Eclipse

3. WebStorm

4. Sublime Text

5. TextMate


  How to use jQuery with AngularJS?

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.


  How angular modules load the dependencies?

An angular module use configuration and run blocks to inject dependencies (like providers, services and constants) which get applied to the angular app during the bootstrap process.


  What is Angular Prefixes $ and $$?

To prevent accidental name collisions with your code, Angular prefixes names of public objects with $ and names of private objects with $$. So, do not use the $ or $$ prefix in your code.


  Which one is fast between $digest and $apply?

$digest() is faster than $apply(), since $apply() triggers watchers on the entire scope chain i.e. on the current scope and its parents or children (if it has) while $digest() triggers watchers on the current scope and its children(if it has).


  What is difference between $evalAsync and $timeout?

$evalAsync :- This executes the expression on the current scope on later time. The $evalAsync makes no guarantees as to when the expression will be executed, only that :-

1. If code is queued using $evalAsync from a directive, it will run after the DOM has been manipulated by Angular, but before the browser renders.

2. If code is queued using $evalAsync from a controller, it will run before the DOM has been manipulated by Angular and before the browser renders.

$timeout :- This also executes the expression on the current scope on later time. When the code is queued using $timeout, it will run after the DOM has been manipulated by Angular and after the browser renders which may cause flicker in some cases.


  What is the difference between $watch and $observe?

$watch is a method on the scope object which is used to watch expressions. The expression can be either strings or functions. It can be called wherever you have access to scope (a controller or a directive linking function).

$observe is a method on the attrs object which is only used to observe the value change of a DOM attribute. It is only used inside directives.


  What are different states of a form in AngularJS?

The AngularJS form goes to the following states, starting from the form rendering and when the user has finished the filling of form.

1. pristine and invalid :- When the form is first time rendered and the user has not interacted with the form yet.

2. dirty and invalid :- User has interacted with the form, but form validity has not been satisfied, yet.

3. dirty and valid :- User has finished the filling of form and the entire form validations has been satisfied.


  What methods $http service support?

The $http service supports the following methods :-

1. $http.get()

2. $http.head()

3. $http.post()

4. $http.put()

5. $http.delete()

6. $http.jsonp()

7. $http.patch()


Hello!

Let's do interview preparation for node.js..

Read more