What is Routing in Angular JS?
Routing in Angular JS is if you want to navigate to different pages in your application, but you also want the application to be a SPA with no page reloading, you can use the ngRoute module.The ngRoute module routes your application to different pages without reloading the entire application
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<body ng-app=" routeApp ">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!pink">Pink</a>
<div ng-view></div>
<script>
var app = angular.module("routeApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/pink", {
templateUrl : "pink.htm"
})
});
</script>
<p>Click on the links to navigate </p>
</body>
</html>
Routing in Angular JS is if you want to navigate to different pages in your application, but you also want the application to be a SPA with no page reloading, you can use the ngRoute module.The ngRoute module routes your application to different pages without reloading the entire application
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<body ng-app=" routeApp ">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!pink">Pink</a>
<div ng-view></div>
<script>
var app = angular.module("routeApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/pink", {
templateUrl : "pink.htm"
})
});
</script>
<p>Click on the links to navigate </p>
</body>
</html>
What is Digest Cycle in Angular JS?
When any action is performed in angular, digest cycle starts iterating internally.It watches if there is any change in variable which are registered in angular.
$rootscope.watch(function(){
console.log("Digest Cycle Iterated");
})
What is Digest Process?
- Digest process is mainly responsible to walk through entire watch list of modifications.
- DOM gets updated after Digest Process
- When there is any update in $scope variable, it iterates 2 times.
- It always checks for the update in variable, it iterates and checks for dirty checking.When on iteration if digest cycle finds that there is no update in $scope variable, it stops iteration.
When the digest process is actually kicked in?
When:
- DOM events line ng-click etc are triggered
- Ajax with call back function
- timers(Time out) with call backs
- browser localization change takes place
- $apply() or $digest() are used
- data binding happens
- DOM events line ng-click etc are triggered
- Ajax with call back function
- timers(Time out) with call backs
- browser localization change takes place
- $apply() or $digest() are used
- data binding happens
What is $scope.$watch()?
It keeps watch on any variable if it is changed.
It takes 2 parameter -
eg:
$scope.count = -1;
$scope.watch(function(newValue,oldValue){
$scope.count++ ;
console.log($scope.count);
});
What is $scope.$digest()?
If the variable is changed by others like javascript that time we should use $digest();
eg:
scope.name = 'Soniya';
$scope.changeName = function(){
$scope.name = 'Sonu';
}
document.getElementById('digest').addEventListener('click', function(){
$scope.name = 'Sonu';
$scope.$digest();
//Angular vl not get to know some update is done, to start digest cycle manually, $digest() is used;
});
//HTML CODE
<input type = 'button' id = 'digest' value = 'digest' />
What is $scope.apply()?It keeps watch on any variable if it is changed.
It takes 2 parameter -
eg:
$scope.count = -1;
$scope.watch(function(newValue,oldValue){
$scope.count++ ;
console.log($scope.count);
});
What is $scope.$digest()?
If the variable is changed by others like javascript that time we should use $digest();
eg:
scope.name = 'Soniya';
$scope.changeName = function(){
$scope.name = 'Sonu';
}
document.getElementById('digest').addEventListener('click', function(){
$scope.name = 'Sonu';
$scope.$digest();
//Angular vl not get to know some update is done, to start digest cycle manually, $digest() is used;
});
//HTML CODE
<input type = 'button' id = 'digest' value = 'digest' />
We can not make any function inside $scope.$digest();
If we want to use function $scope.$apply() can be used.
$digest() and $apply() works same only the difference is function.
eg:
scope.name = 'Soniya';
$scope.changeName = function(){
$scope.name = 'Sonu';
}
document.getElementById('apply').addEventListener('click', function(){
$scope.apply(function(){
$scope.name = 'Sonu';
})
//Angular vl not get to know some update is done, to start digest cycle manually, $digest() is used;
});
//HTML CODE
<input type = 'button' id = 'apply' value = 'apply' />
Sending values from child controller to parent controller.
Values are received using $on.
What is $broadcast?
Sending values from parent controller to child controller.
Values are received using $on.
What is ng-if in angular?
When the condition of ng-if is true it is displayed in the DOM but when it is false it is not displayed in the DOM. Meaning : "The element is not loaded in the DOM";
What is ng-show in angular?
When it is true it is displayed in the DOM but when it is false the class is applied as ng-hide in the DOM. Meaning : "The element is loaded with the class in the DOM";
What is Bootstraping in Angular using Jquery?
angular.element(document).ready(function(){
angular.bootstrap(document,['ModuleName'])
});
What is difference between two way data binding, one way data binding and one time data binding?
Two way data binding -
When we update model, view gets updated and when we update view, model gets updated.
One way data binding -
Binding will be from model to view using ng-bind or expression{{}}
One time data binding -
"::" token can be used to create one-time data bindings
One-time binding allows for a model or view to be updated once from the value set by the controller upon the first digest cycle.
eg-
{{:: customer.name}}
What is Factory and services in Angular?
Factories allows us to add some logic before creating the object.It differs from services in angular in such a way where it allows us to pass the function which factory than invokes and returns the result.
Services can be used to organise and share code across your app.
<html> <head> <title>Angular JS Services</title> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app = "mainApp" ng-controller = "CalcController"> <p>Enter a number: <input type = "number" ng-model = "number" /></p> <button ng-click = "squareOfNumber()">X<sup>2</sup></button> <p>Result: {{result}}</p> </div> <script> var mainApp = angular.module("mainApp", []); mainApp.factory('MathService', function() { var factory = {}; factory.multiply = function(a, b) { return a * b } return factory; }); mainApp.service('CalcService', function(MathService){ this.square = function(a) { return MathService.multiply(a,a); } }); mainApp.controller('CalcController', function($scope, CalcService) { $scope.squareOfNumber= function() { $scope.result = CalcService.squareOfNumber($scope.number); } }); </script> </body> </html>