Truc 35 : Une factory ANGULARJS dédiée à la gestion de FIREBASE

FirebaseIntroduction


Un code ANGULARJS très bien organisé, avec une factory CRUD pour FIREBASE.

La factory utilise les instructions $add, $save et $remove de Firebase.

Tout est mis à jour en temps réel. On rappelle qu’avec ce système moderne, il n’y a plus de Back-end. (Et que ça, c’est sympa, sauf quand on aime SQL).

Note : je vais tenter de dériver ce code afin de gérer des sous élèments de modèles de données JSON, ensuite, ce sera une super base pour créer des apps, et j’ai déjà commencé à créer une app avec Authentification.

Une application partagée  en ligne à tester ici .

http://nicolash.org/angular/truc35.html

Pour vérifier que c’est partagé, ouvrir 2 onglets de l’application, on voit alors les modifications s’appliquer en temps réel dans les 2 onglets…

Le Code :


<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <title>Angular Firebase</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!-- CHARGEMENT DES LIBRAIRIES -->

			<!-- CHARGEMENT LIB ANGULAR -->
			<script type="text/javascript" src="angular-1.3.13/angular.min.js"></script>
			<script src="angular-route.min.js"></script>
			<script src="librairies/angular-locale_fr-fr.js"></script>
			<!-- CHARGEMENT LIB FIREBASE -->
			<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
			<!-- AngularFire -->
			<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
			<!-- CSS DE L'APPLICATION -->
			<link href="truc34.css" media="screen" rel="stylesheet" type="text/css" /> 

        <!-- FIN DE CHARGEMENT DES LIBRAIRIES -->
<script>

var app = angular.module('app', ['firebase']);

app.constant('FIREBASE_URI', 'https://blinding-heat-8502.firebaseio.com/testing/');

app.controller('MainCtrl', ['$scope', 'ItemsService', function ($scope, ItemsService) {
    $scope.newItem = { name: '', description: '', count: 0 };
    $scope.currentItem = null;

    $scope.items = ItemsService.getItems();

    $scope.addItem = function () {
        ItemsService.addItem(angular.copy($scope.newItem));
        $scope.newItem = { name: '', description: '', count: 0 };
    };

    $scope.updateItem = function (id) {
        ItemsService.updateItem(id);
    };

    $scope.removeItem = function (id) {
        ItemsService.removeItem(id);
    };
}]);

app.factory('ItemsService', ['$firebaseArray', 'FIREBASE_URI', function ($firebaseArray, FIREBASE_URI) {
    var ref = new Firebase(FIREBASE_URI);
    var items = $firebaseArray(ref);

    var getItems = function () {
        return items;
    };

    var addItem = function (item) {
        items.$add(item);
    };

    var updateItem = function (id) {
        items.$save(id);
    };

    var removeItem = function (id) {
        items.$remove(id);
    };

    return {
        getItems: getItems,
        addItem: addItem,
        updateItem: updateItem,
        removeItem: removeItem
    }
}]);	

</script>

</head>
<body ng-controller="MainCtrl">
<table class="table edit">
    <thead>
    <tr>
        <th>Nom</th>
        <th>Description</th>
        <th>Nombre</th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="(id, item) in items">
        <td><input type="text" ng-model="item.name" 		ng-blur="updateItem(id)"/></td>
        <td><input type="text" ng-model="item.description" 	ng-blur="updateItem(id)"/></td>
        <td><input type="text" ng-model="item.count"		ng-blur="updateItem(id)"/></td>
        <td>
            <a href="#" ng-click="removeItem(id)" class="navbar-link">Supprimer</a>
        </td>
    </tr>
    </tbody>
</table>

<div class="well">
    <h4>Ajouter un Objet</h4>

    <form class="form-inline" role="form" novalidate ng-submit="addItem()">
        <div class="form-group">
            <input type="text" class="form-control" ng-model="newItem.name" placeholder="Nom">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" ng-model="newItem.description" placeholder="Description">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" ng-model="newItem.count" placeholder="Nombre">
        </div>
        <button type="submit" class="btn btn-default">Ajouter</button>
    </form>
</div>

</body>
</html>

 

Publicités