Pages

Affichage des articles dont le libellé est angular. Afficher tous les articles
Affichage des articles dont le libellé est angular. Afficher tous les articles

Expressivité


Nous connaissons le manque d'expressivité du HTML (qui ne donne que la structure du document).

Il suffit de comparer ce code HTML
<p> <span>12 <span> rue de lagny </p>

avec cette syntaxe

<adresse>
   <numero>12 </numero>
   <rue> rue de lagny </rue>
</adresse>

Encore une fois, Angular cherche a se rapprocher de XML. Il est possible d'écrire des expressions.


Exemple

Expression

app.directive("coursTabNiveau", function() {
    return {
      restrict: 'E',
      templateUrl: "description.html"
    };
  });

html

  <cours-tab-niveau></cours-tab-niveau>

noté le passage de la notion html à JS (camelCase)

description.html

<table class="table table-striped">
  <thead><tr>
    <th>Edit</th>
    <th>Cours</th>
    <th>Niveau</th>
  </tr></thead>
  <tbody>
   <tr ng-repeat="c in c2016.cours | orderBy:'niveau' ">
   <td>
      <button class="btn" ng-click="" ng-disabled="true">
      <span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;Edit
      </button>
    </td>
    <td> {{c.nom}}</td>
    <td> {{c.niveau}}</td>
 </tr>

</tbody>
</table>



test

Angular

JS Bin

informations

{{c.desp}}

les tabs : angular2

Les étapes pour arriver à un code "propre"

ng-click="action"

JS Bin on jsbin.com

ng-show="cond"

  JS Bin on jsbin.com

ng-controller

  JS Bin on jsbin.com

ng-init

  JS Bin on jsbin.com

class active 

JS Bin on jsbin.com

Améliorations

Logique dans un nouveau contrôleur

JS Bin on jsbin.com

ng-repeat ! 

JS Bin on jsbin.com