ANGULAR JS | Services & It's Types in AngularJS By. Sunrise Computers
ANGULAR JS
ANGULAR JS | SERVICES
AngularJS में बहुत सारी In-Built Services होती है और Custom Services भी बनाई जाती है | AngularJS Service ये Function या Object होता है | Service; Browser द्वारा Server के communication को handle करता है | Angular JS Service ये एक ऐसा Object है जो Web Application की कार्यक्षमता को प्रदान करता है |
ANGULAR JS | SERVICES | $anchorScroll
$anchorScroll ये service; $location.hash() function पर दिए गए id के मुताबिक उसके called पर scroll किया जाता है | $anchorScrollProvider.disableAutoScrolling() को call करने पर $anchorScroll ये service disabled हो जाती है |
Source Code
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
.down{
margin-top:2000px;
}
</style></head><body>
<div ng-app="app" ng-controller="ASctrl">
<a href="" id="top" ng-click="toDown()">Click to go to Down</a>
<div class="down">
<a href="" id="down" ng-click="toTop()">Click to go to Up</a>
</div></div><script>
var app = angular.module("app",[]);
app.controller("ASctrl",['$location','$anchorScroll','$scope', function ($location, $anchorScroll,$scope){
$scope.toTop = function(){
$location.hash('top');
$anchorScroll();
}
$scope.toDown = function(){
$location.hash('down');
$anchorScroll();
}
}]);
</script></body></html>
ANGULAR JS | SERVICES | $document
ये Browser का window.document Object के लिए jQuery/jqLite wrapper होता है | इस Object में बहुत सारी properties होती है | $document ये Object window.document जैसे होता है |
Source Code
<html><head>
<title>SUNRISE ANGULAR JS $document OBJECTS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head><body>
<div ng-app="app" ng-controller="ctrl">
{{mytitle}}<br />
{{myurl}}
</div><script>
var myapp = angular.module("app",[]);
myapp.controller("ctrl", function($document,$scope){
$scope.mytitle = $document[0].title;
$scope.myurl = $document[0].URL;
});
</script> </body></html>
ANGULAR JS | SERVICES | $location
ये Object; window.location इस object जैसा होता है | ये object; location के बारे में सभी information को methods के माध्यम से प्राप्त करता है |
Source Code
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head><body>
<div ng-app="app" ng-controller="ctrl">
$location.absUrl() :{{absUrl}}<br />
$location.hash() :{{hash}}<br />
$location.host() :{{host}}<br />
$location.path() :{{path}}<br />
$location.port :{{port}}<br />
$location.protocol() :{{protocol}}<br />
$location.search :{{search}}
</div><script>
var myapp = angular.module("app",[]);
myapp.controller("ctrl", function($location,$scope){
$scope.absUrl = $location.absUrl();
$scope.hash = $location.hash();
$scope.host = $location.host();
$scope.path = $location.path();
$scope.port = $location.port();
$scope.protocol = $location.protocol();
$scope.search = $location.search();
});
</script></body></html>
ANGULAR JS | SERVICES | $timeout
ये Object; Javascript के window.setTimeout() Method जैसे होता है | ये window.setTimeout() method का wrapper होता है |
Note :- Example पर 5 seconds(5000 milliseconds) के बाद दूसरे text को display किया जाएगा |
Source Code
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head><body>
<div ng-app="app" ng-controller="ctrl">
Change Text After 5 seconds : {{var}}
</div><script>
var myapp = angular.module('app', []);
myapp.controller('ctrl', function($scope, $timeout){
$scope.var = "Welcome to Sunrise Computer Classes";
var myFunc = function (){
$scope.var = "Hello Student!!";
}
$timeout(myFunc, 5000);
});
</script></body></html>
ANGULAR JS | SERVICES | $log
$log service; ये Object; Browser के console पर logs message को लिखने के लिए इस्तेमाल किया जाता है | $log service में कुछ methods होते है जो Browser console पर log error, information warning और debugging को लिखने के लिए इस्तेमाल किया जाता है |
Source Code
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head><body>
<div ng-app="app" ng-controller="ctrl">
{{logMsg}}<br />
{{errorlog}}<br />
{{infolog}}<br />
{{warnlog}}<br />
{{debuglog}}
</div><script>
var myapp = angular.module("app",[]);
myapp.controller("ctrl", function($log,$scope){
$scope.logMsg = $log.log('log Message');
$scope.errorlog = $log.error('log error');
$scope.infolog = $log.info('log info');
$scope.warnlog = $log.warn('log warning');
$scope.debuglog = $log.debug('log debugging');
});
</script></body></html>
For Any Doubt Clear on Telegram Discussion Group
Comments
Post a Comment