Tutoriel de démarrage d'AngularJS (zéro) : Bootstrap

Nous sommes maintenant prêts à écrire l'application AngularJS - phonecat. Dans cette étape (étape 0), vous vous familiariserez avec les fichiers de code source importants, apprendrez à démarrer l'environnement de développement contenant le projet de départ AngularJS et à exécuter l'application dans le navigateur.

Entrez dans le répertoire angulaire-phonecat et exécutez la commande suivante :

Copier le code Le code est le suivant :

git checkout -f étape-0

Cette commande réinitialisera le répertoire de travail du projet phonecat. Il est recommandé d'exécuter cette commande à chaque étape d'apprentissage et de remplacer le numéro de la commande par le numéro correspondant à votre étape d'apprentissage. Cette commande effacera les modifications que vous avez apportées. effectué dans le répertoire de travail.

Exécutez la commande suivante :

Copier le code Le code est le suivant :

scripts de nœud/web-server.js

pour démarrer le serveur. Après le démarrage, le terminal de ligne de commande invitera le serveur HTTP exécuté à l'adresse http://localhost:8000. Veuillez ne pas fermer le terminal. La fermeture du terminal arrêtera le serveur. Entrez http://localhost:8000/app/index.html dans le navigateur pour accéder à notre application phonecat.

Maintenant, vous devriez avoir vu notre application initiale dans le navigateur, c'est très simple, mais cela montre que notre projet est prêt à être exécuté.

Le message "Rien ici pour l'instant !" affiché dans l'application est construit à partir du code HTML suivant. Le code contient les éléments clés d'AngularJS, ce que nous devons apprendre.

app/index.html

Copier le code Le code est le suivant :

Mon fichier HTML

Rien ici {{'encore' '!'}}

Que fait le code ?

Directive ng-app :

Copier le code Le code est le suivant :

La directive

ng-app marque la portée du script AngularJS. L'ajout de l'attribut ng-app à signifie que l'intégralité de la portée Les développeurs peuvent également utiliser la directive ng-app localement, comme

, et le script AngularJS ne s'exécutera que dans ce

Balise de script AngularJS :

Copier le code Le code est le suivant :

Cette ligne de code charge le script angulaire.js. Lorsque le navigateur aura terminé de charger la page HTML entière, il exécutera le script angulaire.js. Une fois le script angulaire.js exécuté, il recherchera la balise HTML contenant. la directive ng-app, cette balise définit la portée de l'application AngularJS.

Expression liée par des doubles accolades :

Copier le code Le code est le suivant :

Rien ici {{'encore' '!'}}

Cette ligne de code démontre la fonction principale des modèles AngularJS : la liaison. Cette liaison se compose de doubles accolades {{}} et de l'expression 'encore' '!'.

Cette liaison indique à AngularJS qu'il doit évaluer l'expression et insérer le résultat dans le DOM. Dans les prochaines étapes, nous verrons que le DOM peut être mis à jour en temps réel à mesure que le résultat de l'opération d'expression change.

Expression AngularJS L'expression angulaire est un extrait de code similaire à JavaScript. L'expression AngularJS s'exécute uniquement dans le cadre d'AngularJS au lieu de s'exécuter dans l'ensemble du DOM.

Application Bootstrap AngularJS

Le démarrage automatique des applications AngularJS via la directive ngApp est un moyen concis et adapté à la plupart des situations. Dans le développement avancé, comme l'utilisation de scripts pour charger des applications, vous pouvez également utiliser bootstrap pour amorcer manuellement les applications AngularJS.

Il y a trois points importants dans le processus de démarrage de l'application AngularJS :

1. L'injecteur sera utilisé pour créer une injection de dépendances pour cette application
2. L'injecteur créera la portée racine comme portée de notre modèle d'application
; 3. AngularJS établira un lien vers le DOM dans la portée racine, à partir de la balise HTML marquée par ngApp, et traitera progressivement les instructions et les liaisons dans le DOM.

Une fois l'application AngularJS démarrée, elle continuera à écouter les événements déclenchés par HTML du navigateur, tels que les événements de clic de souris, les événements clés, les réponses HTTP entrantes et d'autres événements qui modifient le modèle DOM. Une fois qu'un tel événement se produit, AngularJS détectera automatiquement le changement, le gérera et le mettra à jour en conséquence.

La structure de l'application ci-dessus est très simple. Le package de modèles ne contient qu'une seule directive et une seule liaison statique, et le modèle est également vide. Ensuite, nous essayons une application légèrement plus complexe !

À quoi servent ces fichiers dans mon répertoire de travail ?

L'application ci-dessus provient du projet de départ AngularJS, nous pouvons généralement utiliser le projet de départ AngularJS pour créer de nouveaux projets. Le projet de départ comprend la dernière base de code AngularJS, des bibliothèques de tests, des scripts et un exemple d'application simple, qui contient la configuration de base requise pour développer une application Web typique.

Pour ce tutoriel, nous avons apporté les modifications suivantes au projet de départ AngularJS :
1. Supprimez l'exemple d'application
2. Ajoutez des images de téléphone mobile à app/img/phones/ ; 3. Ajoutez le fichier de données du téléphone mobile (JSON) à app/phones/
4. Ajoutez les fichiers Twitter Bootstrap à app/css/ et app/img/.

Pratique

Essayez d'ajouter de nouvelles expressions sur les opérations mathématiques à index.html :

Copier le code Le code est le suivant :

1 2 = {{ 1 2 }}

Résumé

Passons maintenant à l'étape 1 et ajoutons du contenu à l'application Web.

Étiquettes associées：

angularjs 入门教程引导程序

source：php.cn

Article précédent：Tutoriel de démarrage d'AngularJS (1) : Modèle statique_AngularJS Article suivant：Recommandé Plug-in_jquery de carte de mise au point de curseur d'image jQuery

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur