Description
This tutorial is specially designed to help you learn AngularJS as quickly and efficiently as possible.
First, you will learn the basics of AngularJS: directives, expressions, filters, modules, and controllers.
Then you will learn everything else you need to know about AngularJS:
Events, DOM, Forms, Input, Validation, Http, and more.
Let’s begin!
Why use Services?
For many services, like the $location
service, it seems like you could use objects that are already in the DOM, like the window.location
object, and you could, but it would have some limitations, at least for your AngularJS application.
AngularJS constantly supervises your application, and for it to handle changes and events properly, AngularJS prefers that you use the $location
service instead of the window.location
object.
The $http Service
The $http
service is one of the most common used services in AngularJS applications. The service makes a request to the server, and lets your application handle the response.
Example
Use the $http
service to request data from the server:
var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope, $http) {
$http.get(“welcome.htm”).then(function (response) {
$scope.myWelcome = response.data;
});
});
The $timeout Service
The $timeout
service is AngularJS’ version of the window.setTimeout
function.
Example
Display a new message after two seconds:
var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope, $timeout) {
$scope.myHeader = “Hello World!”;
$timeout(function () {
$scope.myHeader = “How are you today?”;
}, 2000);
});
The $interval Service
The $interval
service is AngularJS’ version of the window.setInterval
function.
Example
Display the time every second:
var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
Create Your Own Service
To create your own service, connect your service to the module:
Create a service named hexafy
:
app.service(‘hexafy’, function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
To use your custom made service, add it as a dependency when defining the controller:
Example
Use the custom made service named hexafy
to convert a number into a hexadecimal number:
app.controller(‘myCtrl’, function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});