Q1)
Attempt any EIGHT of the following. [8×2=16]
1. What is SPA?
->AngularJS is a full featured SPA framework, with the
help of which a single page application is created. In the SPA, the
whole page is not reloaded every time, only every time the view will be change.
2. Explain ng-controller directive
->The AngularJS ng-controllerdirective adds a controller class to the view (your application). It is the key aspect which specifies the principles behind the Model-View-Controller design pattern.
It facilitates you to write code and make functions
and variables, which will be parts of an object, available inside the current
HTML element. This object is called scope.
Example:-
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div
ng-app="myApp" ng-controller="myCtrl">
Full
Name: {{firstName + " " + lastName}}
</div>
<script>
var
app = angular.module('myApp', []);
app.controller('myCtrl',function($scope) {
$scope.firstName= "Aryan";
$scope.lastName= "Jaiswal";
});
</script>
</body>
</html>
3. Write any two features of AngularJS.
Data-binding: AngularJS follows the two-way data binding. It is
the automatic synchronisation of data between model and view components.
Services:
AngularJS has several built-in services such as $http to make an XMLHttpRequest.
Dependency Injection: AngularJS has a built-in
dependency injection subsystem that helps the developer to create, understand,
and test the applications easily.
Active community on Google: AngularJS provides excellent
community support. It is Because Google maintains AngularJS.
4. Explain two-way data binding.
-> 1.In a two-way binding, the flow is two-directional.
2.This means that the flow of code is from
ts file to Html file as well as from Html file to ts file.
3.In order to achieve a two-way binding, we will use ngModel or banana in a box syntax.
4.To make sure the app doesn’t break, we need to import ‘FormsModule’ from ‘@angular/forms’. Using ngModel, we will bind a variable from Html to ts file and from ts file to Html file.
5.Data binding in AngularJS is the synchronization between the model and the view.
5. What is Controller?
-> 1.AngularJS controllers are used to control the flow of data of AngularJS application.
2.A controller is defined using ng-controller directive.
3.A controller is a JavaScript object containing attributes/properties
and functions.
4.Each controller
accepts $scope as a parameter which refers to the application/module that
controller is to control.
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName ="Aryan";
$scope.lastName ="Khanna";
});
</script>
</body>
</html>
6. Explain $http Services.
->1.In angularjs $http is a service which is used to
send, read or get data from http remote servers using XMLHttpRequest object.
2.Properties in $http service.
1.method-It is used to define a required operator like get or send data. In angularjs we have different methods available.
2.Url-We need to send url of http server to perform required operations.
3.AngularJS $http Service Methods
1.$http.get-This method is used to get data from requested url
2.$http.post-This method is used to send data to request url
3.$http.head-This method is used to get data from requested url with headers
4.$http.put-This method is used to send data to specified url
5.$http.delete-This method is used to delete resource from specified url
7. Explain uppercase filter.
->It is used to convert the text to the upper case text.
It formats strings into upper case.
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="caseCtrl">
<h1>{{txt | uppercase}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('caseCtrl', function($scope) {
$scope.txt = "Hello World!";
});
</script>
<p>The text is written in uppercase letters.</p>
</body>
</html>
8. What is Dependency Injection?
->1. AngularJS comes with a built-in dependency injection mechanism. It facilitates you to divide your application into multiple different types of components which can be injected into each other as dependencies.
2. Dependency Injection is a software design pattern that specifies how components get holds of their dependencies. In this pattern, components are given their dependencies instead of coding them within the component.
3. Modularizing your application makes it easier to reuse, configure and test the components in your application. Following are the core types of objects and components:
Value , factory , service ,provider ,constant
9. Explain $timeout Service
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div
ng-app="myApp" ng-controller="myCtrl">
<p>This header will change after two seconds:</p>
<h1>{{myHeader}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader ="How are you today?";
}, 2000);
});
</script>
</body>
</html>
10. What is AngularJs?
1.Angular JS is an open source JavaScript framework that is used to build web applications. It can be freely used, changed and shared by anyone.
2.Angular
Js is developed by Google.
3.It is an excellent framework for building single phase applications and line of business applications.
11. Write a syntax of building block of AngularJs?
AngularJS applications usually have a data model. The data model is a collection of data available for the application.
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope) {
ng-bind="firstname"></p>
to display content from the model:
{{firstname}}</p>
$scope.firstname ="John";
$scope.lastname ="Doe";
});
The HTML container where the AngularJS application is displayed, is called the view.
The view has access to the model, and there are several ways of displaying model data in the view.
You can use the ng-bind directive, which will bind the innerHTML of the element to the specified model property:
<p
You can also use double braces {{ }}
<p>First name:
AngularJS Controllers
AngularJS applications are controlled by controllers.
The ng-controller directive defines the application controller.
A controller is a JavaScript Object, created by a standard JavaScript object constructor.
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
12. Explain
ng-bind directives with example.
The ng-bind directive tells AngularJS to replace the content of an HTML element with the value of a given variable, or expression.
If the value of the given variable, or expression, changes, the content of the specified HTML element will be changed as well.
<div
ng-app="" ng-init="myText='Hello World!'">
<p ng-bind="myText"></p>
</div>
13. How to create controller in
AngularJs?
AngularJS controllers are used to control the flow of data of AngularJS application. A controller is defined using ng-controller directive. A controller is a JavaScript object containing attributes/properties and functions. Each controller accepts $scope as a parameter which refers to the application/module that controller is to control
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div
ng-app="myApp" ng-controller="myCtrl">
First Name:
<input type="text"
ng-model="firstName"><br>
<br>
Full Name: {{firstName +
" " + lastName}}
</div>
<script>
var app =
angular.module('myApp', []);
app.controller('myCtrl',
function($scope) {
$scope.firstName= "Aryan";
$scope.lastName
= "Khanna";
});
</script>
</body>
</html>
14.What is
difference between $scope and scope?
->In AngularJs $scope is used to achieve dependency injection and scope is used for linking between View (i.e. HTML) and Controller (i.e. JS).
15. Explain
date filter with syntax & example.
->The date filter formats a date to a specified format.
<div ng-app="myApp" ng-controller="datCtrl">
<p>Date = {{ today | date }}</p>
</div>
16. What
is AngularJs factory?
In AngularJS services can be created using
service, factory and provider. Service object contains few useful functions
that you can call from Controllers, Directive and Filters etc.
A factory is a simple Javascript function
which allows you to add some logic before creating the object. It returns the
created object.
var module = angular.module('myapp',[]);
module.factory('serviceName',function(){
return serviceObject;
});
17. What is data
binding in AngularJs?
1.Data binding in AngularJS is the synchronization between
the model and the view.
2.One-Way Data Binding
The one-way data binding is an
approach where a value is taken from the data model and inserted into an HTML
element. There is no way to update model from view. It is used in classical
template systems. These systems bind data in only one direction.
3.Two-Way Data Binding
Data-binding
in Angular apps is the automatic synchronization of data between the model and
view components.
Data binding lets you treat the model as the
single-source-of-truth in your application. The view is a projection of the
model at all times. If the model is changed, the view reflects the change and
vice versa
