Comprendre la liaison des données bidirectionnelle dans AngularJS

Explication détaillée et application de la liaison des données bidirectionnelles AngularJS: générateur de cartes de visite dynamique

Points de base

• La liaison des données bidirectionnelles d'Angularjs permet de mettre à jour les vues et vice versa. Ceci est réalisé grâce à des directives intégrées AngularJS telles que ng-model et ng-bind.
• L'objet $scope dans AngularJS joue un rôle crucial dans la liaison bidirectionnelle des données, agissant comme un pont entre le contrôleur et la vue, le stockage des données et des fonctions du modèle.
• AngularJS combine le mécanisme de la liaison et de la période d'attribut pour implémenter la liaison de données bidirectionnelles pour surveiller et mettre à jour les vues lorsque les données changent.
• Bien que la liaison des données bidirectionnelles puisse simplifier le développement en synchronisant automatiquement les vues et les modèles, s'ils sont mal utilisés, il peut également avoir un impact négatif sur les performances en raison de l'ajout de moniteurs pour chaque liaison.

Ce tutoriel montrera comment fonctionne la liaison bidirectionnelle des données dans AngularJS en créant un générateur de cartes de visite dynamique. Ce générateur vous permet de créer votre propre carte de visite virtuelle que vous pouvez personnaliser avec votre nom, votre carrière, votre e-mail, votre logo d'entreprise et vos liens vers votre page d'accueil et vos sites Web de médias sociaux. Vous pouvez ajuster l'arrière-plan et la couleur du texte de la carte à l'aide d'une entrée de couleur HTML5 et afficher toutes les modifications apportées en temps réel. L'effet final est le suivant:

Démarrer

Nous utiliserons Bower pour gérer les dépendances du projet. Bower est un gestionnaire de packages Web qui peut être installé à l'aide de NPM (ce qui signifie que vous devez installer Node.js). Si vous avez besoin d'aide pour installer Node.js (ou NPM), consultez un article récent SitePoint sur ce sujet. Si vous avez besoin d'aide pour installer Bower, vous pouvez afficher les instructions sur sa page d'accueil. Les dépendances de ce projet seront le framework bootstrap (pour les styles et les composants de l'accordéon), la police géniale (pour les icônes) et jQuery (bootstrap en dépend) et AngularJS. En supposant que Bower soit installé et configuré, créez un nouveau répertoire, accédez à ce répertoire et initialisez le projet avec Bower:

mkdir ACG && cd ACG
bower init

Bower créera alors un fichier bower.json dans le répertoire racine du projet. Il vous posera également quelques questions telles que le nom du projet, le nom de l'auteur, la description, etc. Entrez "ACG" sous le nom (pour le générateur de cartes angulaires) et remplissez le reste au besoin (ou acceptez simplement la valeur par défaut). Le fichier JSON généré devrait ressembler à ceci:

{
  "name": "ACG",
  "version": "0.0.0",
  "authors": [
    "Tanay Pant <tanay1337>"
  ],
  "description": "Card Generator",
  "keywords": [
    "AngularJS"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

Ensuite, exécutez la commande suivante dans le terminal:

bower install bootstrap --save
bower install font-awesome --save
bower install angular --save

Ceci installera toutes les dépendances requises pour le projet dans un répertoire nommé bower_components et enregistre les dépendances dans le fichier bower.json. Il est préférable d'ajouter bower_components à .gitignore parce que vous ne voulez pas télécharger ce dossier dans votre référentiel GitHub, car tout contributeur peut l'installer en exécutant bower install à la racine de vos dépendances de projet.

Structure de l'application angularjs

Dans le dossier ACG, créez un fichier nommé index.html et un autre fichier nommé style.css. Ajoutez le code suivant à index.html:

mkdir ACG && cd ACG
bower init

Nous lancerons la page Web en ajoutant et ng-app="myApp" à la balise ng-controller="BusinessCardController". La directive ng-app est nécessaire pour indiquer à Angular toute la page comme une application AngularJS, tandis que la directive ng-controller attache la classe de contrôleur à notre vue. Nous utilisons ensuite la directive ng-bind dans le titre afin que le titre de la page reste synchronisé avec notre modèle, puis incluons les fichiers CSS pertinents (dans ) et les fichiers JS (avant la fin de la balise ). Ces fichiers (sauf style.css) sont tous situés dans le dossier bower_components. Enfin, nous définissons myApp (notre module principal, qui est chargé au démarrage de l'application), et un BusinessCardController où nous définirons l'état initial de l'objet $scope (la façon dont notre contrôleur et afficher les données de partage).

(Les étapes suivantes, en raison des limitations de l'espace, du code détaillé du composant accordéon et des codes de contrôleur suivants, des codes de style, etc. sont omis ici. Le code complet peut être trouvé sur Codepen ou Github.) Veuillez vous référer au lien d'origine pour le code complet.

Résumé

J'espère que ce générateur de cartes de visite pourra vous aider à apprendre les concepts de base de la liaison des données dans AngularJS. Vous pouvez trouver la démo de code complet sur Codepen, ou vous pouvez cloner le code de cet article de GitHub. Je vous encourage à débourser le référentiel, à essayer le code et à voir les choses sympas que vous pouvez trouver.

(La partie FAQ fournie dans le texte d'origine a également été omise, mais le contenu de base a été résumé dans les points clés.)

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!