AngularJS Services

Στο AngularJS, μπορείτε να δημιουργήσετε τις δικές σας υπηρεσίες ή να χρησιμοποιήσετε μια από τις πολλές ενσωματωμένες υπηρεσίες.

Τι είναι υπηρεσία;

Στο AngularJS, οι υπηρεσίες είναι λειτουργίες ή αντικείμενα που μπορούν να χρησιμοποιηθούν και να περιορίζονται μόνο στην εφαρμογή AngularJS σας.

Το AngularJS έχει περίπου 30 ενσωματωμένες υπηρεσίες. Μία από αυτές είναι $location Υπηρεσία.

$location Η υπηρεσία έχει μεθόδους που μπορούν να επιστρέψουν πληροφορίες για τη θέση της τρέχουσας σελίδας της ιστοσελίδας:

Παράδειγμα

Χρήση της υπηρεσίας $location στον ελεγκτή:

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

Try It Yourself

Παρακαλώ σημειώστε ότι$location Οι υπηρεσίες μεταφέρονται ως παραμέτροι στον ελεγκτή. Για να χρησιμοποιήσετε την υπηρεσία στον ελεγκτή, πρέπει να την ορίσετε ως εξαρτημένη.

Γιατί να χρησιμοποιήσετε υπηρεσίες;

Για πολλές υπηρεσίες όπως $location υπηρεσίες, φαίνεται ότι μπορείτε να χρησιμοποιήσετε αντικείμενα που ήδη υπάρχουν στο DOM (π.χ., το αντικείμενο window.location）， αλλά θα υπάρχουν μερικές περιορισμοί, τουλάχιστον για την εφαρμογή AngularJS σας.

Το AngularJS παρακολουθεί συνεχώς την εφαρμογή σας, προτιμώντας να χρησιμοποιείτε $location υπηρεσία αντί για το αντικείμενο window.location.

Υπηρεσία $http

$http Η υπηρεσία είναι μια από τις πιο συχνά χρησιμοποιούμενες υπηρεσίες στην εφαρμογή AngularJS. Η υπηρεσία στέλνει αιτήματα στον διακομιστή και επιτρέπει στην εφαρμογή σας να χειρίζεται τις απαντήσεις.

Παράδειγμα

Χρησιμοποιώντας την υπηρεσία $http για να ζητήσετε δεδομένα από τον διακομιστή:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm").then(function (response) {
    $scope.myWelcome = response.data;
  });
});

Try It Yourself

Αυτό το παράδειγμα δείχνει $http Μια πολύ απλή χρήση της υπηρεσίας. Για περισσότερες πληροφορίες σχετικά με την υπηρεσία $http, δείτε το εγχειρίδιο AngularJS Http.

Υπηρεσία $timeout

$timeout Η υπηρεσία είναι η έκδοση AngularJS της window.setTimeout λειτουργία.

Παράδειγμα

Εμφάνιση νέου μηνύματος μετά από δύο δευτερόλεπτα:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
  $scope.myHeader = "Hello World!";
  $timeout(function () {
    $scope.myHeader = "How are you today?";
  }, 2000);
});

Try It Yourself

Υπηρεσία $interval

$interval Η υπηρεσία είναι η έκδοση AngularJS της window.setInterval λειτουργία.

Παράδειγμα

Εμφάνιση της ώρας κάθε λεπτό:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
  $scope.theTime = new Date().toLocaleTimeString();
  $interval(function () {
    $scope.theTime = new Date().toLocaleTimeString();
  }, 1000);
});

Try It Yourself

Δημιουργία της δικής σας υπηρεσίας

Για να δημιουργήσετε την δική σας υπηρεσία, συνδέστε την με το μοντέλο:

Δημιουργία μιας υπηρεσίας με το όνομα hexafy υπηρεσία:

app.service('hexafy', function() {
  this.myFunc = function (x) {
    return x.toString(16);
  }
});

Για να χρησιμοποιήσετε την προσαρμοσμένη σας υπηρεσία, προσθέστε την ως εξαρτημένο στοιχείο κατά την ορισμό του ελέγχου:

Παράδειγμα

Χρησιμοποιώντας την προσαρμοσμένη υπηρεσία με το όνομα hexafy για τη μετατροπή αριθμών σε δεκαεξαδικούς αριθμούς:

app.controller('myCtrl', function($scope, hexafy) {
  Το $scope.hex = hexafy.myFunc(255);
});

Try It Yourself

Using Custom Services in Filters

After creating the service and connecting it to your application, you can use this service in any controller, directive, filter, or even other services.

To use a service in a filter, add it as a dependency when defining the filter:

The service used in the filter myFormat: hexafy

app.filter('myFormat',['hexafy', function(hexafy) {
  return function(x) {
    return hexafy.myFunc(x);
  };
});

Try It Yourself

You can use this filter when displaying values in objects or arrays:

<ul>
  <li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>

Try It Yourself