Points de base
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:
<table>
<tr ng-repeat="row in board.grid">
<td ng-repeat="cell in row">
{{ cell.marker }}
</td>
</tr>
</table>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">
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 grid est un objet sur la fenêtre. board
<table>
<tr ng-repeat="row in board.grid">
<td ng-repeat="cell in row">
{{ cell.marker }}
</td>
</tr>
</table> 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 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.
<tr ng-repeat="row in board.grid">
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, ['ng'] signifie que nous avons besoin du module "ng" d'AngularJS, qui fournit le service Core AngularJS.
Nous ajustons HTML pour utiliser la directive ng-app nous ordonne d'utiliser notre module d'application.
<td ng-repeat="cell in row">
{{ cell.marker }}
</td>
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.
app = angular.module('ngOughts', ['ng']) 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:
<div ng-app='ngOughts'>
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 $scope. Notre propriété ng-repeat recherchera alors la variable BoardCtrl dans le cadre de board, alors définissons-le:
app.controller "BoardCtrl", ($scope) ->
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.
<tr ng-repeat="row in board.grid"> ...
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.
app.controller "BoardCtrl", ($scope, Board) ->
$scope.board = new Board 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.
<table>
<tr ng-repeat="row in board.grid">
<td ng-repeat="cell in row">
{{ cell.marker }}
</td>
</tr>
</table> Nous avons ajouté une directive <td> à chaque élément 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:
<tr ng-repeat="row in board.grid">
D'accord, alors maintenant que nous avons mis à jour le modèle de carte, nous devons mettre à jour la vue, non?
Non! La liaison des données angularjs est bidirectionnelle - 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 Board, et le contenu de <td> sera immédiatement modifié pour refléter cela.
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.
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.
Ensuite, nous pouvons changer notre <td> en quelque chose comme ceci:
<td ng-repeat="cell in row">
{{ cell.marker }}
</td>app = angular.module('ngOughts', ['ng']) 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:
<div ng-app='ngOughts'>
Ajoutez-le à notre contrôleur et nous appellerons reset 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.
Laissez-nous vraiment montrer notre victoire:
app.controller "BoardCtrl", ($scope) ->
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.
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?
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
