Batch Index du Forum
S’enregistrerRechercherFAQMembresGroupesConnexion
Répondre au sujet Page 1 sur 1
AngularJS
Auteur Message
Répondre en citant
Message AngularJS 
Pourquoi Angular :

- Facile à apprendre
- Structure des données
- dynamisme

......

infrastructure MVVM ou Modèle-Vue-VueModèle conçue pour construire des Web Apps.

Le principe du MVVM est simple : les données que le client saisies engendrent une mise à jour du contrôleur qui met à jour par ricochet la vue. Et pas besoin de template temporaire de pré génération. AngularJS utilise directement la vue HTML d'origine pour répercuter ces mises à jour. Avec ce dispositif, "l'objectif est d'offrir une solution pour développer plus vite".

......


qqes exemples seront plus parlant :

Le dynamismes :

Avec angular les données sont traitées dynamiquement d'où unes structure simple et un gestion simple des donnée.
Ce que l'on appelle le DATA BINDING les données sont liés comme dans une variable. Lorsque la valeur de la donnée change
le changement est repercuté dynamiquement sur l'ensemble du html.

Code:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="" ng-init="forum='Batch.Xoo.It'">

<p>Changer la valeur :</p>
<p>Forum => <input type="text" ng-model="forum"></p>
<p>Vous avez écris => {{ forum }}</p>

</div>

</body>
</html>


Vous verrez en testant que les string change dynamiquement lorsque vous changez l'input.

Pareil pour des expressions mathématiiques :

Code:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div data-ng-app="" data-ng-init="quantite=1;prix=2">

<h2>Calculateur de coût</h2>

Quantité => <input type="number" ng-model="quantite">
Prix: <input type="number" ng-model="prix">

<p><b>Total en Euro => </b> {{quantite * prix}}</p>

</div>

</body>
</html>



Les repetitions (LOOP)

Avec Angular vous pouvez facilement afficher des données complexes et les associées
en utilisant un système d'array sur les objets, dans votre HTML.

repetition simple (une liste de nom dans un array) :

Code:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <p>Boucle avec  ng-repeat:</p>
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

</body>
</html>


Facile non ?

La même chose avec des Arrays plus complexes en utilisant les objets sur les arrays :

Code:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<p>Boucle avec les objects:</p>
<ul>
  <li ng-repeat="x in names">
  {{ x.name + ', ' + x.country }}</li>
</ul>

</div>

</body>
</html>


Okay


Fin première partie


A suivre ....




______________________________________________________
AffPng.exe , StringBetween.exe , Hex2Png.exe
Message Publicité 
PublicitéSupprimer les publicités ?


Répondre en citant
Message AngularJS 
Wow c'est presque du PHP dans du HTML ça Shocked
Bravo !




______________________________________________________
Cordialement,
Hugo, qui adore programmer, jouer à Minecraft, ZT2 et FSX.
Boutons-liens :
Visiter le site web du posteur Skype
Message AngularJS 


Montrer les messages depuis:
Répondre au sujet Page 1 sur 1
  



Index | créer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Copyright 2008 - 2016 // Batch