Maison interface Web js tutoriel Discussion sur les idées de programmation du cadre de classe MVW pour une connaissance introductive d'AngularJS_AngularJS

Discussion sur les idées de programmation du cadre de classe MVW pour une connaissance introductive d'AngularJS_AngularJS

May 16, 2016 pm 04:28 PM
angularjs 编程思想

En implémentant deux exigences métier simples, cet article explore les différences entre AngularJS et l'implémentation DOM de contrôle JavaScript traditionnel, et tente de comprendre les idées de programmation de frameworks tels que MVW dans le développement frontal Web populaire.

Cette exigence est très courante. Par exemple, dans un menu à deux niveaux, lorsque l'on clique sur l'élément de menu de premier niveau, l'élément de sous-menu correspondant doit être affiché ou masqué.

Implémentation de jQuery :

Copier le code Le code est le suivant :




  • Article 1
             

                                                                                                                                                                                      
    • Article enfant 1

    •                                                                                

    //javascript

    $('li.parent_item').click(function(){
    $(this).children('ul.child').toggle();
    })

Implémentation d'AngularJS :

Copier le code Le code est le suivant :



  • Article 1
             

                                                                                                                                                                                                                     




    La manière traditionnelle de faire fonctionner le DOM ne sera pas décrite à nouveau. L’implémentation d’AngularJS est bien plus raffinée que le code, et seule la version HTML suffit. Le code ci-dessus utilise ces points de connaissance d'AngularJS :
1.

Directives

2.Expressions

ng-click

et

ng-hide sont deux directives fournies avec le framework. La première équivaut à fournir un gestionnaire d'événements à la balise li dans l'élément HTML (. li) Lorsque vous cliquez dessus, l'expression (expression) hide_child = !hide_child sera exécutée. Jetons d'abord un coup d'œil à la directive ng-hide, qui contrôle si l'élément HTML doit être affiché en fonction du résultat de l'expression assignée (valeur booléenne) (implémentée via CSS). Autrement dit, si la variable hide_child est vraie, alors ul sera masqué, sinon le résultat sera l'inverse. Hide_child est en fait une variable sur $scope

. La modification de sa valeur peut également être réalisée en encapsulant une méthode dans le contrôleur. Cependant, l'instruction actuelle est relativement simple et peut être écrite directement dans In. l'attribution de l'instruction.

Grâce à la simple analyse de code ci-dessus, nous pouvons voir deux caractéristiques évidentes d'AngularJS :

1. Le fonctionnement du DOM est scellé par des instructions et des expressions, et seul un code simple peut enregistrer du code JavaScript supplémentaire

2. L'application des instructions et des expressions n'est directement imbriquée que dans HTML, ce qui est quelque peu contraire au style de code JavaScript discret promu par jQuery

Examinons d'abord une autre exigence, puis expliquons la conclusion ci-dessus en détail.

Exigence 2 : En cliquant sur le div, déclencher la sélection d'un bouton radio dans le formulaire

L'élément HTML Form traditionnel n'est pas très convivial à utiliser sur les appareils mobiles d'aujourd'hui. Par exemple, le bouton radio Bouton radio nécessite un positionnement précis sur un écran tactile pour contrôler ce composant, mais le positionnement des doigts est très approximatif. Une approche courante consiste à ajouter un contrôle Label correspondant, mais le rapport d'écran du texte lui-même n'est pas idéal et il n'a pas un effet clair de transmission des informations. Par conséquent, une balise div ou li avec une surface relativement grande est généralement exploitée indirectement.

Implémentation de jQuery :


Copier le code Le code est le suivant :



       

  •                     id="option1" />
           
       

//javascript
$('li.selection').click(function(){
    $(this).children('input[type="radio"]').click();
})

AngularJS的实现:

复制代码 代码如下 :



       
  •         ng-click="model.option = option.value"
            ng-class="{active : model.option == option.value}" >
                        ng-model="modèle.option"
                value="{{option.value}}"
                id="option1" />
           
       


Dans cette solution, nous n'avons pas non plus impliqué de code JavaScript supplémentaire et avons utilisé quelques instructions supplémentaires. À titre de comparaison et de référence, nous ne nous soucions que des expressions des deux directives ng-click et ng-model.

Regardons d'abord la directive ng-model de l'élément input. L'affectation ici signifie que nous associons l'entrée sur le modèle à l'attribut option de l'objet $scope.model pour obtenir un in. -Compréhension approfondie des données. Pour la liaison, veuillez vous référer à Data Binding. Cette association spécifiée permet au contrôle de modèle d'être directement lié au modèle de données, et cette liaison est bidirectionnelle. Cela signifie qu'une fois que l'utilisateur modifie la valeur dans le contrôle (vérifiez l'entrée radio), l'objet Modèle correspondant sera réaffecté (model.option) en même temps, si la valeur de l'objet Modèle change, le contrôle d'entrée dans le le modèle correspondra également à refléter les modifications. Ceci n'est en fait pas réalisé dans l'implémentation jQuery ci-dessus.

Ainsi, grâce à la liaison de données d'AngularJS, le processus de déclenchement indirect de l'entrée en cliquant sur l'élément li est le suivant :

1. Cliquez sur la balise li et attribuez une valeur à model.option
2. Modifiez l'objet Model et localisez le contrôle d'entrée correspondant (la valeur de value est celle de model.option
) ; 3. Activez l'attribut coché du contrôle de saisie

A travers les deux cas ci-dessus, nous avons une nouvelle compréhension du fonctionnement du front-end Web.

Tout d'abord, en termes de mise en œuvre technique, en introduisant de nouvelles instructions, expressions, liaisons de données et autres concepts, nous pouvons faire fonctionner le DOM d'une manière complètement nouvelle, pas seulement le code JavaScript qui se limite à l'interaction entre les utilisateurs. et les composants HTML accomplissent. Ce changement de mentalité est énorme.

Depuis l'essor de la programmation Web dynamique au début de ce siècle, la technologie de programmation côté serveur s'est améliorée. Depuis le début de CGI/PHP/ASP, le langage et la plate-forme ont donné naissance à .NET contre Java, l'efficacité du développement et le processus logiciel ont favorisé le framework MVC/ORM/AOP, etc., et les performances et le Big Data ont apporté NodeJS/NoSQL/ Hadoop, etc., et les exigences techniques pour le front-end du navigateur ne semblent pas avoir été aussi radicales. D'une part, la plupart des besoins métiers du modèle B/S peuvent être satisfaits via le serveur et la base de données ; d'autre part, le navigateur lui-même présente des différences entre les différentes plates-formes et n'est pas compatible avec les normes de langage de script et de rendu ; technologie et présente des limites en termes de puissance de calcul et de considérations de sécurité.

Dans ce cas, les exigences du côté du navigateur ne nécessitent la plupart du temps que de prendre en compte le rendu de la page et la simple interaction de l'utilisateur. HTML/DOM plus JavaScript/CSS réalisent ainsi le travail principal du front-end. Par conséquent, il n’y avait pas de travailleurs front-end dans le passé, seuls des concepteurs Web étaient nécessaires. Peu à peu, les exigences pour le front-end se multiplient, et jQuery est devenu la bibliothèque d'encapsulation JavaScript la plus utilisée pour faire fonctionner le DOM. À ce stade, la tâche principale de jQuery/JavaScript est encore simplement un outil de présentation et d’interaction sur le terminal du navigateur utilisateur.

Comprenant l'origine de jQuery, il n'est pas difficile de constater que certaines des règles que nous avons suivies auparavant, comme le JavaScript discret, étaient limitées aux moyens et aux méthodes d'implémentation afin de séparer la logique du code DOM et JavaScript, nous avons donné la priorité aux plus maintenables. Après l'augmentation de la demande frontale pour JavaScript, de nombreux frameworks frontaux MVC/MVP sont apparus, ainsi que ce que l'on appelle MVW (Model-View-Whatever) d'AngularJS, et la taille unique- toute l'approche de JavaScript et du DOM a changé. À l'origine, nous envisageions le fonctionnement direct de l'affichage de l'interface et de l'interaction utilisateur. Nous disposons désormais de la liaison de données côté client, d'instructions riches et de l'injection de dépendances. Ce qui nous attend sera un nouveau modèle de programmation et une nouvelle façon de penser.

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Les 5 derniers tutoriels Angularjs en 2022, de l'entrée à la maîtrise Les 5 derniers tutoriels Angularjs en 2022, de l'entrée à la maîtrise Jun 15, 2017 pm 05:50 PM

Javascript est un langage tout à fait unique. Il est unique en termes d'organisation du code, de paradigme de programmation du code et de théorie orientée objet. La question de savoir si Javascript est un langage orienté objet a été débattue depuis un certain temps. Il y a évidemment une réponse depuis longtemps. Cependant, même si Javascript est dominant depuis vingt ans, si vous souhaitez comprendre les frameworks populaires tels que jQuery, Angularjs et même React, il suffit de regarder le « Black Horse Cloud Classroom JavaScript Advanced Framework ». Tutoriel vidéo de conception".

Utilisez PHP et AngularJS pour créer un site Web réactif afin d'offrir une expérience utilisateur de haute qualité Utilisez PHP et AngularJS pour créer un site Web réactif afin d'offrir une expérience utilisateur de haute qualité Jun 27, 2023 pm 07:37 PM

À l’ère de l’information d’aujourd’hui, les sites Web sont devenus un outil important permettant aux individus d’obtenir des informations et de communiquer. Un site Web réactif peut s’adapter à divers appareils et offrir aux utilisateurs une expérience de haute qualité, ce qui est devenu un point chaud dans le développement de sites Web modernes. Cet article expliquera comment utiliser PHP et AngularJS pour créer un site Web réactif afin d'offrir une expérience utilisateur de haute qualité. Introduction à PHP PHP est un langage de programmation open source côté serveur idéal pour le développement Web. PHP présente de nombreux avantages, tels que la facilité d'apprentissage, la multiplateforme, la riche bibliothèque d'outils et l'efficacité du développement.

Créer des applications Web en utilisant PHP et AngularJS Créer des applications Web en utilisant PHP et AngularJS May 27, 2023 pm 08:10 PM

Avec le développement continu d'Internet, les applications Web sont devenues un élément important de la construction de l'information d'entreprise et un moyen nécessaire au travail de modernisation. Afin de faciliter le développement, la maintenance et l'extension des applications Web, les développeurs doivent choisir un cadre technique et un langage de programmation adaptés à leurs besoins de développement. PHP et AngularJS sont deux technologies de développement Web très populaires. Ce sont respectivement des solutions côté serveur et côté client. Leur utilisation combinée peut considérablement améliorer l'efficacité du développement et l'expérience utilisateur des applications Web. Avantages de PHPPHP

Utilisez PHP et AngularJS pour développer une plateforme de gestion de fichiers en ligne afin de faciliter la gestion des fichiers Utilisez PHP et AngularJS pour développer une plateforme de gestion de fichiers en ligne afin de faciliter la gestion des fichiers Jun 27, 2023 pm 01:34 PM

Avec la popularité d’Internet, de plus en plus de personnes utilisent le réseau pour transférer et partager des fichiers. Cependant, pour diverses raisons, l'utilisation de méthodes traditionnelles telles que FTP pour la gestion de fichiers ne peut pas répondre aux besoins des utilisateurs modernes. Par conséquent, la création d’une plateforme de gestion de fichiers en ligne facile à utiliser, efficace et sécurisée est devenue une tendance. La plate-forme de gestion de fichiers en ligne présentée dans cet article est basée sur PHP et AngularJS. Elle peut facilement effectuer des opérations de téléchargement, de modification, de suppression et autres, et fournit une série de fonctions puissantes, telles que le partage de fichiers, la recherche,

Comment utiliser AngularJS en programmation PHP ? Comment utiliser AngularJS en programmation PHP ? Jun 12, 2023 am 09:40 AM

Avec la popularité des applications Web, le framework front-end AngularJS est devenu de plus en plus populaire. AngularJS est un framework JavaScript développé par Google qui vous aide à créer des applications Web dotées de fonctionnalités d'application Web dynamiques. En revanche, pour la programmation backend, PHP est un langage de programmation très populaire. Si vous utilisez PHP pour la programmation côté serveur, utiliser PHP avec AngularJS apportera des effets plus dynamiques à votre site Web.

Créez une application Web d'une seule page à l'aide de Flask et AngularJS Créez une application Web d'une seule page à l'aide de Flask et AngularJS Jun 17, 2023 am 08:49 AM

Avec le développement rapide de la technologie Web, l'application Web à page unique (SinglePage Application, SPA) est devenue un modèle d'application Web de plus en plus populaire. Par rapport aux applications Web multipages traditionnelles, le plus grand avantage de SPA est que l'expérience utilisateur est plus fluide et que la pression de calcul sur le serveur est également considérablement réduite. Dans cet article, nous expliquerons comment créer un SPA simple à l'aide de Flask et AngularJS. Flask est un Py léger

Introduction aux bases d'AngularJS Introduction aux bases d'AngularJS Apr 21, 2018 am 10:37 AM

Le contenu de cet article concerne l'introduction de base à AngularJS. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer.

Comment utiliser PHP et AngularJS pour le développement front-end Comment utiliser PHP et AngularJS pour le développement front-end May 11, 2023 pm 05:18 PM

Avec la popularité et le développement d’Internet, le développement front-end est devenu de plus en plus important. En tant que développeurs front-end, nous devons comprendre et maîtriser divers outils et technologies de développement. Parmi eux, PHP et AngularJS sont deux outils très utiles et populaires. Dans cet article, nous verrons comment utiliser les deux outils pour le développement front-end. 1. Introduction à PHP PHP est un langage de script open source populaire côté serveur. Il convient au développement Web et peut fonctionner sur des serveurs Web et divers systèmes d'exploitation. Les avantages de PHP sont la simplicité, la rapidité et la commodité

See all articles