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 :]
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='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><
ng-repeat=
"x dans les noms"
>
/option
><> ;
[ ng-disabled
ng-hide 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 1. La directive ng-click définit l'événement de clic AngularJS 7 Définition et utilisation des directives personnalisées .directive app.directive("runoobDirective ", function() {var app = angulaire.module("myApp", []); return { restrit : "A", [restreindre cette commande à être utilisée uniquement comme attribut] >
[
[
<.> [
</p>
modèle : "
Commande personnalisée !
"
};
<
} >>
/runoob-directive>
<Appel d'attribut :