Technology Guru

Friday, 28 April 2017

AngularJS Interview Questions Part - 6

Q 1. What are modules in AngularJS?

Ans 1. AngularJS supports modular approach. Modules are used to separate logics say services, controllers, application etc. and keep the code clean. We define modules in separate javascript files.

Q 2.     Why are modules required in AngularJS?
Ans 2. Modules are required in AngularJS to make code more manageable. We can move different components of javascript code like controllers, app registration, etc into separate javascript files. Then, these files are referenced from within the main HTML file.

Example-

<head>
        <script src="angular.min.js"></script>
        <script src="ApplicationModule.js"></script>
        <script src="ControllerModule.js"></script>
</head>

In the above example, “ApplicationModule.js” javascript file contains the code for registering the app and “ControllerModule.js” javascript file contains the code for controller. We have just referenced the files from within our main file.

Click here to watch more informative AngularJS Tutorial videos!

Q 3. How to implement validation in AngularJS?

Ans 3. We can use $dirty, $invalid and $error to validate form elements.

Q 4. What needs to be done before implementing validation in AngularJS?

Ans 4. Remember to use novalidate with a form declaration to disable any browser specific validation.

Q 5. How to use $dirty for validation in AngularJS?

Ans 5. $dirty indicates that the value has changed.

Example-

<form name="companyForm" novalidate>

<input name="companyname" type="text" ng-model="companyName">

<span style="color:red" ng-show="companyForm.location.$dirty">

<span>Location has been changed.</span>

</span>

</form>

RESULT -

In the above example, the error “Location has been changed.” in red would only be shown when $dirty is true.

Q 6. How to use $invalid for validation in AngularJS?

Ans 6. $invalid indicates that value entered is invalid.

Example –

<form name="companyForm" novalidate>

<input name="CEOEmail" type="email" ng-model="email" length="100">

<span style="color:red" ng-show="companyForm.CEOEmail.$invalid">

<span>Email Id is invalid.</span>

</span>

</form>

In the above example, the error “Email Id is invalid.” in red would only be shown when $invalid is true.

RESULT –

Q 7. How to use $error for validation in AngularJS?

Ans 7. $invalid indicates the exact error.

Example –

<form name="companyForm" novalidate>

<input name="companyname" type="text" ng-model="companyName" required>

<span style="color:red" ng-show="companyForm.companyname.$error.required">

<span>Company Name is required.</span>

</span>

</form>

In the above example, the error “Company Name is required.” in red would only be shown when $error.required is true.

RESULT -

Click here to watch more informative JQuery Tutorial videos!

Friday, 21 April 2017

AngularJS Interview Questions Part - 5

AngularJS Interview Questions Part - 5

Q 1. What are filters in AngularJS?

Ans 1. Filters can be used to format data or select a subset of items from array and return it as a new array. Filters can be added to expressions by using the pipe character |, followed by a filter.

Example- {{FirstName | uppercase}}

RESULT -

The uppercase filter above will display the value of FirstName in uppercase.

Q 2. How to use lowercase filter in AngularJS?
Ans 2. The lowercase filter converts a text to lower case text. Add lowercase filter to an expression using pipe character.

Example- {{employee.LastName | lowercase}}

RESULT-

The lowercase filter above will display the value of LastName in lowercase.

Click here to watch more informative AngularJS Tutorial videos!

Q 3. How to use uppercase filter in AngularJS?

Ans 3. The uppercase filter converts a text to upper case text. Add uppercase filter to an expression using pipe character.

Example- {{FirstName | uppercase}}

RESULT -

The uppercase filter above will display the value of FirstName in uppercase.

Q 4. How to use currency filter in AngularJS?

Ans 4. The currency filter formats text in a currency format. Add currency filter to an expression returning number using pipe character.

Example- {{employee.Salary | currency}}

RESULT -

In the above example Salary will be formatted as currency and displayed.

Q 5. How to use filter filter in AngularJS?

Ans 5. The filter filter is used to filter the array to a subset of it based on provided criteria.

Example-

<body ng-app="ngApp" ng-init="Employees = [{FirstName:'steven', LastName:'WADE', Salary:60000}, {FirstName:'steve', LastName:'WATSON', Salary:50000},

{FirstName:'gilbert', LastName:'SCOTT', Salary:80000}]">

<input type="text" ng-model="filterValue"/> </br></br>
    <table>
        <tr ng-repeat="employee in Employees | filter:filterValue">
            <td>{{employee.FirstName | uppercase}}</td>
            <td>{{employee.LastName | lowercase}}</td>
            <td>{{employee.Salary | currency}}</td>
        </tr>

</table>

</body>

RESULT-

Before Filtering -

After Filtering -

In the above example, the array will be filtered by the value in the input text box before being displayed in the table.

Q 6. How to use orderBy filter in AngularJS?

Ans 6. The orderBy filter orders the collection based on provided criteria.

Example –

<body ng-app="ngApp" ng-init="Employees = [{FirstName:'steven', LastName:'WADE', Salary:60000}, {FirstName:'steve', LastName:'WATSON', Salary:50000},
        {FirstName:'gilbert', LastName:'SCOTT', Salary:80000}]">
<tr ng-repeat="employee in Employees | orderBy:'Salary'">
            <td>{{employee.FirstName | uppercase}}</td>
            <td>{{employee.LastName | lowercase}}</td>
            <td>{{employee.Salary | currency}}</td>

</tr>

</body>

RESULT -

Before ordering -

After ordering -

In the above example, the array is ordered before displaying the values in the table.

Click here to watch more informative JQuery Tutorial videos!

Sunday, 16 April 2017

AngularJS Interview Questions Part - 4

AngularJS Interview Questions Part - 4

Q 1. How to create table in AngularJS?

Ans 1. Table can be constructed by repeating its rows. So, ng-repeat directive can be used to create table easily.

Example –

Features(defined with the help of $scope service inside controller)

$scope.Features = [{ FeatureName: 'Height', FeatureValue: '6ft' }, { FeatureName: 'Weight', FeatureValue: '80 Kg' }, { FeatureName: 'Complexion', FeatureValue: 'Fair' }];

<table>

<tr ng-repeat="feature in Features">

<td>{{feature.FeatureName}}</td>

<td>{{feature.FeatureValue}}</td>

</tr>

</table>

Output –

Q 2. How can application data be bound to HTML DOM in AngularJS?

Ans 2. We can bind application data to attributes of HTML DOM elements by using some directives available with AngularJS

Click here to watch more informative AngularJS Tutorial videos!

Q 3. How to use ng-disabled directive in AngularJS?

Ans 3. The ng-disabled directive binds AngularJS application data to the disabled attribute of HTML elements.

Example-

<td><input type="checkbox" ng-model="enableDisableButton">Disable Button</td>

<td><button ng-disabled="enableDisableButton">Click Me!</button></td>

Output -

In the above example the button enables and disables based on checking and unchecking the checkbox as the value of the property – enableDisableButton changes which is bound to checkbox control. This property is also used by ng-disabled directive.

Q 4. How to use ng-show directive in AngularJS?

Ans 4. The ng-show directive shows or hides an HTML element. The ng-show directive shows (or hides) an HTML element based on the value of ng-show.

Example-

<td><input type="checkbox" ng-model="showHide1">Show Button</td>

<td><button ng-show="showHide1">Click Me!</button></td>

Output -

In the above example the button shows and hides based on checking and unchecking of the checkbox as the value of the property – showHide1 changes which is bound to checkbox control. This property is also used by ng-show directive.

Q 5. How to use ng-hide directive in AngularJS?

Ans 5. The ng-hide directive hides or shows an HTML element. The ng-hide directive hides (or shows) an HTML element based on the value of ng-hide.

Example-

<td><input type="checkbox" ng-model="showHide2">Hide Button</td>

<td><button ng-hide="showHide2">Click Me!</button></td>

Output -

In the above example the button shows and hides based on checking and unchecking of the checkbox as the value of the property – showHide2 changes which is bound to checkbox control. This property is also used by ng-hide directive.

Q 6. What is the difference between ng-show and ng-hide?

Ans 6. Both offer each other’s opposite functionality.

Example –

<td><input type="checkbox" ng-model="showHide3">Hide Button</td>
<td><button ng-show="showHide3">Click Me!</button></td>

<td><button ng-hide="showHide3">Click Me!</button></td>

In the above example when the checkbox is checked, button having directive ng-show will show and button having directive ng-hide will hide.

When the checkbox is unchecked, button having directive ng-show will hide and button having directive ng-hide will show.

Q 7. How to use ng-click directive in AngularJS?

Ans 7. The ng-click directive defines AngularJS code that will be executed when the element is being clicked.

Example –

<td><p>Total click: {{ clickCounter }}</p></td>

<td><button ng-click="clickCounter = clickCounter + 1">Click Me!</button></td>

Output -

In the above example, whenever the button is clicked, the operation - "clickCounter = clickCounter + 1" is performed and the value of clickCounter is incremented by 1.

Q 8. How to display the iteration number when using ng-repeat directive in AngularJS?

Ans 8. Use $index to get the iteration number when using ng-repeat directive in AngularJS.

Example –

<table>

                    <td>{{$index + 1}}</td>
                    <td>{{room.Room}}</td>
                    <td>{{room.Hotel}}</td>

</tr>

</table>

Output –

Q 9. How to create nested table in AngularJS?

Ans 9. We can create nested table in angularJS by using ng-repeat directive multiple times.

Example –

I have an array(defined array with the help of $scope service inside controller) which holds three string arrays –

$scope.Countries = [["india", "Delhi"], ["USA","Washington DC"], ["UK", "London"]];

The values of inner array will be displayed inside inner table -

<table>

<tr ng-repeat="country in Countries">

<td>

<table>

<tr ng-repeat="countryCapital in country">

<td>

{{countryCapital}}

</td>

</tr>

</table>

</td>

</tr>

</table>

Output –

Click here to watch more informative JQuery Tutorial videos!

Sunday, 2 April 2017

AngularJS Interview Questions Part - 3

AngularJS Interview Questions Part - 3

Q 1. What are expressions in AngularJS?

Ans 1. AngularJS binds data to HTML using Expressions. AngularJS expressions can be written inside double braces:

{{expression}} or inside a directive : ng-bind=“expression”

Example – {{6 + 10}} or {{EmployeeName + “ “ + Company}}

Q 2. What can expressions contain?

Ans 2. AngularJS expressions can contain literals, operators, and variables.

Q 3. What are controllers in AngularJS?

Ans 3. A controller is a JavaScript object containing attributes/properties and functions. A Controller is defined by a JavaScript constructor function which accepts $scope as a parameter which refers to the application/module that controller is to control.

Click here to watch more informative AngularJS Tutorial videos!

Q 4. How is a controller attached to DOM?

Ans 4. A controller is attached to DOM via the ng-controller directive.

Q 5. What does AngularJS do when it finds ng-controller attached to DOM?

Ans 5. AngularJS will instantiate a new Controller object, using the specified Controller's constructor function.

Q 6. What will AngularJS inject as parameter inside the controller’s constructor function?

Ans 6. A new child scope will be created and made available as an injectable parameter to the Controller's constructor function as $scope.

Q 7. Give a controller example?

Ans 7. Below is the controller example –

<head>

var app = angular.module("ngApp", []);

                        app.controller("ngController", function ($scope) {

                        $scope.FirstName = "Barack";

                        $scope.LastName = "Obama";

});

</script>

</head>

</body>

In the above example a controller named – “ngController” is defined using controller function of the application module instance - “app” having name – “ngApp”. As can be seen above inside the constructor function of the controller, “$scope” parameter is injected by AngularJS which is a service used for defining the model for application.

Using “$scope” we define two variables “FirstName” and “LastName” having values “Barack” and “Obama” respectively.

We attach the “ngController” controller with body of DOM using ng-Controller directive, which means the variables “FirstName” and “LastName” will be available inside the body of DOM.

Q 8. How can we initialize variables in AngularJS?

Ans 8. Variables can be initialized in AngularJS using ng-init directive.

<body ng-app="ngApp" ng-init="Employees = [{FirstName:'steven', LastName:'WADE', Salary:60000}, {FirstName:'steve', LastName:'WATSON', Salary:50000}]">

In the above example, the variable “Employees” has been initialized to an array of objects having properties – “FirstName”, “LastName” and “Salary”.

Click here to watch informative JQuery Tutorial videos!

Sunday, 26 March 2017

AngularJS Interview Questions Part - 2

AngularJS Interview Questions Part - 2

Q 1. What are AngularJS Directives?

Ans 1. AngularJS directives are used to extend HTML. These are special attributes starting with ng- prefix.

Example – ng-app, ng-init, ng-model, ng-repeat, etc

Q 2. How to use AngularJS ng-app directive?

Ans 2. This directive is used to auto-bootstrap an AngularJS application . The ng-app directive designates the root element of the page - e.g. on the <body> or <html> tags.

Example - <body ng-app="ngApp">

Q 3. How to use AngularJS ng-init directive?

Ans 3. ng-init directive initializes an AngularJS application data. It is used to assign values to the variables to be used in the application.

Example - <body ng-app="ngApp" ng-init="CountryCapital_List = [['India', 'Delhi'], ['Bangladesh', 'Dhaka'], ['SriLanka', 'Colombo'], ['USA', 'Washington D.C.']]">

In the above example the variable CountryCapital_List is initialized to an array of arrays.

Click here to watch more informative AngularJS Tutorial videos!

Q 4. How to use AngularJS ng-model directive?

Ans 4. The ng-model directive binds an input, select, textarea (or custom form control) to a property on the model.

Example - <input type="text" ng-model="Name"/>

Q 5. How to use AngularJS ng-repeat directive?

Ans 5. This directive repeats html elements for each item in a collection.

Example – <tr ng-repeat="Country in CountryCapital_List">

Q 6. What is $watch() in AngularJS?

Ans 6. When you create a data binding from somewhere in your view to a variable on the $scope object, AngularJS creates a "watch" internally. A watch means that AngularJS watches changes in the variable on the $scope object. The framework is "watching" the variable. Watches are created using the $scope.$watch() function.

The $scope.watch() function creates a watch of some variable. When you register a watch you pass two functions as parameters to the $watch() function:

· A value function

· A listener function

Example - $scope.$watch(function() {},

function() {}

);

The first function is the value function and the second function is the listener function.

The value function should return the value which is being watched. AngularJS can then check the value returned against the value the watch function returned the last time. That way AngularJS can determine if the value has changed. Here is an example:

$.scope.$watch(function(scope) {return scope.data.myVar },

function() {}

);

This example value function returns the $scope variable scope.data.myVar. If the value of this variable changes, a different value will be returned, and AngularJS will call the listener function.

The listener function should do whatever it needs to do if the value has changed. Perhaps you need to change the content of another variable, or set the content of an HTML element or something. Here is an example:

$scope.$watch(function(scope) { return scope.data.myVar },

function(newValue, oldValue) {

document.getElementById(“”).innerHTML =

“” + newValue + “”;

}

);

This example sets the inner HTML of an HTML element to the new value of the variable.

Q 7. What is $digest in AngularJS?

Ans 7. At key points in your application AngularJS calls the $scope.$digest() function. This function iterates through all watches and checks if any of the watched variables have changed. If a watched variable has changed, a corresponding listener function is called. The listener function does whatever work it needs to do, for instance changing an HTML text to reflect the new value of the watched variable. Thus, the $digest() function is what triggers the data binding to update.

The $scope.$digest() function iterates through all the watches in the $scope object, and its child $scope objects (if it has any). When $digest() iterates over the watches, it calls the value function for each watch. If the value returned by the value function is different than the value it returned the last time it was called, the listener function for that watch is called.

The $digest() function is called whenever AngularJS thinks it is necessary. For instance, after a button click handler has been executed, or after an AJAX call returns (after the done() / fail() callback function has been executed).

You may encounter some corner cases where AngularJS does not call the $digest() function for you. You will usually detect that by noticing that the data bindings do not update the displayed values. In that case, call $scope.$digest() and it should work.

Q 8. What is $apply in AngularJS?

Ans 8. The $scope.$apply() function takes a function as parameter which is executed, and after that $scope.$digest() is called internally. That makes it easier for you to make sure that all watches are checked, and thus all data bindings refreshed. Here is an $apply() example:

$scope.$apply(function() {

$scope.data.myVar = “New value”;

});

The function passed to the $apply() function as parameter will change the value of $scope.data.myVar. When the function exits AngularJS will call the $scope.$digest() function so all watches are checked for changes in the watched values.

Q 9. What should be the maximum number of concurrent “watches”?

Ans 9. To reduce memory consumption and improve performance it is a good idea to limit the number of watches on a page to 2,000. A utility called ng-stats can help track your watch count and digest cycles.

Q 10. What makes the angular.copy() method so powerful?

Ans 10. It creates a deep copy of the variable. A deep copy of a variable means it doesn’t point to the same memory reference as that variable. Usually assigning one variable to another creates a “shallow copy”, which makes the two variables point to the same memory reference. Therefore if we change one, the other changes as well.

Click here to watch informative JQuery Tutorial videos!

Safe ads

Friday, 28 April 2017

Friday, 21 April 2017

AngularJS Interview Questions Part - 5

Sunday, 16 April 2017

AngularJS Interview Questions Part - 4

Sunday, 2 April 2017

AngularJS Interview Questions Part - 3

Sunday, 26 March 2017

AngularJS Interview Questions Part - 2