Angular JS

Question 1

What is a module?

Answer 1

A module defines an application. It is a container for different parts of an application such as controllers.

Question 2

How to create a module?

Answer 2

var angular.module(“myApp”, []);

Question 3

What is the use of [] when declaring a module?

Answer 3

This array is used to contain dependent modules.

Question 4

What is a view in angular?

Answer 4

A view is used to display data to the users.

Question 5

How do you create a view?

Answer 5

You create views by writing a template as an HTML page and merging it with data from your model.

Question 6

What is a model?

Answer 6

A model manages the data, logic and rules of the application.

Question 7

What is the use of ng-model directive?

Answer 7

The ng-model binds the value of HTML controls (input, select, textarea) to application data.

Question 8

Write an example of the use of the ng-model to display data in the view. Both html and js part.

Answer 8

<div>
Name:
</div>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});

Question 9

What is the role of $scope object?

Answer 9

The $scope object passed to the controller is the mechanism used to pass model data to views.

Question 10

Write an example where $scope can be used and display the data in the view.

Answer 10

//create the module
var app = angular.module("myApp", []);

//create the controller
app.controller("myCtrl", function($scope) {
    $scope.name = "John";
});

//display data in the view using $scope

<div>
{{ name }}
</div>

Question 11

What is the use of the ng-app directive?

Answer 11

The ng-app directive tells angular JS that this is the root element of the application. All angular app must have a root element.

Question 12

What is a controller?

Answer 12

A controller is a javascript object that controls the data of an Angular JS application.

Question 13

Which directive defines the application controller?

Answer 13

ng-controller

Question 14

Define a module and a controller.

Answer 14

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope){
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullname = function() {
return $scope.lastName + " " + $scope.lastName;
};
});

Question 15

What is a service in angular?

Answer 15

A service is a function or an object that is available for and limited to your angular application.

Question 16

Give an example of the use of a service.

Answer 16

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $location) {
$scope.myUrl = $location.absUrl();
});

<div>
<p> The url of this page is: </p>
<h3>{{ myUrl }}</h3>
</div>

Question 17

What is dependency injection?

Answer 17

Dependency injection is a software design pattern that deals with how the application gets hold of its dependencies.

Question 18

What is data-binding?

Answer 18

Data binding is the synchronization of the model and the view.

Question 19

Give an example of data binding.

Answer 19

var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});

<div>
<p></p>
</div>

Question 20

Give an example of two way data binding.

Answer 20

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.country = "Mauritius"
});

<div>
Country:
<h1> {{ country }} </h1>
</div>

Question 21

What are the steps to create a two way data binding?

Answer 21

Create a module
Create a controller
Add a default data to the controller’s $scope.
Add ng-app and ng-controller to the page.
Create an input using the ng-model directive to input the default data saved in the $scope.
Create an element, for example h1 and add an expression using the element of $scope.

Question 22

What is an angular template?

Answer 22

An angular template is written with HTML that contains angular js specific elements and attributes. Angular combines the template with the information from the model and controller to render the dynamic view that the user sees.

Question 23

What is a directive?

Answer 23

Angular JS lets you extend HTML with new attributes using directives.

Question 24

Give some example of built in directives?

Answer 24

ng-app
ng-controller
ng-bind
ng-model

Question 25

Declare a controller using this instead of $scope.

Answer 25

var app = angular.module(“myApp”, []);

//we declare as usual, using using 'this' object instead of 
//$scope
app.controller("myCtrl", function() {
this.title = "Some title";
});

<div>
//myCtrl doesn't exist inside, we use 'main' instance only
{{ main.title }}
</div>