Tuto AngularJS

Services Factory et Providers

Comment utiliser les services, les factory et les providers avec AngularJS? Les services, les factory et les providers permettent de séparer certaines fonctionnalités de la logique du contrôleur. Ces fonctionnalités peuvent êtres déjà écrites comme le service $http ou bien écrites par nous même pour un besoin spécifique.

Exemple d'un service AngularJS

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple d'un service et d'une factory AngularJS</title>
    <link rel="stylesheet" type="text/css" href="mon_fichier_css.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="leModule">
    <div ng-controller="leControleur">
        Entrer un nombre ici:<br>
        <input type="text" ng-model="checkNumber" ><br>
        au carré = {{carreFunction()}}<br>
    </div>
    <script>
        var app = angular.module('leModule', []);

        app.service('carreService', function() {
            this.serviceFunction = function (val) {return Math.pow(val, 2);}
        });

        app.controller("leControleur", function($scope, carreService){
            $scope.checkNumber = "";
			
            $scope.carreFunction = function() {
                return carreService.serviceFunction($scope.checkNumber)
            }
        });
    </script>
</body>
</html>

Exemple d'une factory AngularJS

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple d'un service et d'une factory AngularJS</title>
    <link rel="stylesheet" type="text/css" href="mon_fichier_css.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="leModule">
    <div ng-controller="leControleur">
        Entrer un nombre ici:<br>
        <input type="text" ng-model="checkNumber" ><br>
        au cube = {{cubeFunction()}}
    </div>
    <script>
        var app = angular.module('leModule', []);

        app.factory("cubeFactory", function(){
            return{
                factoryFunction: function(val){return Math.pow(val, 3);}
            }
        });

        app.controller("leControleur", function($scope, cubeFactory){
            $scope.checkNumber = "";
			
            $scope.cubeFunction = function() {
                return cubeFactory.factoryFunction($scope.checkNumber)
            }
        });
    </script>
</body>
</html>