Expressions angularjs
AngularJS utilise des expressions pour lier les données à HTML.
L'expression d'angularjs est écrite en doublées: {{expression}} .
Les expressions AngularJS lient les données à HTML, ce qui est similaire à la directive NG-Bind .
AngularJS "sortira" les données à l'emplacement où l'expression est écrite.
Les expressions AngularJS ressemblent beaucoup aux expressions JavaScript : elles peuvent contenir des littéraux, des opérateurs et des variables.
Instance {{5 + 5}} ou {{FirstName + "" + LastName}}
Exemple de code:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </dcript> </-head> <body> <div ng-app> <p> ma première expression: {{5 + 5 + 5 }} </p> </ div> </ody> </html>Résultats en cours:
Ma première expression: 10
Nombres angularjs
Les numéros angularjs sont comme des numéros JavaScript:
Exemple de code:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </-head> <body> <div ng-app = "" " ng-Init = "Quantity = 1; Cost = 5"> <p> Prix total: {{Quantité * Cost}} </p> </div> </ body> </html>Résultats en cours:
Prix total: 5
Le même exemple en utilisant ng-bider:
Exemple de code:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </-head> <body> <div ng-app = "" " ng-Init = "Quantity = 1; Cost = 5"> <p> Prix total: <span ng-bind = "Quantity * Cost"> </span> </p> </div> </ body> </html>
Résultats en cours:
Prix total: 5
Remarque: l'utilisation de NG-INT n'est pas très courante. Vous apprendrez une meilleure façon d'initialiser les données dans le chapitre du contrôleur.
Chaîne angularjs
Les cordes angularjs sont comme des cordes javascript:
Exemple de code:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </-head> <body> <div ng-app = "" " ng-Init = "FirstName = 'John'; LastName = 'Doe'"> <p> Name: {{FirstName + "" + LastName}} </p> </div> </ body> </html>Résultats en cours:
Nom: John Doe
Le même exemple en utilisant ng-bider:
Exemple de code:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </-head> <body> <div ng-app = "" " ng-Init = "FirstName = 'John'; LastName = 'Doe'"> <p> Name: <span ng-bind = "FirstName + '' + LastName"> </span> </p> </ div> </body> </html>
Résultats en cours:
Nom: John Doe
Objets angularjs
Les objets angularjs sont comme des objets JavaScript:
Exemple de code:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </-head> <body> <div ng-app = "" " ng-Init = "Person = {FirstName: 'John', LastName: 'Doe'}"> <p> Le nom de famille est {{Person.lastName}} </p> </div> </ body> </html>Résultats en cours:
Nommé Doe
Le même exemple en utilisant ng-bider:
Exemple de code:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </-head> <body> <div ng-app = "" " ng-Init = "Person = {FirstName: 'John', LastName: 'Doe'}"> <p> Le nom de famille est <span ng-bind = "Person.lastName"> </span> </p> </div> </ body> </html>Résultats en cours:
Nommé Doe
Angularjs Array
Les tableaux angularjs sont comme des tableaux javascript:
Exemple de code:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </-head> <body> <div ng-app = "" " ng-Init = "POINTS = [1,15,19,2,40]"> <p> La troisième valeur est {{Points [2]}} </p> </div> </ body> </html>Résultats en cours:
La troisième valeur est de 19
Le même exemple en utilisant ng-bider:
Exemple de code:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </-head> <body> <div ng-app = "" " ng-Init = "POINTS = [1,15,19,2,40]"> <p> La troisième valeur est <span ng-bind = "Points [2]"> </span> </p> </div> </ body> </html>
Résultats en cours:
La troisième valeur est de 19
Expressions angularjs et expressions javascript
Semblable aux expressions JavaScript, les expressions AngularJS peuvent contenir des lettres, des opérateurs et des variables.
Contrairement aux expressions JavaScript, les expressions AngularJS peuvent être écrites en HTML.
Contrairement aux expressions JavaScript, les expressions AngularJS ne prennent pas en charge les jugements conditionnels, les boucles et les exceptions.
Contrairement aux expressions JavaScript, les expressions AngularJS prennent en charge les filtres.
Ce qui précède est une compilation de matériaux d'expression angularjs. Nous continuerons de les ajouter plus tard. J'espère que cela peut aider à apprendre Angularjs camarade de classe.