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

fa97ac8f63d24b71c8d4ad332b7d8b91d3771b0717303fa4cff39e39630091b7Nom : < ;span ng-bind="prénom + ' ' + nom">a40bb0e8c769d46bcc97ea6ddd88211f395647a4d82615d0f30ae91bd6f9081c8c05e4ba700ecf3a3fba632670b48d2e[Résultat de l'exécution : Nom : Biche】

2. Initialiser l'objet Json

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

9397be56ed3202d913ea11a918dda581 0f5c598f91a383828e0a9135f6c743eeLa troisième valeur est {{ points[2] }}86488055c3bf5915b9acaaf4d504f4c477c0e188e8a6e0de9e8d776fa76a706b[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

                          5febe34c59450fb17b70c81c5ffd10f9 

                                    d3771b0717303fa4cff39e39630091b7使用 ng-repeat 来循环数组8c05e4ba700ecf3a3fba632670b48d2e 

                                    94cf9f71896cce458971adf2bc978fb1

                                            4fa76e168b8fe1de649ff42059b63884 {{ x }} 00264599778bfef15205fe2f698216e0

                                    6f304873f188339d0626400a7defcfa7 

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

  • 【ng-app：应用程序】

  1、ng-app 指令定义一个 AngularJS 应用程序,ng-app 指令告诉 AngularJS，e388a4556c0f65e1904146cc1a846bee 元素是 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开发手册中学习）

               fa97ac8f63d24b71c8d4ad332b7d8b91d3771b0717303fa4cff39e39630091b7Nom : < ;span ng-bind="prénom + ' ' + nom">a40bb0e8c769d46bcc97ea6ddd88211f395647a4d82615d0f30ae91bd6f9081c8c05e4ba700ecf3a3fba632670b48d2e[Résultat de l'exécution : Nom : Biche】

  2. Initialisez l'objet Json

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

  d72c680cf9439f8875a61f092e88710f"points=[1,15,19,2, 40]"> c917c000b9559681ed89da9f6e3325bcLa troisième valeur est 9f2633494bec8dad2876901d74b3531db81edf81cff8868446d99144a5a58bbf2de52fdac855d5bc9514ca9dee18399f【 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 >.

                               a76e00a5037ac36912e3c91a46c31b40                                                                                                                Pas une adresse e-mail validec336b15360a80b47586e336395fae4fe
                                                                                                          ;> & 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>e0bcdfbea23b17ffd5665a8042502d70
    

    {{x}}
    8adfb914f6f0f3953f3fcdfc2f5afb26
    e2e973eadf42fd258530c17524fb20cf

                                                                                                                                                                ;18bb6ffaf0152bbe49cd8a3620346341
    

                                                                                              ​ 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 : " 4a249f0d628e2318394fd9b75b4636b1Commande personnalisée !473f0a7621bec819994bb5020d29372a"

      };

      } >>

      179f18e189e73313b0348f5d38ecf73a

      Appel d'attribut :

      647e6c19227859ec3b7f2d6c553ac513
    Appel du nom de la classe : e5e24f3a12b894591db40d3aea42c3f194b3e26ee717c64999d7867364b1b4a3Appel de commentaire : 03c39658425f533effe05c614fd43c25 [Résultat de l'exécution : Commande personnalisée ! Notez que le résultat de l'exécution n'est pas un commentaire

    ] 3. Limiter la portée de l'utilisation des instructions (la valeur par défaut est comme EA) E : Utiliser comme nom d'élément A : Utiliser comme attribut C : Utiliser comme nom de classe

    M : Utiliser comme commentaire
    【Remarque】1. type="numéro" signifie que cette zone de saisie est au format numérique. Vous pouvez cliquer vers le haut et vers le bas pour augmenter ou diminuer les nombres, mais la saisie de caractères non numériques est autorisée

    Cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois Manuel d'utilisation d'AngularJS pour en savoir plus. Si vous avez des questions, vous pouvez laisser un message ci-dessous.

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!