Angular, http et services

Pour cet article, je vous explique comment je vais faire interagir mon “front” Angular avec des services Json fournis par Express.

Prérequis

Avoir lu les articles précédents :

ou la version “agrĂ©gĂ©e” : http://e-books.github.io/je.decouvre.angular/

Rapidement, la partie serveur

Normalement (si vous avez suivi) vous devez avoir un projet qui ressemble à ça :

votre_projet/
├── public/
|   ├── bower_components/ /* angular est par ici */
|   ├── js/      
|   |    └── main.js
|   └── index.html
├── bower.json
└── .bowerrc

Nous avons besoin d’installer Express, pour la base de donnĂ©es nous utiliserons NeDB qui est une petite base de donnĂ©es NoSQL lĂ©gĂšre Ă  base de “fichiers” qui fonctionne avec la mĂȘme logique que MongoDb, vous pourrez donc porter votre code facilement par la suite.

Pour plus d’informations, vous pouvez lire mon article: http://k33g.github.io/2014/05/11/NEDB.html

Installation Express + NeDB

A la racine de votre projet, créez un fichier package.json avec ce contenu:

{
  "name": "books",
  "description" : "books",
  "version": "0.0.0",
  "dependencies": {
    "express": "4.1.x",
    "body-parser": "1.0.2",
    "nedb": "0.10.5"
  }
}

Tapez dans une console la commande (Ă  la racine de votre projet) :

npm install

Maintenant vous devriez avoir cette structure :

votre_projet/
├── node_modules/ /* <-- Express et NeDB sont ici */    
├── public/
|   ├── bower_components/ /* angular est par ici */
|   ├── js/      
|   |    └── main.js
|   └── index.html
├── package.json    
├── bower.json
└── .bowerrc

Services JSON

Pour le moment je n’ai prĂ©vu que 3 types de services possibles :

  • CrĂ©er un livre
  • Retrouver un livre par son id
  • RĂ©cupĂ©rer la liste de tous les livres

Donc, créer à la racine de votre projet, un fichier app.js avec le contenu suivant:

var express = require('express')
  , http = require('http')
  , bodyParser = require('body-parser')
  , DataStore = require('nedb')
  , app = express()
  , http_port = 3000
  , booksDb = new DataStore({ filename: 'booksDb.nedb' });

app.use(express.static(__dirname + '/public'));
app.use(bodyParser());

// Liste de tous les livres
app.get("/books", function(req, res) {
  booksDb.find({}, function (err, docs) {
    res.send(docs);
  });
});

// Obtenir un livre par son id
app.get("/books/:id", function(req, res) {
  booksDb.findOne({ _id: req.params.id }, function (err, doc) {
    res.send(doc)
  });
});

// Ajouter un livre
app.post("/books", function(req, res) {
  var book = req.body;

  booksDb.insert(book, function (err, newDoc) {
    res.statusCode = 301;
    res.header("location", "/books/"+newDoc._id).end();
  });
});

// Lancer l'application une fois la base chargée
booksDb.loadDatabase(function (err) {
  app.listen(http_port);
  console.log("Listening on " + http_port);
});

Nous avons donc ceci:

votre_projet/
├── node_modules/ /* <-- Express et NeDB sont ici */    
├── public/
|   ├── bower_components/ /* angular est par ici */
|   ├── js/      
|   |    └── main.js
|   └── index.html
├── package.json    
├── bower.json
├── .bowerrc
└── app.js

Et nous sommes donc prĂȘts pour la suite.

API $http

Angular propose une API “ajax” par le biais du “helper” $http qui permet donc de faire des requĂȘtes vers votre serveur.

Nous avons vu dans la partie précédente comment sortir nos modÚles du contrÎleur avec une factory, nous avions ceci:

/*--- factory ---*/
booksApp.factory("Models", function() {
  var books = function() {
    return [
      {title:"Backbone c'est de la balle", description:"tutorial bb", level:"trĂšs bon"}
      , {title:"React ça dépote", description:"se perfectionner avec React", level:"bon"}
      , {title:"J'apprends Angular", description:"from scratch", level:"débutant"}
    ]
  };
  var levels = function() {
    return [
      "trÚs bon", "bon", "débutant"
    ];
  }

  return {
    books : books, levels : levels
  }
});

Par la suite, cela va ĂȘtre le serveur qui va nous fournir les livres (pour le moment je laisse les niveaux (levels) “en dur” cĂŽtĂ© front). Donc, modifions notre factory Models de la façon suivante:

/*--- factory ---*/
booksApp.factory("Models", function() {

  var levels = function() {
    return [
      "trÚs bon", "bon", "débutant"
    ];
  }

  return {
    levels : levels
  }
});

Et modifiez le contrĂŽleur de cette maniĂšre:

  • modifier la propriĂ©tĂ© $scope.books = Models.books();
  • remplacer la mĂ©thode $scope.createBook
  • ajouter la mĂ©thode $scope.getAllBooks
  • ajouter dans le constructeur du contrĂŽleur un appel Ă  getAllBooks
  • ajouter la rĂ©fĂ©rence Ă  l’api $http dans les paramĂštres du contrĂŽleur: booksApp.controller("MainCtrl", function($scope, $http, Models) {})
  • supprimez $scope.selectedBook et selectBook() (nous n’en avons plus besoin pour le moment)
var MainCtrl = booksApp.controller("MainCtrl", function($scope, $http, Models) {
  
  $scope.books = null;
  $scope.levels = Models.levels();

  $scope.getAllBooks = function() {
    $http.get("books").success(function(data) {
      $scope.books = data;
    })
  }

  $scope.createBook = function(book) {
    $http.post("books", book).success(function(data){
      $scope.getAllBooks();
      $scope.book = null;
    });
  }
  // charger les livres
  $scope.getAllBooks()

});

Nous utilisons l’API $http dans la mĂ©thode $scope.getAllBooks pour faire une requĂȘte de type GET sur l’uri books, ce qui aura pour effet d’appeler la route Express dĂ©finie plus haut par :

// Liste de tous les livres
app.get("/books", function(req, res) {
  booksDb.find({}, function (err, docs) {
    res.send(docs);
  });
});

Et nous utilisons l’API $http dans la mĂ©thode $scope.createBook pour faire une requĂȘte de type POST sur l’uri books, ce qui aura pour effet d’appeler la route Express dĂ©finie plus haut par :

// Ajouter un livre
app.post("/books", function(req, res) {
  var book = req.body;

  booksDb.insert(book, function (err, newDoc) {
    res.statusCode = 301;
    res.header("location", "/books/"+newDoc._id).end();
  });
});

Notez bien que la méthode $scope.createBook prend maintenant book en paramÚtre.

Avant d’essayer, nous allons apporter une petite modification Ă  notre vue HTML, souvenez vous nous avions un bouton pour crĂ©er un livre “vierge”:

<hr>
<a href="# " ng-click="createBook()">Ajouter un livre</a>
<hr>

Modifiez comme ceci: (nous passons le modÚle book en paramÚtre de la méthode)

<hr>
<a href="# " ng-click="createBook(book)">Ajouter un livre</a>
<hr>

Remonter cette partie, juste en dessous du formulaire de saisie (c’est plus ergonomique) et modifiez les directives model en remplaçant selectedBook par book:

<div>
  <input ng-model="book.title">
  <input ng-model="book.description">
  <div>
    <select id="inputType"
            ng-model="book.level"
            ng-options="level for level in levels"></select>
  </div>
  <!-- j'ai mis mon bouton ici, c'est plus ergonomique -->
  <hr>
  <a href="# " ng-click="createBook(book)">Ajouter un livre</a>
  <hr>
</div>

Essayons

Donc, pour cela, en mode commande, à la racine, lancez la commande node app.js puis ouvrez dans votre navigateur http://localhost:3000. Cette fois-ci, vous allez obtenir une page vous permettant de saisir un nouveau livre, avec une liste vide (normal), maintenant essayez de créer des livres.

Si tout va bien ça fonctionne (sinon “pinguez” moi).

Toujours plus propre : on découple

Nous avons dĂ©jĂ  vu comment sĂ©parer les responsabilitĂ©s avec la factory et les Models, voyons maintenant comment utiliser la notion de services d’Angular, pour enlever la “notion” d’API $http du contrĂŽleur (on dĂ©couple).

Création du service BooksServices

Pour crĂ©er un service, il suffit d’utiliser la mĂ©thode service de notre module angular booksApp, de la maniĂšre suivante:

booksApp.service("BooksServices", function($http) {

  this.getAll = function(callback) {
    $http.get("books").success(function(data) {
      callback(data);
    })
  }

  this.create = function(book, callback) {
    $http.post("books", book).success(function(data){
      callback(data);
    });
  }
})

Le raisonnement est un peu diffĂ©rent de la factory qui retournait une instance d’objet/fonction, lĂ  pensez un peu comme si vous aviez une classe avec des mĂ©thodes statiques.

Nous avons donc créé BooksServices qui propose 2 méthodes: getAll et create, remarquez le passage de $http en paramÚtre: booksApp.service("BooksServices", function($http) {})

Modification du contrĂŽleur MainCtrl

Apportons quelques modifications Ă  notre contrĂŽleur:

  • on ne passe plus $http en paramĂštre mais BooksServices: dites vous que si vous voyez $http dans un contrĂŽleur c’est qu’il y a peut-ĂȘtre un souci ;)
  • nous modifions getAllBooks et createBook pour utiliser BooksServices
var MainCtrl = booksApp.controller("MainCtrl", function($scope, Models, BooksServices) {

  $scope.books = null;
  $scope.levels = Models.levels();

  $scope.getAllBooks = function() {
    BooksServices.getAll(function(data) {
      $scope.books = data;
    })
  }

  $scope.createBook = function(book) {
    BooksServices.create(book, function(data) {
      $scope.getAllBooks();
    })
  }

  $scope.getAllBooks()
});

Il n’y a plus qu’à tester pour vĂ©rifier 
 Et bien sĂ»r cela fonctionne \o/

Nous avons donc pu voir comment rendre notre code plus propre et plus facilement maintenable.

Demain nous verrons la factory $resource pour ĂȘtre complĂštement “RESTful”

blog comments powered by Disqus

Related posts