Comment utiliser le framework front-end AngularJS ? Introduction à l'utilisation du framework front-end angulairejs

Cet article présente principalement l'apprentissage du framework front-end de angularjs Tout ce que vous devez savoir se trouve dans cet article. Lisons cet article ensemble maintenant

1. L'introduction principale à AngularJS :

AngularJS lie les données d'application aux éléments HTML

AngularJS peut être cloné et répéter des éléments HTML

AngularJS peut masquer et afficher des éléments HTML

AngularJS peut ajouter du code "derrière" les éléments HTML

AngularJS prend en charge la validation des entrées

2, fonctionnalités de la directive AngularJS :

ng-directives extend HTML

La directive ng-model lie les valeurs des éléments (telles que les valeurs des champs de saisie) à l'application, c'est-à-dire pour les transmettre à l'arrière-plan [ Par exemple :]

Les instructions Ng-Bind lient les données de l'application à la vue HTML, c'est-à-dire que les données d'arrière-plan sont liées à la réception

Page d'initialisation Ng-initial

AngularJS Module définit une application AngularJS.

AngularJS Controller est utilisé pour contrôler les applications AngularJS.

3. Expression AngularJS :

L'expression AngularJS est écrite entre doubles accolades : {{ expression }}.

Les expressions AngularJS lient les données au HTML, ce qui est similaire à la directive ng-bind.

AngularJS "affichera" les données où l'expression est écrite.

4. La différence entre les expressions AngularJS et les expressions JavaScript

Semblables aux expressions JavaScript, les expressions AngularJS peuvent contenir des lettres, des opérateurs, des variables

et des expressions JavaScript Différentes, les expressions AngularJS peuvent être écrit en HTML

Contrairement aux expressions JavaScript, l'expression AngularJS ne prend pas en charge le jugement conditionnel, la circulation et les

anormales et les expressions JavaScript, les expressions AngularJS prennent en charge le dispositif de filtrage de filtrage.

5. AngularJS définit un module :

var app = angulaire.module('monApp', [] );

6. Apprentissage des instructions AngularJS :

• [ng- init : Initialisation des données]

1. Initialiser une seule variable

<p ng-app=" " ng-init="firstName='John';lastName='Doe' "><p>Nom : < ;span ng-bind="prénom + ' ' + nom">span> p>p>[Résultat de l'exécution : Nom : Biche】

2. Initialiser l'objet Json

                                                                     ="" ng-init=" person={firstName:'John',lastName:'Doe'}"> < p>Le nom de famille est {{ person.lastName }}p> ;p>[Résultat de l'exécution : Le nom de famille est Doe]3. Initialisez l'objet tableau (L'indice du tableau commence à 0)

<p

ng-app="" ng-init="points=[1,15,19,2,40 ]"> <p>La troisième valeur est {{ points[2] }} p>p>[Résultat de l'exécution :La troisième valeur pour 19】 [ng-model

 : synchronisation des données]

• 1. AngularJS utilise ng-model pour la liaison des données et transmet les données en arrière-plan à en même temps. Tant qu'il y a deux données liées au premier plan, si un côté change, l'autre changera immédiatement
  

[ng-repeat : boucle de données]

  <p ng-app="" ng-init="quantity=1;price=5”> 
<h2>价格计算器</h2> 
数量： <input type="number"  ng-model="quantity”> 
价格： <input type="number" ng-model="price”>
<p><b>总价：</b> {{ quantity * price }}</p>
</p>

• 1. AngularJS utilise ng-repeat pour boucler les données. la boucle est la balise où se trouve l'instruction ng-repeat

                          <p ng-app="" ng-init="names=['Jani','Hege','Kai']”> 

                                    <p>使用 ng-repeat 来循环数组p> 

                                    <ul>

                                            <li ng-repeat="x in names"> {{ x }} li>

                                    ul> 

                          p>【执行结果：li整一个标记和里面的内容进行循环重复】

  • 【ng-app：应用程序】

  1、ng-app 指令定义一个 AngularJS 应用程序,ng-app 指令告诉 AngularJS，

  元素是 AngularJS应用程序的"所有者"。     

  2、ng-app 指令指明了应用,  ng-controller 指明了控制器，放在一个p的属性中，指明这一段p都在AngularJS的控制范围内

  3、ng-app 指令定义了 AngularJS 应用程序的 根元素

  4、ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序 

  •  <p ng-app="" ng-init="firstName=&#39;John’">
                         <p>姓名为 <span ng-bind=“firstName”></span></p>
             </p

  •  【ng-bind：数据绑定】  
    

           1、绑定单一变量（想看更多就到PHP中文网AngularJS开发手册中学习）

               <p ng-app=" " ng-init="firstName='John';lastName='Doe' "><p>Nom : < ;span ng-bind="prénom + ' ' + nom">span> p>p>[Résultat de l'exécution : Nom : Biche】

  2. Initialisez l'objet Json

  ="" ng-init=" person={firstName:'John',lastName:'Doe'}"><p>Le nom de famille est<span ng-bind="person.lastName">< ;/span>p> p>【 Résultat de l'exécution : Le nom de famille est Doe] 3 . Initialisez l'objet tableau (L'indice du tableau commence à 0)            

  <

  p

  ng-app

  =" " ng-initspan class=" hl-quotes">"points=[1,15,19,2, 40]"> <p>La troisième valeur est <span ng- lier="points[2]">p>p>【 Résultat de l'exécution : La troisième valeur est 19] [ng-show : Affichage des données]

  • 1. Lorsque la valeur du ng- show est vrai, la commande ng-show affichera le contenu de la balise où se trouve la commande ng-show >.

                               < name="myAddress" ng-model="text">                                                                                                                Pas une adresse e-mail valide</span

    >
                                                                                                          ;> & Gt; [Exécuter les résultats : Lorsque la valeur de la zone de saisie dans myAddress est une adresse de boîte aux lettres légitime, alors « une adresse de boîte aux lettres non légale » ne sera pas affichée, sinon elle ne sera pas affichée, sinon elle sera affichée ! 】                                                                                                                                                                                                                                                                               ; $dirty}} (vrai si la valeur change)】 [
    ng-options : sélection déroulante] 1. Créer du code
    🎜> sélectionnez><

    option

    ng-repeat=
    "x dans les noms"

    >
    

    {{x}}
    <

    /option

    >
    <
    • /select

      >

                                                                                                                                                                  ;
      

                                                                                                ​ ng-repeat a des limites, ng-repeat choisit une chaîne et ng-options sélectionne un objet
      [

      ng-disabled

       : Indique si l'attribut du bouton est disponible]
      • 1. true signifie que le bouton n'est pas disponible , false signifie que le bouton est disponible

      [

      ng-hide

       : Indique si la marque est masquée】

      • 1. true signifie que la marque où se trouve ng-hide est cachée, false La balise indiquant où se trouve ng-hide est affichée, ce qui est l'opposé de ng- show
        

      [

      ng-click

       : Événement de clic AngularJS]

      • 1. La directive ng-click définit l'événement de clic AngularJS 7 Définition et utilisation des directives personnalisées
        

      <.> [

      .directive

       : Ajouter des instructions personnalisées]

      
      

      1. Définition de l'instruction

      • app.directive("runoobDirective ", function() {var app = angulaire.module("myApp", []);
        

        return {

        restrit : "A", [restreindre cette commande à être utilisée uniquement comme attribut]

        modèle : "

        Commande personnalisée !

        "

        };

        } >>

        <

        /runoob-directive

        >

        Appel d'attribut :

        <

      • p
        runoob- directive

        >

      </p>
      Appel de commentaire :
      

      Outils d'IA chauds

      

      Undresser.AI Undress

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

      

      AI Clothes Remover

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

      

      Undress AI Tool

      Images de déshabillage gratuites

      

      Clothoff.io

      Dissolvant de vêtements AI

      

      Video Face Swap

      Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

      Afficher plus
      

      Article chaud

      Comment réparer KB5055523 ne parvient pas à s'installer dans Windows 11?

      3 Il y a quelques semaines By DDD

      Comment réparer KB5055518 ne parvient pas à s'installer dans Windows 10?

      3 Il y a quelques semaines By DDD

      <🎜>: Dead Rails - Comment apprivoiser les loups

      1 Il y a quelques mois By DDD

      Niveaux de force pour chaque ennemi et monstre de R.E.P.O.

      1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

      <🎜>: Grow A Garden - Guide de mutation complet

      2 Il y a quelques semaines By DDD

      Afficher plus
      

      Outils chauds

      

      Bloc-notes++7.3.1

      Éditeur de code facile à utiliser et gratuit

      

      SublimeText3 version chinoise

      Version chinoise, très simple à utiliser

      

      Envoyer Studio 13.0.1

      Puissant environnement de développement intégré PHP

      

      Dreamweaver CS6

      Outils de développement Web visuel

      

      SublimeText3 version Mac

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

      Afficher plus
      

      Sujets chauds

      Tutoriel Java

      1662

      14

      Tutoriel CakePHP

      1419

      52

      Tutoriel Laravel

      1312

      25

      Tutoriel PHP

      1262

      29

      Tutoriel C#

      1235

      24

      Afficher plus