Technology Guru

Saturday 6 May 2017

AngularJS Interview Questions Part - 7

AngularJS Interview Questions Part - 7

Q 1. How to embed views inside AngularJS application?

Ans 1. HTML does not support embedding html pages within html page. Using AngularJS, we can embed HTML pages within a HTML page using ng-include directive.

Q 2. What are the steps for embedding views inside AngularJS application?
Ans 2. Following steps should be followed –

1. Move the code for your main HTML file to a separate HTML file e.g. NewView.html.

2. Then include it in your main HTML page with the help of ng-include directive.

Example -

Here, ViewHTMLFile is the NewView.html file we created in step 1.

Click here to watch more informative AngularJS Tutorial videos!

Q 3. Why is view embedding preferred in AngularJS?

Ans 3. View embedding is helpful in a situation where you need to use a large number of views and your code becomes unmanageable.

For instance, say your main HTML page needs to use 100 views then you can manage them well by including views.

Q 4. What is AJAX?

Ans 4. AJAX is an acronym for Asynchronous Javascript and XML.

AJAX is helpful in following situations –

1. Update UI without reloading the entire page.

2. Requesting data in the background

3. Sending data in the background

4. Invoking service in the background

Q 5. How to use AJAX in AngularJS application?

Ans 5. AngularJS provides $https service to read data from the server. The server makes a call to get the desired records. AngularJS needs data in JSON format. Once the data is ready, $https can be used to get the data from server.

Example –
app.controller("countryController", function ($scope, $http) {
            var url = "Country.txt";

            $http.get(url).then(function (response) {
                $scope.countries = response.data;
            });

});

In the above example, $http service is being injected which gets data from a URL and the data is then assigned to the model property – “countries”.

Click here to watch more informative JQuery Tutorial videos!

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!

Safe ads

Saturday 6 May 2017

AngularJS Interview Questions Part - 7

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