Maison > Article > interface Web > Tutoriel de démarrage d'AngularJS (zéro) : Bootstrap_AngularJS
Tutoriel de démarrage d'AngularJS (zéro) : Bootstrap_AngularJS
- WBOYoriginal
- 2016-05-16 16:28:331306parcourir
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 :
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 :
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
Rien ici {{'encore' '!'}}
Que fait le code ?
Directive ng-app :
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
Balise de script AngularJS :
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 :
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 :
1 2 = {{ 1 2 }}
Résumé
Passons maintenant à l'étape 1 et ajoutons du contenu à l'application Web.Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript