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 id="价格计算器">价格计算器</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 estspan 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 >.

                               "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 du nom de la classe :

      Appel de commentaire :

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!