AngularJS Hello World : Votre premier programme d’exemple

Par : James Hartmann James Hartmann
Hours Le kit de préparation mis à jour

⚡ Résumé intelligent

Les programmes AngularJS Hello World n'ont besoin que d'un seul fichier HTML, d'une référence de script et de deux directives, ng-app et ng-controller, pour lier une variable de portée de contrôleur à la page via une expression à double accolade.

  • (I.e. ng-app : L'attribut ng-app marque l'élément racine et initialise automatiquement le module AngularJS nommé.
  • ☑️ ng-controller : ng-controller attache HelloWorldCtrl à l'élément h1, rendant ainsi la portée du contrôleur disponible à cet endroit.
  • ✅ Liaison de portée : L'affectation de $scope.message dans le contrôleur alimente l'expression {{message}} rendue dans la vue.
  • 🧪 File unique : Un fichier HTML et une référence de script suffisent pour exécuter l'exemple, sans aucune étape de compilation nécessaire.
  • ️ Dépannage: L'affichage d'accolades à l'écran signifie presque toujours que la bibliothèque n'a jamais été chargée ou que ng-app est manquant.
  • (I.e. Note de version : La prise en charge d'AngularJS a pris fin en janvier 2022, la version 1.8.3 étant la dernière ; les nouveaux développements doivent désormais se faire avec Angular.
En savoir plus

AngularJS Hello World, premier exemple de programme utilisant ng-app et ng-controller

La meilleure façon de constater la puissance d'une application AngularJS est de créer votre premier programme de base, une application « Hello World », en AngularJS.

Il existe de nombreux environnements de développement intégrés que vous pouvez utiliser pour AngularJS En matière de développement, certains des plus populaires sont mentionnés ci-dessous. Dans notre exemple, nous utilisons Webstorm comme notre IDE.

  1. Webstorm
  2. Sublime Text
  3. AngularJS Eclipse
  4. Visual Studio

Bonjour tout le monde, AngularJS

Note de version : AngularJS 1.x n'est plus pris en charge à long terme depuis le 31 décembre 2021, et l'équipe du framework confirme que Le support d'AngularJS a officiellement pris fin. En janvier 2022, la version 1.8.3 a été publiée comme version finale, sans correctifs de sécurité ultérieurs. Chaque étape et chaque bloc de code ci-dessous sont conservés tels quels. Les nouveaux projets doivent être développés avec Angular moderne, où le même exercice commence par… ng serve et un composant autonome et utilise toujours le même {{ }} Syntaxe d'interpolation.

L'exemple ci-dessous montre le moyen le plus simple de créer votre première application « Hello world » dans AngularJS.

La capture d'écran annotée ci-dessous indique chaque partie de ce fichier, et ses sept numéros correspondent à Code Liste explicative ci-dessous. Ce script a été enregistré avec une version antérieure (1.4.0), sa ligne de script diffère donc de la version indiquée dans le code.

Fichier HTML « Hello World » d'AngularJS annoté avec sept annotations numérotées pour ng-app, ng-controller, la référence du script et la variable de portée

<!DOCTYPE html>  
<html ng-app="app">  
<head>  
    <meta charset="utf 8">
    <title>Guru99</title>     
</head>  
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>  
    angular.module("app", []).controller("HelloWorldCtrl", function($scope) {  
    $scope.message="Hello World" 
    } )
</script> 

</body>  
</html>

Code Explication:

  1. L'événement ng-appLe mot-clé « » indique que cette application doit être considérée comme une application AngularJS. Elle peut porter n'importe quel nom.
  2. Le contrôleur contient la logique métier. Dans la balise h1, nous souhaitons accéder au contrôleur, qui aura la logique d'afficher « Hello World », nous pouvons donc dire que dans cette balise, nous voulons accéder au contrôleur nommé « HelloWorldCtrl ».
  3. Nous utilisons une variable membre appelée « message » qui n'est rien d'autre qu'un espace réservé pour afficher le message « Hello World ».
  4. La balise « script » sert à référencer le script angular.js qui contient toutes les fonctionnalités nécessaires à AngularJS. Sans cette référence, les fonctions AngularJS ne fonctionneront pas.
  5. Le « contrôleur » est l'endroit où nous créons concrètement notre logique métier. Les spécificités de chaque mot-clé seront expliquées dans les chapitres suivants. Il est important de noter que nous définissons une méthode de contrôleur appelée « HelloWorldCtrl », qui sera référencée à l'étape 2.
  6. Nous créons une fonction qui sera appelée lorsque notre code fera appel à ce contrôleur. L'objet `$scope` est un objet spécial d'AngularJS ; il s'agit d'un objet global utilisé par AngularJS. L'objet `$scope` sert à gérer les données entre le contrôleur et la vue.
  7. Nous créons une variable membre appelée « message », nous lui attribuons la valeur « Hello World » et nous attachons la variable membre à l'objet scope.

REMARQUE: La directive ng-controller est un mot-clé défini dans AngularJS (Étape 2) et sert à définir les contrôleurs de votre application. Dans notre application, nous avons utilisé le mot-clé `ng-controller` pour définir un contrôleur nommé « HelloWorldCtrl ». La logique proprement dite de ce contrôleur sera créée à l'étape 5.

Si le code est exécuté avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.

Sortie :

Le message « Hello World » s'affichera.

Fenêtre du navigateur intitulée Guru99 affichage du titre « Hello World » à partir de la variable de portée AngularJS

Comment charger AngularJS : CDN ou fichier local

L'exemple ci-dessus fonctionne car une seule ligne charge le framework dans la page avant que le navigateur n'atteigne la fin du corps. AngularJS est fourni sous forme d'un seul fichier. JavaUn simple fichier script suffit ; ainsi, un premier programme ne nécessite ni compilation ni gestionnaire de paquets. Un fichier HTML ouvert dans un navigateur suffit.

Il existe deux façons d'importer ce fichier.

  1. Référencez une copie CDN. L'exemple pointe vers code.angularjs.org et la version 1.6.9 des broches. Cet hôte sert toujours des versions 1.x, la plus récente étant la 1.8.2, tandis que Google La liste des bibliothèques hébergées ne répertorie plus AngularJS.
  2. Téléchargez une copie locale. Enregistrez le fichier à côté de la page HTML et faites pointer la balise script vers celui-ci. Une copie locale permet à l'exemple de fonctionner hors ligne, ce qui est important lorsqu'un proxy bloque le CDN.
<!-- Option 1: reference a CDN copy -->
<script src="https://code.angularjs.org/1.8.2/angular.min.js"></script>

<!-- Option 2: reference a downloaded copy in the same folder -->
<script src="angular.min.js"></script>

Utilisez le angular.js tout en apprenant et angular.min.js En production : la version non minifiée affiche une pile lisible traces, alors que la version minifiée indique des variables renommées.

Une fois le fichier chargé, ng-app Le framework est initialisé. AngularJS recherche cet attribut une fois le document chargé, considère l'élément qui le contient comme la racine de compilation et initialise le module spécifié dans sa valeur. Trois conséquences en découlent :

  • Seul le premier ng-app La page est initialisée automatiquement. Une seconde page est ignorée, sauf si angular.bootstrap est appelé manuellement.
  • La valeur doit désigner un module enregistré auprès de module Angular, sinon la console signale [$injector:modulerr].
  • Système de ng-app sur le html L'élément, comme le fait l'exemple, place l'ensemble du document sous AngularJS ; un conteneur plus étroit fonctionne également.

ARTICLES LIÉS

Fonctionnement des expressions {{ }} et de la liaison ng-model

Les doubles armatures autour message Les balises h1 ne contiennent pas d'espace réservé rempli une seule fois au chargement. AngularJS compile ce nœud de texte en un observateur sur les éléments environnants. portée, donc la sortie rendue tracks $scope.message et ce, aussi longtemps que la page existera.

Le cycle se déroule en trois étapes.

  1. Le contrôleur écrit une valeur sur $scope.
  2. Une passe de synthèse compare chaque expression observée avec son résultat précédent.
  3. Chaque expression dont la valeur a changé est réaffichée sur place.

Une expression interpolée est donc unidirectionnelle, de la portée à la vue. Une liaison bidirectionnelle nécessite ng-modèle, le directive Conçu pour les contrôles de formulaire. Ajouter <input ng-model="message"> À côté de l'en-tête, saisissez du texte dans la zone de texte, et l'en-tête change à chaque frappe, car ng-model réécrit la valeur du champ sur la même propriété de portée que celle surveillée par l'expression.

Les expressions sont volontairement limitées. Elles peuvent lire les propriétés de portée, appeler les méthodes de portée et tolérer silencieusement les valeurs indéfinies, mais elles ne peuvent pas déclarer de variables, utiliser d'instructions de contrôle de flux ni accéder aux objets globaux tels que window.

Comment corriger une page blanche ou un rendu incorrect {{ }}

Un premier programme AngularJS échoue de deux manières visibles : soit la page reste blanche, soit le texte littéral {{message}} « Hello World » apparaît à la place de « Hello World ». Dans les deux cas, cela signifie que le framework n'a jamais pris le contrôle du balisage. Veuillez effectuer les vérifications ci-dessous dans l'ordre, en gardant la console du navigateur ouverte.

  1. Vérifiez que la bibliothèque est chargée. Ouvrez le panneau Réseau et recherchez le angular.js Une requête 404 ou un CDN inaccessible ne modifie pas l'affichage des accolades à l'écran.
  2. Vérifiez le chemin d'accès au script. Un chemin relatif est résolu par rapport au dossier contenant le fichier HTML, donc une copie dans un js le sous-dossier a besoin js/angular.min.js.
  3. Vérifier ng-app. Un attribut manquant ou mal orthographié n'a aucune incidence sur Bootstrap. L'attribut est séparé par un trait d'union : ng-app dans le balisage, même si la directive est en camelCase dans JavaScénario.
  4. Lisez l'erreur de la console. [$injector:modulerr] signifie que le module nommé par ng-app n'a jamais été enregistré. [ng:areq] signifie généralement que le nom du contrôleur dans le balisage ne correspond pas au nom transmis à .controller().
  5. Cherchez une deuxième application ng. Seul le premier élément est initialisé, donc une copie égarée laissée sur un élément interne désactive silencieusement cette partie de la page.

Deux autres causes expliquent la plupart des autres signalements.

  • Le protocole de fichier. Cet exemple à fichier unique fonctionne correctement lorsqu'il est ouvert directement depuis le disque, mais tout modèle récupéré via XHR est bloqué par les règles d'origine du navigateur. Servez le dossier via HTTP une fois les modèles disponibles.
  • Un bref aperçu des bretelles. Lorsque le balisage est rendu avant sa compilation par le framework, l'expression brute est visible un instant. Ajouter ng-cloak à l'élément, ou échanger l'expression pour ng-bind="message", qui n'affiche jamais son propre balisage.

Si aucune de ces solutions ne s'applique, réduisez la page à l'exemple ci-dessus et ajoutez votre propre code ligne par ligne.

FAQ

Chacune des quatre méthodes énumérées ci-dessus fonctionne, et cet exemple utilise WebstormComme le programme se limite à un seul fichier HTML statique, un simple éditeur de texte suffit. Un EDI n'ajoute que la complétion automatique des directives, le rechargement en direct et le débogage intégré.

$scope est l'objet de liaison partagé entre un contrôleur et son affichage. Écrire $scope.message à l'intérieur de HelloWorldCtrl rend cette propriété visible à l'expression placée sur l'élément h1.

Les deux fichiers contiennent le même framework. angular.js n'est pas minifié ; les erreurs pointent donc vers le code source lisible. angular.min.js est compressé pour la production et nécessite une annotation de dépendance explicite, car la minification renomme les noms des paramètres qu'AngularJS inspecte par ailleurs.

AngularJS est le framework 1.x présenté ici, piloté par des directives, $scope et du code simple. JavaScript. Angular, c'est-à-dire la version 2 et les suivantes, est un langage distinct. TypeScript framework construit sur des composants et faisant l'objet d'une maintenance active.

Principalement pour la maintenance des applications 1.x existantes, qui restent largement répandues. Le vocabulaire des liaisons, des directives et injection de dépendance Les transferts étaient possibles, mais le support a pris fin en janvier 2022 ; les nouveaux projets doivent donc utiliser la version moderne d'Angular.

Oui. Enregistrez chaque contrôleur avec `.controller()` sur le même module et associez-les à différents éléments à l'aide de `ng-controller`. Chaque contrôleur reçoit son propre contexte enfant, ce qui permet aux propriétés portant le même nom de rester indépendantes.

Les assistants modernes lisent un code source 1.x et produisent un inventaire des directives, filtres et services, avec des suggestions de composants et de services équivalents. Cet inventaire est utile pour la conception de systèmes.ping le travail, bien que chaque carteping Nécessite encore une vérification manuelle.

Copilote GitHub complète le code de base du contrôleur, les affectations de portée et ng-soumettre Les gestionnaires proviennent d'un court commentaire, mais leur formation est orientée vers Angular moderne, vérifiez donc que les suggestions utilisent bien la syntaxe 1.x.

Résumez cet article avec :