<!DOCTYPE html>
<html>
<head>
<title>AngularJS Location Service</title>
<script type="text/javascript" src="../js/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h4>This is your location (URL) :</h4>
<h3>{{myUrl}}</h3>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
</script>
</body>
</html>
The AngularJs $location service is passed in to the controller as an argument. In order to use the service in the controller, it must be defined as a dependency.
So many angularjs services, like the $location service, it seems like you could use objects that are already in the DOM, like the window.location
object.
<!DOCTYPE html>
<html>
<head>
<title>AngularJS http Service </title>
<script type="text/javascript" src="../js/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>$http service message is:</p>
<h1>{{myWelcome}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome-http.html").then(function (response) {
$scope.myWelcome = response.data;
});
});
</script>
</body>
</html>
$timeout
service is AngularJS' version of the window.setTimeout
function.<!DOCTYPE html>
<html>
<head>
<title>AngularJS timeout Service </title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h4>This header will change after Three seconds :</h4>
<h1>{{myHeader}}</h1>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello FTL!";
$timeout(function () {
$scope.myHeader = "Welcome to Free Time Learning (www.freetimelearning.com)";
}, 3000);
});
</script>
</body>
</html>
$interval
service is AngularJS' version of the window.setInterval
function.
<!DOCTYPE html>
<html>
<head>
<title>AngularJS interval Service </title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>The time is:</p>
<h1>{{theTime}}</h1>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
</script>
</body>
</html>
hexafy
used in the filter
myFormat :<!DOCTYPE html>
<html>
<head>
<title>AngularJS Custom Service Inside a Filter</title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Use a filter when displaying the <strong>array [205, 234, 252]</strong> :</p>
<ul>
<li ng-repeat="x in counts" style="font-weight:bold; font-size:20px;">{{x | myFormat}}</li>
</ul>
<p>This filter uses a service that converts numbers into <b>hexadecimal</b> values.</p>
</div>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
app.controller('myCtrl', function($scope) {
$scope.counts = [205, 234, 252];
});
</script>
</body>
</html>