Angularjs Interview Questions and Answers Set 4

31. In case of nested controllers, does the $scope object shared across all controllers?

YES. The $scope object is shared across all controllers and it happens due to scope inheritance. Since the ng-controller directive creates a new child scope, we get a hierarchy of scopes that inherit from each other. So if we define a property on a parent scope, the child scope can manipulate the property. And if the property is not present in child scope, then parent scope property’s value is used. Lets consider, the previous question HTML where there are 3 controllers. And here is the AngularJS code to define these controllers.

32. Explain The Steps Involved In The Boot Process For AngularJS?

Whenever a web page loads in the browser, following steps execute in the background.

First, the HTML file containing the code gets loaded into the browser. After that, the JavaScript file mentioned in the HTML code gets loaded. It then creates a global object for angular. Now, the JavaScript which displays the controller functions gets executed.

In this step, AngularJS browses the complete HTML code to locate the views. If a view is found, it is linked it to the corresponding controller function.

In this step, AngularJS initiates the execution of required controller functions. Next, it populates the views with data from the model identified by the controller. With this the page is ready.

33. What Is An Auto Bootstrap Process In AngularJS?

AngularJS initializes automatically upon the “DOMContentLoaded” event or when the browser downloads the angular.js script and at the same time document.readyState is set to ‘complete’. At this point, AngularJS looks for the ng-app directive which is the root of Angular app compilation process.

If the ng-app directive is located, then AngularJS will do the following.

Load the module associated with the directive.

1.Create the application injector.
2.Compile the DOM starting from the ng-app root element.
3.This process is auto-bootstrapping.

Following is the sample code that helps to understand it more clearly:

<html>
<body ng-app=”myApp”>
<div ng-controller=”Ctrl”>Hello {{msg}}!</div>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js”></script>     <script>
var app = angular.module(‘myApp’, []);
app.controller(‘Ctrl’, function($scope) {
$scope.msg = ‘Welcome’;
});
</script>
</body>
</html>

34.What Is The Manual Bootstrap Process In AngularJS?

Sometimes we may need to manually initialize Angular app in order to have more control over the initialization process. We can do that by using angular.bootstrap() function within angular.element(document).ready() function. AngularJS fires this function when the DOM is ready for manipulation.

The angular.bootstrap() function takes two parameters, the document, and module name injector.

Following is the sample code that helps to understand the concept more clearly.

<html>
<body>
<div ng-controller=”Ctrl”>Hello {{msg}}!</div>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js”></script>        <script>
var app = angular.module(‘myApp’, []);
app.controller(‘Ctrl’, function($scope) {
$scope.msg = ‘Welcome’;
});
//manual bootstrap process
angular.element(document).ready(function () { angular.bootstrap(document, [‘myApp’]); });
</script>
</body>
</html>

35. How To Bootstrap Your Angular App For Multiple Modules?

AngularJS is automatically initialized for one module. When we have multiple modules, we combine them into a single module and thus the angular app will be automatically initialized for the newly created module. Other modules act as dependent modules for this newly created module.

Let’s take an example, suppose we have two modules: module1 and model2. To initialize the app automatically, based on these two modules following code is used

<html>
<head>
<title>
Multiple modules bootstrap
</title>
<script src=”lib/angular.js”></script>
<script>
//module1
var app1 = angular.module(“module1”, []); app1.controller(“Controller1”, function ($scope) { $scope.name = “Welcome”; });

 

//module2

var app2 = angular.module(“module2”, []); app2.controller(“Controller2”, function ($scope) { $scope.name = “World”; });

 

//module3 dependent on module1 & module2

angular.module(“app”, [“module1”, “module2″]);
</script>
</head>
<body>
<!–angularjs autobootstap process–>
<div ng-app=”app”>
<h1>Multiple modules bootstrap</h1>
<div ng-controller=”Controller2″>
</div>
<div ng-controller=”Controller1″>
</div>
</div>
</body>
</html>

36. Can AngularJS have multiple ng-app directives in a single page?

The answer is NO. Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. If you have placed another ng-app directive then it will not be processed by AngularJS. You need to manually bootstrap the second app, instead of using second ng-app directive.

37. Can angular applications (ng-app) be nested within each other?

AngularJS applications cannot be nested within each other.

38. Can you bootstrap multiple angular applications on same element?

If you try to do that then it will show an error “App Already Bootstrapped with this Element”. This usually happens when you accidentally use both ng-app and angular.bootstrap to bootstrap an application. You can also get this error if you accidentally load AngularJS itself more than once.

39. What are templates in AngularJS?

In Angular, templates are written with HTML that contains Angular-specific elements and attributes. Angular combines the template with information from the model and controller to render the dynamic view that a user sees in the browser. In other words, if your HTML page is having some Angular specific elements/attributes it becomes a template in AngularJS.

40. What is scope in AngularJS?

A scope is an object that ties a view (a DOM element) to the controller. In the MVC framework, scope object is your model. In other words, it is just a JavaScript object, which is used for communication between controller and view.