Real Time Questions In AngularJS

In this article you will learn about some AngularJS concepts with questions and answer . 

What is a single Page application and how does it differ from web pages?

Normal web pages require a server roundtrip every time to give the output to the page.

A single-page web application however is delivered as one page to the browser and typically does not require the page to be reloaded as the user navigates to various parts of the application. This results in faster navigation, more efficient network transfers and better overall performance for the end user.

• The application is responsive in the UI with no page flicker
• The Back/Forward buttons work as expected
• More JavaScript than actual HTML
• Dynamic data loading from the server-side API, works with restful web service with JSON format
• Rich interaction among UI components
• Less data transfers from the server and most of the page process in the UI occurs client-side.
• The application contains tabs and subtabs with multiple HTML containers on the click of the tabs or subtabs and the specific portions of the page that are loaded into the page (the page will be one using the application)
• Applications written in AngularJS are cross-browser compliant. Angular automatically handles the JavaScript code suitable for each browser

How to arrange AngularJS folder and File structure?

In the UI projects we had segregated the application based on the functionalities/features it has. For example, for a banking system we have different modules i.e, Bill Pay, Financial summary, statements, Loans, Cards etc.

For each module we have different folders like:

Controllers: It contains all controller JavaScript files.

Services – We have different kind of services

• Data Services (Hitting to Database or different external services using $http, or $Q service)
• Static Data services (Used to initialize static Data)
• communication Service (Used to set some values to services and used across the app)

Views: it contains the html views and partial views.

Common: It is a folder which has Images, styles, Scripts folder. Scripts folder framework related angular in built scripts.

Directives: We have directives specific to the modules and common directives which is used across all modules, some of them Calendar, File uploader, different controls with validations, some grid customization.

Filter: This folder contains all our custom filters used across the application.

Utility: This is a folder which contains the common data manipulation logic, date formatting as per the logic needed in the applications.

Test: It contains our entire test JavaScript files which are used to test controller and other utility JavaScript files.

• In the controller we call to the services.
• Services has the code to hit to the WEB API or WCF, it gets the results and assigned it to the Scope object.
• The WEBAPI internally calls Data Layer /entity Framework or BO to hit the SQL server and gets the Data.
• In the controller we assign the data, and we bind the data to UI by reading the model properties

What are the best practices you followed in the angular projects?

These are the best practices we followed in our application

• Scope holds the source of data and communicates between the components
• Controller sets up the scope, data does the view interaction and deals with the presentation logic with no business logic
• View is responsible for displaying the UI by declaring binding and directive
• Directive does the DOM manipulation and receives view events.
• Service communicates with the server and gets data and holds the data and state.
• Used dependency to inject different modules and services in a minified way.
• Wrote Common directives for common functionality
• Wrote unit testing
• Used minified version of the script for deployment purpose
• For calling multiple services we followed Asynchronous call using $Q
• Proper namespace to avoid namespace collision and confusion in the script.
• Used AngularJS versions of JavaScript functionality like $timeout, $interval etc.
• Avoids too many watchers, one way binding for performance improvement.

How do you handle sessions in the Angular project?

Angular has client side storage using session storage, local storage and cookie storage to handle sessions.

• Implemented session management technique at the server side from a Database call.
• Wrote a web service/WCF/WEB API which we call from the front end during the application startup to check whether the client is authenticated if successful return user data in the response in the form of a token otherwise redirect it to login page.
• Stored those token details in a factory or as an object in $rootScope or a service or $cookie store so you can access it from anywhere.

From the main page to pop up page we use local storage to access the session related data.

How do you maintain security in AngularJS applications?

Mostly we rely on web API or WCF to handle security at the server side. In Angular UI we had implemented security as below.

In the routing we had some code to check user permission. We read user roles and access level from database by using an angular service via web API.

.when('/Accounts',
    {
    templateUrl: '/templates/accounts.html',
    controller: 'accountsController',
    resolve:
    {
        permission: function(authorizationService, $route)
        {
            return authorizationService.CheckRoles([roles.user]);
        },
    }
});

To some extent we follow angular $sanitize service that will parse an HTML string into tokens avoiding cross scripting type of security.

We need to do proper validation both in server side and client side to avoid any kind of security threats like SQL injections or CSRF security. Again we had implemented SSL in IIS level to give more security.

How do you do the error logging in Angular code?

Angular is a client side framework; we cannot write the log into the client side as we are looking to log at the server side for future tracing and diagnostics purpose. Write a service which has a method like this and call this using try and catch block. On exception or error log we can read the logs and call an Ajax post to handle the error and in the web API action we have that code to insert into database logs.

function log(exception)
{
    $log.error.apply($log, arguments);
    $.Ajax
    ({
        type: "POST",
        url: "WebAPI/logError ,
            //It is a action method in web api code which hits the database and do database log
        contentType: "application/json",
        data: angular.toJson
        ({
            errorUrl: $window.location.href,
            errorMessage: errorMessage
        })
    });
}

Angular Interceptor is also a good way to log errors which can be applied on request error or response error.

How to  fetch the records from SQL server and bind it to the page.

For these types of questions these are the four steps we need to remember,

1. Write a web API or WCF which will return the data from the database,
   

   public class EmployeeAPIController: ApiController
   {
       private EmployeeEntities db = new EmployeeEntities();
       public IEnumerable < Employee > GetEmployees()
       {
           return db.Employees.AsEnumerable();
       }
   }

2. Write a service which will have a web API call using $http.get,
   

   app.service('EmployeeService', function($http)
       {
       this.getAllEmployee = function()
   
       {
           return $http.get("/api/EmployeeAPI");
       }
   });

3. Call the service from the controller,
   

   app.controller('EmployeeController', function($scope, EmployeeService)
    {
       function GetAllRecords()
     {
           var promiseGet = EmployeeService.getAllEmployee();
           promiseGet.then(function(pl)
           {
                   $scope.Employees = pl.data, $scope.Data = pl.data
               },
               function(errorPl)
               {
                   $log.error('Some Error in Getting Records.', errorPl);
               });
       }
       $scope.Employees =
       {
           data: 'Data'
       };
   });

4. Bind the Scope data in the html as below,
   

   <tr ng-repeat="employee in Employees">
       <td>{{employee.Name}}</td>
       <td>{{employee.Department}}</td>
       <td>{{employee.Salary}}</td>
   </tr>

What are the different types of calls we can call in $http services?

$http is a service which provides a set of methods to call the outside WCF /web api.These methods are:

• $http.$get(url): Sends an HTTP GET request to the URL specified.
• $http.post(url, dataToBePosted): Sends an HTTP POST request to the URL specified.
• $http.put(url, data): Sends an HTTP PUT request to the URL specified.
• $http.delete(url): Sends an HTTP DELETE request to the URL specified.

The following is a small snippet showing usage of $http:

$http.get('/api/apimethod').then(function(response)
{
    return response.data;
}, function(error)
{
    return error;
});

What are the Angular JS interceptors?

(or)How do you inject custom logic in the request and response cycle?

In a request and response communication of a HTTP call if we want to inject some custom logic the HTTP Interceptor comes into picture. HTTP Interceptors executes some custom logic before or after the HTTP call.

For example, when appending the authentication token to every HTTP request that token is generated from the client who needs to be validated at the server for security purposes.

These interceptors act as a hook up for the HTTP calls.

HTTP Interceptors are used for adding custom logic for authentication, authorization, session/state management, logging, modifying Response, URL rewriting, Error handling, Caching, adding custom header, timestamp in the request /response, encrypting and decrypting the request and response information or manipulating the request and response data over the request cycles.

How to write custom directive in AngularJS  and call it in the html page?

Custom directives  are the key elements in angular projects  where we have to achieve common functionalities. Some of these are Date picker calendar control, File upload controller, all sorts of validation like allowing a textbox only numeric characters, or a textbox with text only, loader or spinning symbol, etc. 

Below is the syntax and a custom directive example, 

myModule.directive("directiveName", function(injectables component)
{
    return
    {
        restrict: "A/E/C/M", // It applies to Attribute or Element or Class or Comment
        template: "<div></div>", // Html to be added
        templateUrl: "directive.html", // template to be added
        replace: false, // replace yes/No
        transclude: false, // Transclude yes/No
        scope: false, // Current scope or isolated scope
        require: ["someOtherDirective"], // if any other directive is needed
        controller: function($scope, $element, $attrs, $transclude, otherInjectables)
        {...
        }, // controller
        link: function postLink(scope, iElement, iAttrs)
        {...
        },
        priority: 0, //Priority of directive
        terminal: false,
        compile: function compile(tElement, tAttrs, transclude)
         {
            return
            {
                pre: function preLink(scope, iElement, iAttrs, controller)
                {...
                },
                post: function postLink(scope, iElement, iAttrs, controller)
                 {...
                    } // compile functions
            }
        }
    };
});

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script>
        var myapp = angular.module('myApp', [])
        myapp.directive('firstDirective', function()
        {
            return
            {
                template: ' <
                    h3 > I am From custom directive!!! < /h3>'
            };
        });
    </script>
</head>

<body>
    <div ng-app="myApp">
        <div>
            <div>
                <first-directive>
            </div>
        </div>
    </div>
</body>

</html>

How to use controller in angular?

Controllers are simple java script functions which control data and logic to HTML in the page. We need to declare the controller in which section  it applies to the page. For example if we have a controller named myCtrl and it is defined in the module as below.

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        First Name: <input type="text" ng-model="firstName"><br> Last Name: <input type="text" ng-model="lastName"><br>
        <br> Full Name: {{firstName + " " + lastName}}</div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope)
         {
            $scope.firstName = "Pradeep";
            $scope.lastName = "Sahoo";
        });
    </script>
</body>

</html>

What is ng-include and when to use it in angular projects?

ng-include is a directive which is used to include HTML contents from other files into the view's HTML template.

For example, if we want to include top, bottom, left and right side bars in the page we need to write it as,

<div ng-include src="'views/leftsidebar.html'"></div>
<div ng-include src="'views/rightsidebar.html'"></div>
<div ng-include src="'views/topsidebar.html'"></div>
<div ng-include src="'views/bottomsidebar.html'"></div>

What is Isolate Scope and why it is required ?

By default, directives have access to the parent scope in Angular apps. When the parent scope changes at the entire directivethey are no longer useful.

The shared scope allows the parent scope to flow down into the directive but the Isolate scope doesn’t allow the parent scope to flow down into the directive. If you want to make a reusable directive you can’t rely on the parent scope and must use something called Isolate Scope instead. Isolated scope is written as scope: {}

Example of code snippet:

angular.module('mydirective').directive('sharedScope', function()
{
    return
    {
        scope: {},
        template: 'Name: {{emp.name}} Address: {{emp.address}}'
    };
});

How to apply validation in AngularJS?

The angular framework is rich in validation .Below is the code for how to achieve a simple validation.

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<body>
    <h2>
Validation Example</h2>
    <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
        <table style="border: 1px solid gray; width: 500px;">
            <tr>
                <td colspan="2">
                    <span style="color: red; padding-left: 100px; border: 3px;">Log In </span>
                </td>
            </tr>
            <br />
            <tr>
                <td>
                    Username:
                </td>
                <td>
                    <input type="text" name="user" ng-model="user" required>* <span style="color: red" ng-show="myForm.user.$dirty && myForm.user.$invalid"><span ng-show="myForm.user.$error.required">
Username is required.</span> </span>
                </td>
            </tr>
            <tr>
                <td>
                    Email:
                </td>
                <td>
                    <input type="email" name="email" ng-model="email" required>* <span style="color: red" ng-show="myForm.email.$dirty && myForm.email.$invalid"><span ng-show="myForm.email.$error.required">
Email is required.</span> <span ng-show="myForm.email.$error.email">Invalid email address.</span>
                    </span>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <p>
                        <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
                    </p>
                </td>
            </tr>
        </table>
    </form>
    <script>
        var app = angular.module('myApp', []);
        app.controller('validateCtrl', function($scope) {
            $scope.user = 'Pradeep K';
            $scope.email = '[email protected]';
        });
    </script>
</body>

</html>

How to do custom form validation in AngularJS?

To achieve the custom form validation we need to write directives. For Example we want to show the number of characters left for a text area when the user enters text to a text area.

Code Example:

<!DOCTYPE html>
<html ng-app="myapp" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
    <script>
        var $scope;
        var app = angular.module('myapp', []);
        app.controller('Ctrl', function($scope)
        {
            $scope.wks =
            {
                number: 1,
                validity: true
            }
        });
        app.directive('isNumber', function()

        {
            return
            {
                require: 'ngModel',
                link: function(scope)
              {
                    scope.$watch('wks.number', function(newValue, oldValue)
                    {
                        var arr = String(newValue).split("");
                        if (arr.length === 0) return;
                        if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.')) return;
                        if (arr.length === 2 && newValue === '-.') return;
                        if (isNaN(newValue))
                        {
                            scope.wks.number = oldValue;
                        }
                    });
                }
            };
        });
    </script>
</head>

<body ng-app="myapp">
    <form ng-app="myapp" name="myform" novalidate>
        <div ng-controller="Ctrl"></div>
        <textarea ng-model="test" ng-trim="false" maxlength="100"></textarea>
        <span>{{100 - test.length}} left</span>
    </form>
</body>

</html> .

What is a custom filter, write a own custom filter

Custom Filters are used to extend the behavior of binding expressions based on our own logic.

Example:

angular.module("testModule").filter("currencyFilter", function()
{
    return function(val)
    {
        return "Rs. " + val * 67;
    };
});
In the HTML use it as:
    <
    span >
    {
        {
            price | currencyFilter
        }
    } < /span>

How to do DOM manipulation inside a directive?

DOM manipulations are done in custom directive.

Here is a Code example,

app.directive('myDirective', function()
{
    return
    {
        restrict: 'A',
        templateUrl: 'directives/template.html',
        link: function(scope, element, attr)
        {
            $(element).css('font-weight', 'bold');
        }
    };
});

How to communicate between the controllers in AngularUI Pages ?

Angular provides the $broadcast, $on and $emit services for event-based communication among controllers. This is very similar to the publisher subscriber pattern.

We can use root scope or service to pass data across controllers:

• $broadcast: dispatches the event downwards to all child scopes.
• $emit: dispatches the event upwards using the scope hierarchy.
• $on: listen on the events of a given type. It can catch the event dispatched by $broadcast and $emit.

What are the Angular 2.0 new features in compared to angular previous versions?

There are drastic changes in 2.0 in compared to earlier 1.x versions .Some of the new features are

• Component Based routing
• No Scope use
• Directive based manipulation
• More test support

Can you explain Angular 2.0 routing and how it is defined?

Angular 2.0 comes up with folder based structures as component.ng-viewport is the place holder where we will load the content of the page.

Let us consider we have different Tabs, such as news, stock, whether, stocks. On click of each tab we will load different views.

This is the code we need to follow.

<body ng-controller="ComponentController">
    <h1>
Component Wise Routing in Angular Js</h1>
    <a ng-link="news()" class="tab">News</a>
    <a ng-link="stock()" class="tab">Stock</a>
    <a ng-link="weather()" class="tab">Weather</a>
    <a ng-link="sports()" class="tab">Sports</a>
    <div ng-viewport>
    </div>
    <script>
        var module = angular.module("myApp", ["ngNewRouter", "myApp.news", "myApp.stock", "myApp.weather", "myApp.sports"]);
        module.controller("ComponentController", function($scope, $router) {
            $router.config(
            [{
                path: "/",
                redirectTo: "news"
            },
            {
                path: "/stock",
                component: "stock"
            },
            {
                path: "/weather",
                component: "weather"
            },
            {
                path: "/sports",
                component: "sports"
            }]);
        });
    </script>
    <script src="components/news/news.js"></script>
    <script src="components/stock/stock.js"></script>
    <script src="components/weather/weather.js"></script>
    <script src="components/sports/sports.js"></script>
</body>

ng-viewport

In order to inject an HTML template known as component into a web page, we need to create a container/placeholder div for it. This div should have an Angular directive ng-viewport. This ng-viewport is like ng-view/ui-view from Angular UI router and AngularJS core functionality. The directive ng-viewport can be used any number of times inside an application.

Component

This is an Angular service which allows us to retrieve the current set of route parameters. Componet looks for components folder inside the project structure.

In the Angular code how to avoid the error “is not allowed by Access-control-Allow-Origin”?

To enable CORS in Web API, use the Microsoft.AspNet.WebApi.Cors package, which is available on NuGet.

config.Enablecors() to the register() in the WebAPIconfig.cs

How to bind a data to the ng-grid ?

Showing the Data in grid and editing and deleting records in a grid is a common requirement in a project.

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope)
{
    $scope.myData = [{
        name: "Moroni",
        age: 50
    }, {
        name: "Tiancum",
        age: 43
    }, {
        name: "Jacob",
        age: 27
    }, {
        name: "Nephi",
        age: 29
    }, {
        name: "Enos",
        age: 34
    }];
    $scope.gridOptions =
    {
        data: 'myData',
        columnDefs: [
        {
            field: 'name',
            displayName: 'Name'
        },
        {
            field: 'age',
            displayName: 'Age'
        }]
    };
}); <
body ng - controller = "MyCtrl" >
    <
    div class = "gridStyle"
ng - grid = "gridOptions" > < /div> <
    /body>

These are some of the concepts and real time questions. Thanks for reading!

Read more articles on AngularJS:

• Easy Kids Learn Game Using MVC and AngularJS
• Repeating Multiple Elements In AngularJS