1. Home
2. All Blogs
3. Angular JS - Animate - Interview questions

Angular JS - Animate - Interview questions

Q. 1 What Does ng Animate Do?

The ng Animate module adds and removes classes.
The ng Animate module does not animate your HTML elements. However, when ng Animate notices certain events, such as hiding or showing an HTML element, the element receives some pre-defined classes that can be used to create animations.

Q. 2 Define animating a transition .

animate a transition that changes an HTML element from one state to another. For example, you can specify whether a button displays open or closed based on the user's last action. When the button is in the open state, it is visible and is yellow. When it is in the closed state, it is translucent and blue.

In HTML, these attributes are set using common CSS styles such as color and opacity. In Angular, use the style() function to specify a set of CSS styles for use with animations. Collect a set of styles in the animation state, and give the state a name, such as open or closed.

Q. 3 Define Animation State and Style .

Use Angular's position() function to define different states to be called at the end of each transition. This function takes two arguments: a unique name such as open or closed and a style() function.

Use the style() function to define a set of styles to associate with a given state name. It would be best to use CamelCase for style attributes that contain dashes, such as background color, or wrap them in quotes, such as 'background color'.

Q. 4 Define Triggering the animation .

Animation needs a trigger so that it knows when to start. The trigger() function collects states and transitions and gives the animation a name so that you can attach it to the triggering element in the HTML template.

The trigger() function describes the name of the property to watch for changes. When a change occurs, the trigger initiates the actions included in its definition.

Q. 5 What are the controllers in AngularJS?

Controllers are JavaScript functions which are used to provide data and logic to HTML UI. It acts as an interface between Server and HTML UI. Each controller accepts $scope as a parameter which refers to the application/module that controller is going to control.

Q. 6 What are the uses of controllers in AngularJS?

AngularJS controllers are used for:

• Setting the initial state of the $scope object
• Adding behavior to the $scope object

Q. 7 What is data binding in AngularJS?

Data Binding is the automatic synchronization of data between model and view. In AngularJS, it performs the automatic synchronization process between the model and view.

Q. 8 What are the services in AngularJS?

Services are objects that can be used to store and share data across the application. AngularJS offers many built-in services, and each of them is responsible for a specific task. They are always used with the prefix $ symbol.

Q. 9 What is a template in AngularJS?

A template consists of HTML, CSS, and AngularJS directives, which are used to render the dynamic view. It is more like a static version of a web page with some additional properties to inject and render that data at runtime. The templates are combined with information coming from model and controller.

Q. 10 Is AngularJS dependent on JQuery?

AngularJS is a JavaScript framework with key features like models, two-way binding, directives, routing, dependency injections, unit tests, etc. On the other hand, JQuery is a JavaScript library used for DOM manipulation with no two-way binding features.

Q. 11 What is Linking Function ?

Link is used for combining the directives with a scope and producing a live view. The link function is used for registering DOM listeners as well as updating the DOM. The linking function is executed as soon as the template is cloned.

Q. 12 How will you explain deep linking in AngularJS?

Deep linking is the method which allows us to encode the state of the application in the URL in such a way that it can be bookmarked. Then the application can further be restored from the URL to the same state.

Q. 13 Which of the types in linking function ?

There are two types of linking function:

• Pre Linking Function
• Pre-linking functions are executed before the child elements are linked. This method is not considered as a safe way for DOM transformation.
• Post Linking Function
• Post-linking functions are executed after the child elements are linked. This method is a safe way for DOM transformation.

Q. 14 What is Injector ?

An injector is referred to as a service locator. It is used to receive object instances as defined by the providers, invoke methods, instantiate types, and load modules. Each Angular application consists of a single injector which helps to look upon an instance by its name.

Q. 15 What is internationalization?

Internationalization is the method for showing locale-specific information on a website. Consider a website displaying content in the English language in the United States and Danish in France.

Q. 16 Which of the types of internationalization ?

AngularJS has inbuilt internationalization support for three types of filters:

• Currency
• Date
• Numbers

Q. 17 What is the syntax for creating a new date object?

The syntax for creating new date object is given below:

$scope.newDate=new Date();

Q. 18 What are the different types of directives available in AngularJS?

AngularJS provides support for creating custom directives for the following type of elements:

• Element-Directive: Element directives are activated when a matching element is encountered.
• Attribute: Attribute directives are activated when a matching attribute is encountered.
• CSS : CSS directives are activated when a matching CSS style is encountered.
• Comment : Comment directives are activated when a matching comment is encountered.

Q. 19 Explain the compilation process of AngularJS?

Angular's HTML compiler allows us to teach the browser, new HTML syntax. It also allows the developer to attach new behavior or attributes to any HTML element known as directives. AngularJS compilation process automatically takes place in the web browser. It does not contain any server-side or pre-compilation procedure.

AngularJS uses <$compiler> service for the compilation process of an Angular HTML page. Its compilation process starts after the HTML page (static DOM) is completely loaded.

Q. 20 Which phases available in Compilation process ?

It occurs in two phases:

• Compile : It checks into the entire DOM and collects all of the directives.
• Link : It connects the directives with a scope and produces a live view.

Q. 21 Is AngularJS well-suited with all browsers?

Yes, AngularJS is supported with all the browsers like Safari, Chrome, Mozilla, Opera, and Internet Explorer, etc. It is also companionable with mobile browsers.

Q. 22 What is purpose of interpolation in AngularJS?

Interpolation refers to the phenomenon of binding data by embedding expressions to the attribute and text nodes. The compiler does the task of matching the text and the attributes during the compilation. Internally, AngularJS uses $interpolate built-in service to check if there is any markup having embedded expressions and if found then they are updated and registered in the form of watches.

Q. 23 What is string interpolation in Angular.JS ?

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

Q. 24 How can you integrate AngularJS with HTML?

We can integrate AngularJS in the HTML page by first binding the AngularJS library to the HTML page using the