Nous nous préparons maintenant à écrire Application AngularJS - Phonecat. Dans cette étape (étape 0), vous vous familiariseras avec des fichiers de code source importants, apprendre à démarrer un environnement de développement contenant des projets de semences angularjs et exécuter l'application du côté du navigateur.
Entrez le répertoire angulaire-phonécat et exécutez la commande suivante:
La copie de code est la 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, de modifier le numéro de la commande en nombre correspondant à l'étape d'apprentissage, et la commande effacera toutes les modifications que vous avez apportées dans le répertoire de travail.
Exécutez la commande suivante:
La copie de code est la suivante:
Node scripts / web-server.js
Pour démarrer le serveur, le terminal de ligne de commande invitera le serveur HTTP en cours d'exécution sur http: // localhost: 8000. Veuillez ne pas fermer le terminal. Fermer le terminal fermera le serveur. Entrez http: // localhost: 8000 / app / index.html dans votre navigateur pour accéder à notre application Phonecat.
Maintenant, dans le navigateur, vous auriez dû voir notre application initiale, ce qui est simple, mais cela signifie que notre projet est prêt à s'exécuter.
Le "rien ici encore!" L'application affichée dans l'application est construite à partir du code HTML suivant, qui contient les éléments clés d'AngularJS, qui est exactement ce que nous devons apprendre.
app / index.html
La copie de code est la suivante:
<! doctype html>
<html lang = "en" ng-app>
<adal>
<meta charset = "utf-8">
<Title> Mon fichier HTML </TITME>
<link rel = "Stylesheet" href = "css / app.css">
<link rel = "Stylesheet" href = "css / bootstrap.css">
<script src = "lib / angular / angular.js"> </ script>
</ head>
<body>
<p> Rien ici {{'pourtant' + '!'}} </p>
</docy>
</html>
Que fait le code?
Directive NG-App:
La copie de code est la suivante:
<html lang = "en" ng-app>
La directive NG-App marque la portée du script AngularJS. L'ajout de l'attribut NG-App dans <html> signifie que l'ensemble <html> est la portée du script angularjs. Les développeurs peuvent également utiliser les directives NG-App localement, telles que <div ng-app>, et les scripts angularjs ne sont exécutés que dans ce <div>.
Tag de script AngularJS:
La copie de code est la suivante:
<script src = "lib / angular / angular.js"> </ script>
Cette ligne de code est chargée dans le script Angular.js. Lorsque le navigateur charge toute la page HTML, le script Angular.js sera exécuté. Une fois le script Angular.js exécuté, il cherchera une balise HTML contenant la directive NG-App. Cette balise définit la portée de l'application AngularJS.
Expression liée à double contrefait:
La copie de code est la suivante:
<p> Rien ici {{'pourtant' + '!'}} </p>
Cette ligne de code démontre la fonction centrale du modèle AngularJS - Binding, qui se compose de doubles accolades {{}} et de l'expression 'pourtant' + '!'.
Cette liaison indique à AngularJS qu'elle doit calculer les expressions 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 les résultats de l'opération d'expression changent.
L'expression angulaire de l'expression angulaire est un extrait de type JavaScript, les expressions angularjs ne font que fonctionner dans la portée des angularjs, pas dans tout le dom.
Démarrer l'application angularjs
Le démarrage automatique des applications AngularJS via les directives NGApp est un moyen concis de s'adapter à la plupart des situations. Dans le développement avancé, comme l'utilisation de scripts pour charger une application, vous pouvez également utiliser Bootstrap pour démarrer manuellement les applications AngularJS.
Il y a trois points importants dans le processus de démarrage de l'application AngularJS:
1. L'injecteur utilisera pour créer une injection de dépendance pour cette application;
2. L'injecteur créera la portée racine comme portée de notre modèle d'application;
3. AngularJS reliera le DOM dans la portée racine, en commençant par des balises HTML marquées avec NGApp, et traitant progressivement des directives et des liaisons dans le DOM.
Une fois l'application AngularJS démarrée, il continuera d'écouter les événements HTML déclenchant HTML du navigateur, tels que les événements de clic de souris, les événements de presse de touches, les réponses entrantes HTTP, etc. qui modifient le modèle DOM. Une fois que ces événements se produisent, AngularJS détectera automatiquement les modifications et apportera le traitement et les mises à jour correspondantes.
La structure de l'application ci-dessus est très simple. Le package de modèle ne contient qu'une seule directive et une liaison statique, et le modèle est également vide. Ensuite, essayons une application légèrement plus complexe!
Que font ces fichiers dans mon répertoire de travail?
L'application ci-dessus provient du projet AngularJS Seed, nous pouvons généralement utiliser le projet AngularJS Seed pour créer de nouveaux projets. Le projet Seed comprend la dernière base de code AngularJS, la bibliothèque de test, les 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 AngularJS Seed:
1. Supprimer l'exemple d'application;
2. Ajoutez des images de téléphone mobile à App / IMG / Phones /;
3. Ajouter un fichier de données de téléphone mobile (JSON) à App / Phones /;
4. Ajoutez des fichiers Bootstrap Twitter à App / CSS / et APP / IMG /.
pratique
Essayez d'ajouter une nouvelle expression sur les opérations mathématiques à index.html:
La copie de code est la suivante:
<p> 1 + 2 = {{1 + 2}} </p>
Résumer
Passons maintenant à l'étape 1 et ajoutons du contenu à l'application Web.