Provider, bo o nim mowa, służy do tworzenia nowych obiektów, podobnie jak service czy factory. Jednak, ten wyróżnia największa elastyczność. W tym wpisie, zostanie utworzona podobna aplikacja do tej z poprzedniego wpisu AngularJS – Service, różnica polegać będzie na tym, że teraz wykorzystamy do jej budowy provider, a nie jak ostatnio service.
Trochę teorii
Provider zawiera funkcję $get() odpowiedzialną za tworzenie nowych obiektów, do której to możemy wstrzykiwać zależności np. obiekt value. AngularJS daje nam również możliwość konfigurowania providera w czasie tworzenia modułu, co też będziemy mieli możliwość zobaczyć w poniższym kodzie.
Do utworzenia konfiguracji w czasie tworzenia modułu wykorzystamy obiekt constant, który może być wstrzykiwany do metody config() np. value nie ma takiej możliwości. Sposób utworzenia wartości stałej:
app.constant("year", "2016");
Przykładowa aplikacja
<!DOCTYPE html>
<html lang="pl" ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>AngularJS #7</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<style>
.panel-default {
margin-top: 2em;
padding: 1em;
}
</style>
</head>
<body ng-controller="appCtrl">
<h1 class="text-center">Car</h1>
<div class="row">
<div class="col-md-4 col-md-offset-4 panel panel-default">
<p class="text-center">
<strong>Name: </strong>{{car.name}}
</p>
<p class="text-center">
<strong>Model: </strong>{{car.model}}
</p>
<p class="text-center">
<strong>Year: </strong>{{car.year}}
</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.js" integrity="sha256-tA8y0XqiwnpwmOIl3SGAcFl2RvxHjA8qp0+1uCGmRmg="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script>
var app = angular.module("app", []);
app.provider("factoryProv", function () {
var factory = {};
var car = {
name: "Fiat",
model: "126p",
year: "2018"
}
factory.setYear = function (year) {
car.year = year;
}
factory.$get = function () {
return car;
}
return factory;
});
app.constant("year", "2016");
app.config(function (factoryProvProvider, year) {
factoryProvProvider.setYear(year);
})
app.controller("appCtrl", function ($scope, factoryProv) {
$scope.car = factoryProv;
})
</script>
</body>
</html>
Jak możemy zauważyć, kod html i css nie uległ zmianie względem poprzedniego wpisu.
Na początku kodu JSowego tworzymy moduł, a następnie provider. Jak możemy zauważyć, pierwszym parametrem jest nazwa providera, a drugim funkcja. Deklarujemy pusty obiekt factory oraz wypełniony obiekt car. Kolejnym krokiem jest, utworzenie settera dla pola year. Dalej wywołujemy metodę $get(), która odpowiada za tworzenie obiektu zwracanego przez provider. W tej metodzie zwracany jest wcześniej utworzony obiekt car. Po czym następuje zwrócenie całego obiektu factory przez provider.
Tworzymy wartość stałą, która będzie odpowiadała za ustawienie pola year na rok 2016.
Przystępujemy do konfiguracji providera. Dla utworzonego na samym początku modułu wywołujemy metodę config(), gdzie wstrzykiwane są dwie zależności: provider oraz wartość stała. Należy jednak pamiętać, że AngularJS rozpoznaje w tym wypadku nazwę providera jako nazwa podana podczas tworzenia providera + Provider w naszym wypadku będzie to factoryProvProvider.
Na koniec tworzymy kontroler i do $scope.car przypisujemy obiekt zwrócony przez provider.
Efekt działania aplikacji
Podsumowanie
W tym wpisie udało nam się omówić ostatni wstrzykiwany element AngularJSa jakim jest provider. Utworzona aplikacja wygląda tak samo jak w poprzednim wpisie, jednak wykorzystuje inny mechanizm do utworzenia wyświetlanego obiektu. Poza omówionym providedrem poznaliśmy również wartości stałe, dzięki czemu mogliśmy konfigurować provider podczas tworzenia modułu.
