AngularJS Introduction

AngularJS est unframework JavaScript. Il peut être ajouté à une page HTML via une balise <script>.

AngularJS, via desdirectives, étend HTML, et, via desexpressions, lie les données à HTML.

AngularJS est un framework JavaScript

AngularJS est un framework JavaScript. C'est une bibliothèque écrite en JavaScript.

AngularJS est distribué sous forme de fichier JavaScript, et peut être ajouté à une page web à l'aide d'une balise script :

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

Note Nous recommandons de placer le script en bas de l'élément <body>.
Cela améliore la vitesse de chargement des pages web, car le chargement du HTML n'est pas soumis au chargement des scripts.

Téléchargements pour diverses versions d'angular.js :https://github.com/angular/angular.js/releases

AngularJS étend HTML

AngularJS, au moyen deng-directives, étend HTML.

ng-appLes directives définissent une application AngularJS.

ng-modelLes directives lient les valeurs des éléments (telles que les valeurs des champs de saisie) à l'application.

ng-bindLes directives lient les données de l'application à la vue HTML.

Exemples AngularJS

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app=""> <p>Nom :<input type="text" ng-model="name"></p> <h1>Bonjour {{name}}</h1> <p ng-bind="name"></p> </div> </body> </html>

Essayez-le vous-même »

Explication de l'exemple :

Lorsque la page web a fini de charger, AngularJS démarre automatiquement.

ng-appLa directive indique à AngularJS que l'élément <div> est le "propriétaire" de l'applicationAngularJS.

ng-modelLa directive lie la valeur du champ de saisie à la variable d'applicationname。

ng-bindLa directive lie le nom de la variable d'application au innerHTML d'un paragraphe.

Note Si vous supprimez lang-appdirective, HTML affichera l'expression directement sans évaluer le résultat de l'expression.

Qu'est-ce qu'AngularJS ?

AngularJS facilite le développement d'applications modernes à page unique (SPAs : Single Page Applications).

  • AngularJS lie les données de l'application aux éléments HTML.
  • AngularJS peut cloner 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.

Directives AngularJS

Comme vous pouvez le voir, les directives AngularJS sontngdes attributs HTML avec un préfixe.

ng-initLa directive initialise les variables d'application AngularJS.

Exemple AngularJS

<div ng-app="" ng-init="firstName='John'"> <p>Le nom est<span ng-bind="firstName"></span></p> </div>

Essayez-le vous-même »

Note HTML5 permet des attributs étendus (personnalisés), en utilisantdata-comme début.
Les attributs AngularJS utilisentng-comme début, mais vous pouvez utiliserdata-ng-pour rendre la page web valide pour HTML5.

Avec du HTML5 valide :

Exemple AngularJS

<div data-ng-app="" data-ng-init="firstName='John'"> <p>Le nom est<span data-ng-bind="firstName"></span></p> </div>

Essayez-le vous-même »

Expressions AngularJS

Les expressions AngularJS s'écrivent entre doubles accolades :{{ expression }}。

Les expressions AngularJS lient les données au HTML, ce qui estng-bindsimilaire aux directives.

AngularJS va « afficher » les données là où l'expression est écrite.

Les expressions AngularJSsont très similaires auxexpressions JavaScript: elles peuvent contenir des littéraux, des opérateurs et des variables.

Exemple : {{ 5 + 5 }} ou {{ firstName + " " + lastName }}

Exemple AngularJS

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app=""> <p>Ma première expression : {{ 5 + 5 }}</p> </div> </body> </html>

Essayez-le vous-même »

Applications AngularJS

AngularJS ModuleDéfinit l'application AngularJS.

AngularJS ContrôleurEst utilisé pour contrôler l'application AngularJS.

ng-appLes directives définissent l'application,ng-controllerdéfinissent le contrôleur.

Exemple AngularJS

<div ng-app="myApp" ng-controller="myCtrl">Prénom :<input type="text" ng-model="firstName"><br>Nom :<input type="text" ng-model="lastName"><br> <br>Nom complet : {{firstName + " " + lastName}}</div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; }); </script>

Essayez-le vous-même »

Les modules AngularJS définissent les applications :

Modules AngularJS

var app = angular.module('myApp', []);

Les contrôleurs AngularJS contrôlent les applications :

Contrôleurs AngularJS

app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; });

Dans les prochains tutoriels, vous en apprendrez davantage sur les applications et les modules.

Utilisation d'AngularJS dans Cloud Studio

  • Étape 1 : Visitez Plateforme de développement Tencent Cloud, inscrivez-vous/connectez-vous à votre compte.

  • Étape 2 : Dans le menu de l'environnement d'exécution à droite, sélectionnez : "ubuntu"

  • Étape 3 : Dans le répertoire de code à gauche, créez un répertoire html et écrivez votre code HTML, par exemple index.html

  • Étape 4 : Collez le code suivant dans le fichier index.html pour inclure AngularJS :

    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

  • Étape 5 : Entrez la commande sudo vim /etc/nginx/site-enable/default dans le terminal. Modifiez la partie encadrée en rouge du fichier de configuration comme indiqué dans la figure ci-dessous, puis entrez la commande : sudo nginx restart pour redémarrer le service nginx (Après l'installation et le démarrage de nginx, il écoute sur le port 80 par défaut. Nous devons changer le répertoire de site de nginx et le port d'écoute selon nos besoins.)

  • Étape 6 : Cliquez sur l'onglet [Lien d'accès] à l'extrême droite, saisissez le numéro de port 8080 dans le panneau de lien d'accès (cohérent avec le numéro de port du fichier de configuration nginx précédent), cliquez sur Créer un lien, puis vous pouvez cliquer sur le lien généré pour accéder au code que nous venons d'écrire et voir l'effet AngularJS.

Maintenant, CODING organise un [Concours de sélection de mon plugin Cloud Studio préféré] basé sur les espaces de travail Cloud Studio. Visitez le site officiel de l'événement : https://studio.qcloud.coding.net/campaign/favorite-plugins/index pour en savoir plus sur les informations de l'événement.

Autres extensions