Tutoriel de démarrage d'AngularJS (zéro) : Bootstrap_AngularJS
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.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Framework d'implémentation PHP : tutoriel d'introduction à CakePHP
Jun 18, 2023 am 09:04 AM
Avec le développement continu de la technologie Internet, la technologie de développement Web est également constamment mise à jour et itérée. En tant que langage de programmation open source, PHP est largement utilisé dans le développement Web. En tant que l'un des outils couramment utilisés dans le développement PHP, le framework PHP peut améliorer l'efficacité du développement et la qualité du code. Cet article vous présentera un framework PHP - CakePHP, et fournira quelques tutoriels simples pour commencer. 1. Qu'est-ce que CakePHP ? CakePHP est un modèle basé sur MVC (Model-View-Control
Voici comment effectuer un double démarrage de Windows 11 sur Microsoft Surface Duo
Apr 29, 2023 pm 09:37 PM
Installez Windows 11 sur Microsoft Surface Duo N'oubliez pas que les étapes décrites ci-dessous s'appliquent aux modèles déverrouillés et AT&T de Surface Duo. Surface Duo2 alimenté par le processeur Qualcomm Snapdragon 888 est totalement incompatible avec ce module. Avertissement : avant d'apprendre comment effectuer un double démarrage de Windows 11 sur Microsoft Surface Duo, n'oubliez pas d'effectuer une sauvegarde hors appareil. En effet, le processus nécessite l'effacement de toutes les données du téléphone, y compris les fichiers de la mémoire interne. Vous pourriez bloquer votre appareil de façon permanente, alors n'essayez ceci que si vous savez ce que vous faites
Comment installer macOS sur un nouveau SSD
Apr 13, 2023 pm 04:01 PM
Comment utiliser macOS Recovery pour installer macOS sur un nouveau SSD Sur tout Mac construit après 2009, il existe un système de récupération intégré. Cela vous permet de démarrer votre Mac en mode de récupération. Dans ce mode, vous pouvez réparer le disque interne, restaurer des fichiers à partir d'une sauvegarde Time Machine, obtenir de l'aide en ligne ou réinstaller macOS. Vous devez disposer d'une connexion Internet pour utiliser ces outils. Vous pouvez utiliser l'outil d'installation de macOS pour installer macOS sur un nouveau SSD installé sur votre ordinateur. Pour utiliser Internet Recovery pour installer macOS sur un SSD : Suivez les instructions du fabricant
Guide du débutant : Partez de zéro et apprenez MyBatis étape par étape
Feb 19, 2024 am 11:05 AM
Tutoriel d'introduction MyBatis concis et facile à comprendre : écrivez votre premier programme étape par étape MyBatis est un framework de couche de persistance Java populaire qui simplifie le processus d'interaction avec les bases de données. Ce didacticiel vous montrera comment utiliser MyBatis pour créer et effectuer des opérations de base de données simples. Étape 1 : configuration de l'environnement Tout d'abord, assurez-vous que votre environnement de développement Java a été installé. Ensuite, téléchargez la dernière version de MyBatis et ajoutez-la à votre projet Java. Vous pouvez le télécharger depuis le site officiel de MyBatis
Framework d'implémentation PHP : tutoriel d'introduction au framework Lumen
Jun 18, 2023 am 08:39 AM
Lumen est un microframework basé sur PHP développé par les développeurs du framework Laravel. Il a été initialement conçu pour créer rapidement de petites applications API et des microservices, tout en conservant certains composants et fonctionnalités du framework Laravel. Le framework Lumen est léger, rapide et facile à utiliser, il a donc reçu une attention et une utilisation généralisées. Dans cet article, nous allons rapidement démarrer avec le framework Lumen et apprendre à utiliser le framework Lumen pour créer des applications API simples. Préparation du framework Avant d'apprendre le framework Lumen, nous devons
Les 5 derniers tutoriels Angularjs en 2022, de l'entrée à la maîtrise
Jun 15, 2017 pm 05:50 PM
Javascript est un langage tout à fait unique. Il est unique en termes d'organisation du code, de paradigme de programmation du code et de théorie orientée objet. La question de savoir si Javascript est un langage orienté objet a été débattue depuis un certain temps. Il y a évidemment une réponse depuis longtemps. Cependant, même si Javascript est dominant depuis vingt ans, si vous souhaitez comprendre les frameworks populaires tels que jQuery, Angularjs et même React, il suffit de regarder le « Black Horse Cloud Classroom JavaScript Advanced Framework ». Tutoriel vidéo de conception".
Utilisez PHP et AngularJS pour créer un site Web réactif afin d'offrir une expérience utilisateur de haute qualité
Jun 27, 2023 pm 07:37 PM
À l’ère de l’information d’aujourd’hui, les sites Web sont devenus un outil important permettant aux individus d’obtenir des informations et de communiquer. Un site Web réactif peut s’adapter à divers appareils et offrir aux utilisateurs une expérience de haute qualité, ce qui est devenu un point chaud dans le développement de sites Web modernes. Cet article expliquera comment utiliser PHP et AngularJS pour créer un site Web réactif afin d'offrir une expérience utilisateur de haute qualité. Introduction à PHP PHP est un langage de programmation open source côté serveur idéal pour le développement Web. PHP présente de nombreux avantages, tels que la facilité d'apprentissage, la multiplateforme, la riche bibliothèque d'outils et l'efficacité du développement.
Créer des applications Web en utilisant PHP et AngularJS
May 27, 2023 pm 08:10 PM
Avec le développement continu d'Internet, les applications Web sont devenues un élément important de la construction de l'information d'entreprise et un moyen nécessaire au travail de modernisation. Afin de faciliter le développement, la maintenance et l'extension des applications Web, les développeurs doivent choisir un cadre technique et un langage de programmation adaptés à leurs besoins de développement. PHP et AngularJS sont deux technologies de développement Web très populaires. Ce sont respectivement des solutions côté serveur et côté client. Leur utilisation combinée peut considérablement améliorer l'efficacité du développement et l'expérience utilisateur des applications Web. Avantages de PHPPHP
