Angular JS Flashcards
What is a module?
A module defines an application. It is a container for different parts of an application such as controllers.
How to create a module?
var angular.module(“myApp”, []);
What is the use of [] when declaring a module?
This array is used to contain dependent modules.
What is a view in angular?
A view is used to display data to the users.
How do you create a view?
You create views by writing a template as an HTML page and merging it with data from your model.
What is a model?
A model manages the data, logic and rules of the application.
What is the use of ng-model directive?
The ng-model binds the value of HTML controls (input, select, textarea) to application data.
Write an example of the use of the ng-model to display data in the view. Both html and js part.
<div>
Name:
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
What is the role of $scope object?
The $scope object passed to the controller is the mechanism used to pass model data to views.
Write an example where $scope can be used and display the data in the view.
//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>
What is the use of the ng-app directive?
The ng-app directive tells angular JS that this is the root element of the application. All angular app must have a root element.
What is a controller?
A controller is a javascript object that controls the data of an Angular JS application.
Which directive defines the application controller?
ng-controller
Define a module and a controller.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope){
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullname = function() {
return $scope.lastName + " " + $scope.lastName;
};
});What is a service in angular?
A service is a function or an object that is available for and limited to your angular application.
Give an example of the use of a service.
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>
What is dependency injection?
Dependency injection is a software design pattern that deals with how the application gets hold of its dependencies.
What is data-binding?
Data binding is the synchronization of the model and the view.
Give an example of data binding.
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
<div>
<p></p>
</div>
Give an example of two way data binding.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.country = "Mauritius"
});
<div>
Country:
<h1> {{ country }} </h1>
</div>
What are the steps to create a two way data binding?
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.
What is an angular template?
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.
What is a directive?
Angular JS lets you extend HTML with new attributes using directives.
Give some example of built in directives?
ng-app
ng-controller
ng-bind
ng-model
Declare a controller using this instead of $scope.
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>
