AngularJS Interview Questions and Answers Set 3

21.What is the basic need to start with AngularJS?

To start with AngularJS, one need to make reference of angular.js. The latest version of AngularJS can be downloaded from AngularJS.com. You can either download the required js file and then host them locally or you can also use google CDN for referencing it. Here is the link for google CDN url for referencing AngularJS.

22. What is the bootstrapping in AngularJS?

Bootstrapping in AngularJS is nothing but just initializing, or starting, your Angular app. AngularJS supports automatic bootstrapping as well as manual way as well.

23. How AngularJS will automatically be initialized?

AngularJS will be initialized during “DOMContentLoaded” event or during the angular.js file download to browser. Now AngularJS looks for directive – “ng-app”, which is a root compilation for AngularJS.

24. Explain module in AngularJS?

Modules are like namespaces in C#. Modules are used for dividing single page angular app to functional, reusable and small components and can be integrated with another angular app. Module can be assigned using “ng-app” directive.

25. Explain how we can create module and using it in AngularJS?

Below is the code snippet for creating and using module in AngularJS –

Creating a module –

<script type=”text/javascript”>
angular.module(‘myFirstApp’, []);
angular.module(‘myFirstApp’, [‘MydependentModule1’, ‘MydependentModule2’]);
</script>

Using the Module –

<html ng-app=”‘myFirstApp’”>
<head> … </head>
<body> … </body>
</html>

26. Which is the core module of AngularJS?

“ng” is the core module of AngularJS and when angular app is started this module will be loaded by default.

27.What are different ways of bootstrapping AngularJS?

Is neat and superheroic JavaScript MVW (Model View Whatever) Framework which allows to extend HTML capabilities with Directives, expression, two way binding. In this post, we will see different ways of bootstrapping AngularJS. Bootstrapping in AngularJS is nothing but just the initialization of Angular app.

There are two ways of bootstrapping AngularJS. One is Automatic Initialization and other is Manually using Script.

When you add ng-app directive to the root of your application, typically on the tag or tag if you want angular to auto-bootstrap your application.

<html ng-app=”myApp”>

When angularJS finds ng-app directive, it loads the module associated with it and then compiles the DOM.

Another way to bootstrapping is manually initializing using script. Manual initialization provides you more control on how and when to initialize angular App. It is useful when you want to perform any other operation before Angular wakes up and compile the page. Below is the script which allows to manually bootstrap angularJS.

<script>angular.element(document).ready(function() {angular.bootstrap(document, [‘myApp’]);});</script>

If you have noticed, it is using document.ready which is great as it will make sure that before bootstrapping your DOM is ready. You don’t need to include jQuery library reference here, as angularJS has within it. So angular.bootstrap function bootstrap angularJS to document. The second parameter is the name of module. You need to take care of following things while using manual process.

Remember angular.bootstrap function will not create modules on the go. So you need to have your modules define, before you manually bootstrap. So below is the correct approach. First define the module and then bootstrap

28. What does SPA (Single page application) mean?

SPA is a concept where rather loading pages from the server by doing post backs we create a single shell page or master page and load the webpages inside that master page.

29. What are controllers in AngularJS?

A Controller is a set of JavaScript functions which is bound to a specified scope, the ng-controller directive. Angular creates a new instance of the Controller object to inject the new scope as a dependency. The role of the Controller is to expose data to our view via $scope and add functions to it, which contains business logic to enhance view behavior.

Controller Rules.

A Controller helps in setting up the initial state of the scope object and define its behavior.

The Controller should not be used to manipulate the DOM as it contains only business logic. Rather, for manipulating the DOM, we should use data binding and directives.

Do not use Controllers to format input. Rather, using angular form controls is recommended for that.

Controllers should not be used to share code or states. Instead, use angular services for it.

Steps For Creating A Controller.

It needs ng-controller directive.

Next step is to add Controller code to a module.

Name your Controller based on functionality. Its name should follow camel case format (i.e. SampleController).

Set up the initial state of the scope object.

Declaring a Controller using ng-Controller directive.

Following code displays the definition of SampleController.

<script>
function SampleController($scope) {
$scope.sample = {firstSample: “INITIAL”,  lastSample: “Initial”,  fullName: function() {
var sampleObject;
sampleObject = $scope.sample;
return sampleObject.firstSample + ” ” + sampleObject.lastSample;
}
};
}</script>

30. Can we have nested controllers in AngularJS?

YES. We can create nested controllers in AngularJS. Nested controller is defined in a hierarchical manner while using in View.