AngularJS Interview Questions

AngularJS Interview Questions Download AngularJS Interview Questions PDF

AngularJS Interview Questions

In angular Directives are used to extend the attributes of Html elements.
Creating custom directive in Angular js.
Angular js Directives are restricted to element and attribute and created using a directive function.Here is sample code to create a directive in Angular js.


var app = angular.module("myApp", []);
app.controller('AppController', function($scope) {
    var users=[];
    var user1={};
    user1.firstName="Satyam";
    user1.lastName="Kumar";
    users.push(user1);
    var user2={};
    user2.firstName="Ravi";
    user2.lastName="Sankar";
    user2.push(user2);
    $scope.users=students;
});
app.directive('user', function() {
    //define the directive object
    var directive = {};
    //restrict = E, implies that directive is Element directive
    directive.restrict = 'E';
    //element will be replaced by this text/html
    directive.template = "First Name: {{user.firstName}} , Last Name: {{user.lastName}}";
    var linkFunction = function($scope, element, attributes) {
        element.css("background-color", "#e1e1e1");
    }
    directive.link=linkFunction;
    return directive;
});

As Above directive is restricted to Element directive, so you can use this directive as an element only.
Usage:


<div ng-app="app">
 <h1>Custom Directive Demo</h1>
 <div ng-controller="UserController">
 <div ng-repeat="user in users">
 <user></user>
 </div>
 </div>
</div>

html5Mode method of $locationProvider module is used to enable HTML5 mode in Angular 1.x. For creating pretty URLs and removing # from URLs html5Mode need to true.

Enabling html5Mode to true in Angular 1.x.


angular.module('myApp', [])

    .config(function($routeProvider, $locationProvider) {

        $routeProvider
            .when('/', {
                templateUrl : 'partials/home.html',
                controller : mainController
            })
            

        // use the HTML5 History API
        $locationProvider.html5Mode(true);
    });

Below are some major browsers supported by Angular js

  • Mozilla Firefox
  • Google Chrome
  • Microsft Edge
  • IE 10,11
  • IE Mobile,
  • Safari, iOS
  • Android: Nougat (7.0) Marshmallow (6.0)

Angular js Expression is JavaScript alike code snippets used to bind expression data in view or HTML. Angular expressions are written inside two curly braces.

{{a+b}}

In Angular js $scope is used whenever we have to use dependency injection (D.I) whereas as the scope is used for directive linking.

In Angular JS $rootscope and $scope both are an object which is used for sharing data from the controller to view.
The main difference between $rootscope and $scope is that $rootscope is available globally to across all the controllers whereas $scope is available only in controllers that have created it along with its children controllers.

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.

The $routeProvider is used to configure roots within an AngularJS application. It can be used to link a URL with a corresponding HTML page or template, and a controller (if applicable).

To add promise functionality to a service, we inject the “$q” dependency in the service, and then use it like so:


angular.factory('testService', function($q){
return {
getName: function(){
var deferred = $q.defer();

//API call here that returns data
testAPI.getName().then(function(name){
deferred.resolve(name)
})

return deferred.promise;
}
}
})

The $q library is a helper provider that implements promises and deferred objects to enable asynchronous functionality

Source: https://docs.angularjs.org/api/ng/service/$q

In One-Way data binding, view (UI part) not updates automatically when data model changed. We need to write custom code to make it updated every time.
ng-bind has one-way data binding.

While in two way binding scope variable will change it’s value every time its data model changed is assigned to a different value.

You can isolate a directive’s Scope by passing an object to the scope option of directive.
This tells the directive to keep scope inside of itself and not to inherit or share with other scopes.

There are three types of directive scopes available in Angular.

  • Parent Scope: is default scope
  • Child Scope:  If the properties and functions you set on the scope are not relevant to other directives and the parent, you should probably create a new child scope.
  • Isolated Scope: Isolated Scope is used if the directive you are going to build is self-contained and reusable. Does not inherit from parent scope, used for private/internal use.

Angular Modules are place where we write code of our Angular application.Writing Modules makes our code more maintainable, testable, and readable. All dependencies for our app are defined in modules.

Below are some major difference between AngularJS and JavaScript Expressions

  • Both can contain literals, operators, and variables.
  • AngularJS expressions can be written in HTML but JavaScript expressions are not.
  • AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do.
  • AngularJS expressions support filters, while JavaScript expressions do not.

Internationalization is a way to show locale-specific information on a website.It is used to create multilingual language websites.