Angular, et la directive include

Alors comme je l’annonçais ce matin, l’article d’aujourd’hui sera court (trĂšs court), mais nĂ©anmoins il pourra peut-ĂȘtre changer votre vie de dĂ©veloppeur front (ok, j’y vais un peu fort, mais 
). Combien de fois j’ai pestĂ© parce que mon code html devenait trop “touffu”, illisible, 
 Dans ces moments lĂ , il ya plusieurs solutions : bricolage avec jquery pour charger les templates, appel au plugin text de require, grunt, 
 mais toujours une gymnastique Ă  force pĂ©nible pour arriver Ă  modulariser ses page html.

Avec Angular c’est simple, en 1 seule directive vous pouvez rĂ©gler tous vos problĂšmes.

Pré-requis: avoir lu les articles précédents:

Restructuration de notre projet (cÎté front)

Actuellement nous avons une structure front qui doit ressembler Ă  ceci:

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

CrĂ©ez donc dans /public un rĂ©pertoire books avec 2 fichiers html Ă  l’intĂ©rieur : bookForm.html et booksList.html, comme ceci:

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

Dans votre page index.html extrayez complĂštement le code correspondant Ă  votre formulaire pour le coller dans bookForm.html. Le contenu de bookForm.html devrait ĂȘtre celui-ci:

<h3 class="uk-panel-title">Formulaire Livre</h3>

<form class="uk-form" name="bookForm" novalidate>
  <input ng-model="book.title" name="title" placeholder="titre du film" required>

  <span ng-show="bookForm.title.$error.required" class="uk-text-warning">Champs obligatoire</span>

  <input ng-model="book.description" placeholder="description du film">
  <select ng-model="book.level"
          ng-options="level for level in levels">
  </select>
  <p ng-model="book">{{book._id}}</p>

  <hr>
  <button class="uk-button" ng-click="newBook()">Nouveau</button> |
  <button class="uk-button uk-button-primary" ng-disabled="bookForm.$invalid" ng-click="saveBook(book)">Valider (ajout ou modification)</button> |
  <button class="uk-button uk-button-danger" ng-click="deleteBook(book._id)">Supprimer</button> |
  <hr>

</form>

Ensuite, toujours de votre page index.html extrayez complĂštement le code correspondant Ă  votre liste de livre pour le coller dans booksList.html. Le contenu de booksList.html devrait ĂȘtre celui-ci:

<h3 class="uk-panel-title">Liste des Livres</h3>

<form class="uk-form">
  <input ng-model="search.$" placeholder="chercher un livre">
  <input ng-model="search.title" placeholder="par titre">
  <input ng-model="search.description" placeholder="par description">
  <select ng-model="search.level"
          ng-options="level for level in levels">
  </select>
</form>

<table class="uk-table uk-table-hover">
  <thead>
  <tr>
    <th>Titre</th>
    <th>Description</th>
    <th>Niveau</th>
    <th>id</th>
  </tr>
  </thead>

  <tbody ng-repeat="book in books | filter:search:strict" ng-click="selectBook(book)">

  <tr>
    <td>{{book.title}}</td>
    <td>{{book.description}}</td>
    <td>{{book.level | stars}}</td>
    <td>{{book._id}}</td>
  </tr>
  </tbody>
</table>

Du coup, votre page index.html devrait ressembler Ă  ceci:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>livres</title>
    <link rel="stylesheet" href="bower_components/uikit/dist/css/uikit.almost-flat.min.css" />
  </head>

  <body ng-app="booksApp" style="padding: 10px">

    <div class="uk-container uk-container-center">

      <div class="uk-grid" ng-controller="MainCtrl">
        <div class="uk-width-4-10">

          <div class="uk-panel">
            <!-- ici il y avait la saisie des livres -->
          </div>

        </div>

        <div class="uk-width-6-10">

          <div class="uk-panel">
            <!-- ici il y avait la liste des livres -->
          </div>

        </div>
      </div>
    </div>

    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-resource/angular-resource.min.js"></script>

    <script src="js/main.js"></script>

  </body>
</html>

Alors c’est tout de suite plus propre, mais ça marche forcĂ©ment beaucoup moins bien 


La “magie” avec Angular

Nous devons juste nous contenter d’expliquer Ă  Angular oĂč sont bookForm.html et booksList.html. Et pour cela la directive ng-include va grandement nous faciliter la vie. Pour cela,

Remplacez:

<div class="uk-panel">
  <!-- ici il y avait la saisie des livres -->
</div>

par:

<div class="uk-panel" ng-include="'books/bookForm.html'" onload="whenFormIsLoaded()"></div>

Angular Ă  partir de ng-include ira charger books/bookForm.htmlet lancera grĂące Ă  onload la mĂ©thode whenFormIsLoaded()du contrĂŽleur (il faudra crĂ©er la mĂ©thode, mais onload n’est pas obligatoire).

Puis remplacez:

<div class="uk-panel">
  <!-- ici il y avait la liste des livres -->
</div>

par:

<div class="uk-panel" ng-include="'books/booksList.html'" onload="whenListIsLoaded()"></div>

Angular, toujours Ă  partir de ng-include ira aussi charger books/booksList.htmlet lancera grĂące Ă  onload la mĂ©thode whenListIsLoaded()du contrĂŽleur (il faudra crĂ©er la mĂ©thode, mais onload n’est pas obligatoire).

Remarque importante: avez vous vu que j’ai mis les paths vers les templates html entre simples quotes avant de les mettre entre doubles quotes : c’est pour Ă©viter Ă  Angular d’évaluer la directive.

Donc le code dĂ©finitif de index.html devrait ĂȘtre le suivant:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>livres</title>
    <link rel="stylesheet" href="bower_components/uikit/dist/css/uikit.almost-flat.min.css" />
  </head>

  <body ng-app="booksApp" style="padding: 10px">

    <div class="uk-container uk-container-center">

      <div class="uk-grid" ng-controller="MainCtrl">
        <div class="uk-width-4-10">

          <div class="uk-panel" ng-include="'books/bookForm.html'" onload="whenFormIsLoaded()"></div>

        </div>

        <div class="uk-width-6-10">

          <div class="uk-panel" ng-include="'books/booksList.html'" onload="whenListIsLoaded()"></div>

        </div>
      </div>
    </div>

    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-resource/angular-resource.min.js"></script>

    <script src="js/main.js"></script>

  </body>
</html>

Il ne vous reste plus qu’à tester. Je vous laisse imaginer comment cela va ĂȘtre facile de modulariser vos projets et de vous en faciliter la maintenance.

Next step: ngRoute

@ bientĂŽt ;)

blog comments powered by Disqus

Related posts