Angularjs

Points de base

• AngularJS, un framework JavaScript développé par Google, permet aux développeurs de créer du code frontal sans avoir à manipuler directement le modèle d'objet de document (DOM). Cela peut être réalisé en définissant des vues et des contrôleurs dynamiques à l'aide d'instructions et de liaison des données.
• AngularJS utilise la structure MVC (modèle-View-Controller). Le modèle est défini par des modules et des contrôleurs angulaires connectés au HTML via des instructions. Cela permet la liaison des données bidirectionnelle, où les modifications du modèle mettent automatiquement à jour la vue et vice versa.
• Dans AngularJS, les directives étendent le vocabulaire de HTML, offrant des modèles plus dynamiques et puissants. Les exemples incluent Ng-Repeat pour itérer l'ensemble, NG-Click pour le traitement des événements et NG-show pour le rendu conditionnel.
• Bien qu'AngularJS ait reçu des critiques pour les courbes d'apprentissage et l'utilisation d'attributs HTML non standard, il fournit une approche unique du développement Web qui encourage la création d'applications plus composables et testables. La séparation des problèmes de conception avec MVC réduit la quantité de code nécessaire pour connecter les composants.

AngularJs est rapidement devenu l'un des cadres JavaScript les plus populaires avec sa philosophie avancée. Avec le support et le développement de Google, l'approche d'AngularJS envers le front-end peut sembler un peu bizarre au début, mais vous vous demanderez bientôt pourquoi vous avez déjà utilisé d'autres approches. AngularJS permet aux développeurs d'écrire du code frontal sans avoir à manipuler directement le DOM. Ce tutoriel vous guidera tout au long du processus en créant une application qui définit des vues et des contrôleurs dynamiques à l'aide de directives et de liaison des données. Si vous connaissez Coffeescript (non requis par AngularJS), vous serez plus intéressé par cet article, mais la maîtrise des bases de JavaScript suffit. Vous avez peut-être déjà vu beaucoup d'applications à faire, alors construisons quelque chose d'intéressant - Tic Toe! Nous allons commencer par la carte de marquage. AngularJS prétend étendre le vocabulaire de HTML au lieu de cacher Dom derrière JavaScript. L'idée est que HTML lui-même est assez bon, mais nous pouvons ajouter des éléments et des attributs pour créer un langage de modèle dynamique puissant que vous connaissez déjà. Notre planche est juste une table simple. Si nous programmons avec bon désir, nous avons vraiment besoin d'itérer sur la carte et de sortir une cellule pour chaque cellule. Le code réel est très proche de notre idée:

<code class="language-html"><table>
  <tr ng-repeat="row in board.grid">
    <td ng-repeat="cell in row">
      {{ cell.marker }}
    </td>
  </tr>
</table></code>

attendez, quels sont ces étranges éléments et supports de barbe? Prenons un pas en arrière et prenons étape par étape.

<tr ng-repeat="row in board.grid">
<p> </p>
<h2> AngularJS Commande </h2> 
<p> <code>ng-repeat est une directive   d'AngularJS et est l'une des extensions HTML fournies. Il nous permet d'itérer la collection et d'instancier le modèle pour chaque projet. Dans cet exemple, nous disons à AngularJS de répéter chaque ligne dans la propriété board de l'objet grid. Supposons que <tr> soit un tableau bidimensionnel, et <code>grid est un objet sur la fenêtre. board
<code class="language-html"><table>
  <tr ng-repeat="row in board.grid">
    <td ng-repeat="cell in row">
      {{ cell.marker }}
    </td>
  </tr>
</table></code>
 Ensuite, nous atténuons les cellules de la ligne à l'aide d'une autre directive ng-repeat. Les doubles accolades indiquent ici qu'une  expression  en utilisant AngularJS  liaison des données  - Le contenu de <td> sera remplacé par l'attribut <code>marker de la cellule correspondante. 
 Jusqu'à présent, c'est très simple, non? Vous pouvez immédiatement comprendre à quoi ressemblera la balise générée. Nous n'avons pas besoin d'utiliser des outils lourds comme jQuery pour créer de nouveaux éléments et les remplir, nous avons juste besoin de clarifier nos modèles. Ceci est plus facile à entretenir - nous regardons simplement le HTML pour savoir exactement comment le DOM changera sans retrouver un vague code javascript dont nous ne nous souvenons pas réellement. 
 Maintenant, nous pouvons visualiser l'état de la carte, et nous lui fournirons une source de données en définissant le contenu réel de board. 
<code class="language-html"><tr ng-repeat="row in board.grid">
<p> Nous ajoutons d'abord du code JavaScript pour définir un module AngularJS pour notre application. Le premier paramètre est le nom de l'application, <code>['ng']</code> signifie que nous avons besoin du module "ng" d'AngularJS, qui fournit le service Core AngularJS. </p>
<p> Nous ajustons HTML pour utiliser la directive <code>ng-app</code> nous ordonne d'utiliser notre module d'application. </p>
<pre class="brush:php;toolbar:false"><code class="language-html"><td ng-repeat="cell in row">
  {{ cell.marker }}
</td></code>
 
 MVC - Définissez les contrôleurs et les vues 
 
 La fonction MVC d'AngularJS entre en jeu ici. Nous ajoutons du code JS pour appeler la fonction du contrôleur sur notre module d'application nouvellement créé, passant le nom du contrôleur et la fonction qui l'implémente. 
<code class="language-javascript">app = angular.module('ngOughts', ['ng'])</code>
 Dans ce cas, notre fonction de contrôleur accepte un paramètre $scope, qui est la  dépendance  de notre contrôleur. AngularJS utilise  injection de dépendance  pour nous fournir cet objet de service, en déduisant l'objet correct du nom du paramètre de fonction (il existe également une syntaxe alternative qui permet également une mini-minification). 
 Nous ajoutons maintenant une directive ng-controller au modèle HTML pour le connecter à notre contrôleur: 
<code class="language-html"><div ng-app="ngOughts">
<p> Idem, c'est aussi simple qu'une propriété avec un nom de contrôleur. Des choses intéressantes se produisent ici - les éléments imbriqués à l'intérieur de nos balises corporelles sont désormais accessibles à l'objet de service <code>$scope</code>. Notre propriété <code>ng-repeat</code> recherchera alors la variable <code>BoardCtrl</code> dans le cadre de <code>board</code>, alors définissons-le: </p>
<pre class="brush:php;toolbar:false"><code class="language-javascript">app.controller "BoardCtrl", ($scope) -></code>
 Nous faisons des progrès maintenant. Nous injectons Board dans notre contrôleur, l'instançons et la rendons disponible dans le cadre de BoardCtrl. 
 Allons de l'avant et implémentons une classe Board simple. 
<code class="language-html"><div ng-controller="BoardCtrl">
  <table>
    <tr ng-repeat="row in board.grid">
      ...
    </tr>
  </table>
</div></code>
 
 Ajouter l'usine 
 
 Nous pouvons alors définir une  Factory  qui ne renvoie que la classe Board, ce qui lui permet d'être injecté dans notre contrôleur. 
<code class="language-javascript">app.controller "BoardCtrl", ($scope, Board) ->
    $scope.board = new Board</code>
 peut être défini directement dans la fonction d'usine, et même mettre Board sur l'objet de fenêtre, mais le garder indépendant ici nous permet de tester Board indépendamment des AngularJS et d'encourager la réutilisabilité. Board
 Alors maintenant, nous avons un échec vide. Des trucs passionnants, non? Confions-le pour que cliquer sur une cellule y plongera une marque. 
<code class="language-html"><table>
  <tr ng-repeat="row in board.grid">
    <td ng-repeat="cell in row">
      {{ cell.marker }}
    </td>
  </tr>
</table></code>
 Nous avons ajouté une directive <td> à chaque élément <code>ng-click. Lorsque nous cliquons sur une cellule de table, nous appellerons la fonction board sur playCell à l'aide de l'objet de cellule cliquée. Remplissez Board Implémentation: 
<code class="language-html"><tr ng-repeat="row in board.grid">
<p> </p>
<h2> Bidirectional Data Binding </h2> 
<p> D'accord, alors maintenant que nous avons mis à jour le modèle de carte, nous devons mettre à jour la vue, non? </p>
<p> Non! La liaison des données angularjs est <em> bidirectionnelle </em> - il observe des changements dans les modèles et les propage à la vue. De même, la mise à jour de la vue mettra à jour le modèle correspondant. Nos balises seront mises à jour dans notre grille interne <code>Board</code>, et le contenu de <code><td> sera immédiatement modifié pour refléter cela. 
<p> Cela élimine beaucoup de code passerelle fragile et dépendant du sélecteur que vous avez dû écrire auparavant. Vous pouvez vous concentrer sur la logique et le comportement des applications plutôt que sur les pipelines. </p>
<p> Ce serait formidable si nous savions que quelqu'un gagnerait. Implémentons-le. Nous omettons le code qui vérifie les critères gagnants ici, mais il existe dans le code final. Supposons que lorsque nous trouverons le gagnant, nous définirons l'attribut gagnant sur chaque cellule qui composent le gagnant. </p>
<p> Ensuite, nous pouvons changer notre <code><td> en quelque chose comme ceci: 
<pre class="brush:php;toolbar:false"><code class="language-html"><td ng-repeat="cell in row">
  {{ cell.marker }}
</td></code>
<code class="language-javascript">app = angular.module('ngOughts', ['ng'])</code>
 Si winning est vrai, ng-class appliquera la classe CSS "gagnante" à <td>, définissons un fond vert agréable pour célébrer notre victoire. Vous avez dit que vous auriez un autre jeu? Nous avons besoin d'un bouton de carte de réinitialisation: 
<pre class="brush:php;toolbar:false">&lt;code class=&quot;language-html&quot;&gt;&lt;div ng-app=&quot;ngOughts&quot;&gt;
&lt;p&gt; Ajoutez-le à notre contrôleur et nous appellerons &lt;code&gt;reset&lt;/code&gt; lorsque le bouton est cliqué. Le marqueur de la carte sera effacé, toutes les classes CSS seront effacées et nous sommes prêts à recommencer - pas besoin pour nous de mettre à jour l'élément DOM. &lt;/p&gt;
&lt;p&gt; Laissez-nous vraiment montrer notre victoire: &lt;/p&gt;
&lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;app.controller &quot;BoardCtrl&quot;, ($scope) -&gt;&lt;/code&gt;</pre>
La commande <p> <code>ng-show nous permet d'afficher conditionnellement l'élément <h1></h1> lorsque le jeu gagne, et la liaison des données nous permet d'insérer la balise du gagnant. Simple et expressif. 
 
 ajouter pour être plus facile à combiner et plus facile à tester 
 
 Il convient de noter que la plupart de notre code traite du code JavaScript simple. Ceci est intentionnel - ne pas étendre les objets Framework, il suffit d'écrire et d'appeler le code JS. Cette approche aide à créer des applications plus faciles à combiner et plus faciles à tester, qui semblent légères. Nos problèmes de conception sont séparés par MVC, mais nous n'avons pas besoin d'écrire beaucoup de code pour les connecter ensemble. 
 Cependant, AngularJS n'est pas sans limites. Beaucoup se plaignent de la documentation officielle et de la courbe d'apprentissage relativement abrupte, certains s'inquiètent du référencement, et d'autres détestent simplement l'utilisation d'attributs et d'éléments HTML non standard. 
 Cependant, il existe des solutions à ces problèmes, et l'approche unique d'AngularJS au développement Web vaut vraiment le temps d'explorer. 
 Vous pouvez afficher l'effet réel du code final sur Plunkr ou le télécharger à partir de GitHub. 
  Les commentaires de cet article ont été fermés. Vous avez des questions sur AngularJS? Pourquoi ne pas poser de questions sur notre forum?  
 
 FAQ sur les directives angularjs et la liaison des données 
 
 
 Quelle est la différence entre les directives et les composants AngularJS? 
 
 
 Les directives et composants angularjs sont des caractéristiques puissantes du cadre AngularJS. Les directives vous permettent de créer des éléments et des propriétés HTML personnalisés réutilisables, tandis que les composants sont des directives spéciales qui utilisent des configurations plus simples. Les composants conviennent à la construction de structures d'applications basées sur des composants, qui sont plus modernes et largement utilisées dans le développement frontal aujourd'hui. Cependant, les instructions sont plus flexibles et peuvent fonctionner directement le DOM, ce que les composants ne peuvent pas faire. 
 
 
 Comment fonctionne la liaison des données dans AngularJS? 
 
 
 La liaison des données dans AngularJS est la synchronisation automatique des données entre les composants du modèle et de la vue. AngularJS implémente la liaison des données d'une manière qui vous permet de traiter votre modèle comme une seule source de faits dans votre application. La vue est toujours une projection du modèle. Lorsque le modèle change, la vue reflète le changement et vice versa. 
 
 
 Pouvez-vous expliquer la différence entre la liaison des données unidirectionnelle et la liaison des données bidirectionnelle? 
 
 
 La liaison des données unidirectionnelle est le simple flux de données d'un modèle à une vue ou d'une vue à un modèle. Cela signifie que si l'état du modèle change, la vue ne sera pas mise à jour. D'un autre côté, la liaison des données bidirectionnelles signifie que si l'état du modèle change, la vue sera mise à jour; Cela permet des effets en temps réel, ce qui signifie que les modifications (telles que l'entrée de l'utilisateur) seront immédiatement reflétées dans l'état du modèle. 
 
 
 Comment créer des directives personnalisées dans AngularJS? 
 
 
 Pour créer des directives personnalisées dans AngularJS, vous devez utiliser la fonction .directive. Vous pouvez nommer votre directive, puis créer une fonction d'usine qui enregistrera toutes les options de directive. La fonction d'usine est injectée à l'aide d'une dépendance (le cas échéant), puis il renvoie un objet qui définit les options de directive. 
 
 
 Quelle est la portée de l'isolement dans la directive AngularJS? 
 
 
 La portée de l'isolement dans la directive AngularJS vous permet de créer une nouvelle portée pour la directive. Cela signifie que tout changement dans la portée de la directive n'affectera pas la portée des parents et vice versa. Ceci est très utile lorsque vous souhaitez créer des composants réutilisables et modulaires. 
 
 
 Comment utiliser la transcription dans la directive AngularJS? 
 
La transcription 
 
 est une fonctionnalité d'AngularJS qui vous permet d'insérer du contenu personnalisé dans les instructions. En définissant l'option transclude sur true dans l'objet de définition directive, vous pouvez utiliser la directive ng-transclude pour insérer du contenu personnalisé dans le modèle de directive. 
 
 
 Quelle est la fonction de liaison dans la directive AngularJS? 
 
 
 La fonction de liaison est utilisée pour les directives AngularJS pour manipuler le DOM ou ajouter un écouteur d'événements. Il est exécuté après le clonage du modèle. Cette fonction est généralement utilisée pour effectuer des tâches telles que la définition des gestionnaires d'événements DOM, la surveillance des modifications des propriétés du modèle et la mise à jour de DOM. 
 
 
 Comment utiliser les fonctions du contrôleur dans les directives AngularJS? 
 
 
 La fonction du contrôleur est un constructeur JavaScript utilisé pour améliorer la portée angularjs. Lorsque le contrôleur est attaché au DOM via la directive ng-controller, AngularJS instancie un nouvel objet de contrôleur en utilisant le constructeur du contrôleur spécifié. Une nouvelle sous -cope sera créée et fournie au contrôleur en tant que paramètre injectable en tant que constructeur $scope. 
 
 
 Quelle est la différence entre "@", "=" et "&" dans les options de portée de directive? 
 
 
 Ces symboles sont utilisés pour lier des données à la portée de l'instruction. "@" est utilisé pour la liaison des chaînes, "=" est utilisé pour la liaison du modèle bidirectionnel, et "&" est utilisé pour la liaison de la méthode. Ils vous permettent d'isoler les lunettes, ce qui rend vos instructions plus modulaires et réutilisables. 
 
 
 Comment tester ma directive AngularJS? 
 
 
 AngularJS fournit un module appelé ngMock qui vous permet d'injecter et de simuler les services AngularJS dans les tests unitaires. Vous pouvez l'utiliser pour tester vos instructions. Vous pouvez également utiliser d'autres frameworks de test comme le jasmin ou le moka avec ngMock pour écrire et exécuter des tests.