AngularJS Interview Questions Part 2

6. What is the use of $routeProvider in AngularJS?

Answer:

The $routeProvider is used to configure roots within an AngularJS application.

The $routeProvider can be used to link a url with a corresponding HTML page or template, and a controller.

The ngRoute config() is used to configure the $routeProvider. The config() function takes the $routeProvider as parameter and the routing configuration goes inside the function.

The $routeProvider has a simple API, accepting either the when() or otherwise() method.

Routing Syntax:

The following syntax is used to configure the routes in AngularJS,

var app = angular.module("appName", ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider
        .when('/view1', {
            templateUrl: 'view1.html',
            controller: 'FirstController'
        })
        .when('/view2', {
            templateUrl: 'view2.html',
            controller: 'SecondController'
        })
        .otherwise({
            redirectTo: '/view1'
        });
});


In the above syntax, the when() method takes a path and a route as parameters. Path is a part of the URL after the # symbol. Route contains two properties - templateUrl and controller.

The templateUrl property defines which HTML template AngularJS should load and display inside the div with the ngView directive.

The controller property defines which controllers should be used with the HTML template.

When the application is loaded, path is matched against the part of the URL after the # symbol. If no route paths matches the given URL, the browser will be redirected to the path specified in the otherwise() function

7. Why is angular.copy() method so powerful?

Answer:

The angular.copy() method is so powerful because it creates a deep copy of the variable that means it doesn't point to the same memory reference as that variable.

Syntax:

angular.copy(source, [destination]);

source (*): The source is used to make a copy which can be any type including primitives, null and undefined.

destination (optional): Destination into which the source is copied. If provided, must be of the same type as source.

8. What is DDO?

Answer:

Directives are one of the most powerful features of AngularJS. You can imagine them as re-usable components of any AngularJS application.

AngularJS allows us to change the default scope of directives by passing a configuration object known as directive definition object.

Directive definition object is an object, used while creating custom directive. It is used to configure AngularJS directives.

DDO is a simple JavaScript object used for configuring the directive’s behavior, template etc.

Example:

var app = angular.module("test",[]);
app.directive("myDirective",function(){
    return {
        restrict: "EA",
        scope: true,
        link: function(scope,elem,attr){
            // code goes here ...
        }
    }    
});


There are a lot of properties of the DDO to learn. In the above example, we discussed only about 'scope' property because the values of scope property decide how the actual scope is created and used inside a directive. These values can be either "false", "true" or "{}".

9. What is data binding in AngularJS?

Answer:

Data binding is an automatic synchronization of data between the model and view components.

It is the connection between view and business logic of the application.

The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa.

data binding

AngularJS templates work differently. First the template (which is the uncompiled HTML along with any additional markup or directives) is compiled on the browser. The compilation step produces a live view. Any changes to the view are immediately reflected in the model, and any changes in the model are propagated to the view.

The model is the single-source-of-truth for the application state, greatly simplifying the programming model for the developer.

You can think of the view as simply an instant projection of your model. Because the view is just a projection of the model, the controller is completely separated from the view and unaware of it. This makes testing a snap because it is easy to test your controller in isolation without the view and the related DOM/browser dependency.

10. What is the use of factory method in AngularJS?

Answer:

Factory method is invoked when the compiler matches the directive for the first time. This method is used for creating a directive.

It generates the single object or function that represents the service to the rest of the application.

Example:

var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
   var factory = {};     
   factory.multiply = function(a, b) {
      return a * b
   }     
   return factory;
});