Ce cours aborde aussi des sujets relativement théoriques (client-serveur, protocole HTTP…).
A noter que des connaissances en JavaScript, HTML et CSS sont indispensables avant d’aborder AngularJS et nodeJS
Plan de cours
- Les bases d’AngularJS
- AngularJS ? Qu’est ce que c’est ?
- Première approche
- Un premier exemple
- Manipulons des objets
- utilisation ng-repeat
- Code HTML généré par AngularJS
- Mini projet
- Un peu d’interaction avec ng-click
- ng-show et ng-hide
- la balise input et la directive ng-model
- Checkbox
- Les filtres
- NodeJS et AngularJS
- Notion de client-serveur
- Les méthodes des requêtes HTTP
- L’URL (et l’URI)
- Chemin absolu ou chemin relatif ?
- Réponse du serveur à une requête HTTP
- Les serveurs HTTP
- Les langages côté serveur
- expressJS
- AngularJS et nodeJS
- Envoyer du JSON
- Utilisation de la méthode POST
- Paramètres dans une requête HTTP de type GET
- Retour sur AngularJS : les routes
- Base de données MongoDB
- Premier contact avec mongoDB
- Première utilisation du trio AngularJS, expressJS et mongoDB
- Lecture dans la base de données : les requêtes
- Faire des requêtes plus complexes
- Supprimer des entrées (requête HTTP de type DELETE)
- Modifier des entrées (requête HTTP de type PUT)
Profitez de ce manuel de formation en PDF pour comprendre mieux le AngularJS et enrichir votre connaissance.
Commencez à télécharger ce cours adapté pour vous et à apprendre AngularJS.
text-align:center; margin: 30px; font-size: 6 0px;}#mesSeries{ margin-bottom:20px;}Attention : le fichier ex4.css est composé du bootstrap twitter et du code ci-dessus.J'attire votre attention sur la balise image « », l'attribut classique src nefonctionnera pas ici (faites l'essai), il faudra donc systématiquement utiliser ng-src en lieu et place de src. Autre élément important, l'utilisation du css est quasi indispensable, ne négligez pas cet aspect des choses.Un peu d'interaction avec ng-clickGrâce à ng-click il est possible de « réagir » au clic de l'utilisateur en appelant la fonction de votre choix. La balise quiaura pour attribut ng-click deviendra donc « cliquable » :soit ……, un clic sur le contenu de cette balise entraînera l’exécution de lafonction mafonction(). À faire vous mêmecode HTML ex 5 .html
- {{fruit}}
code JavaScript ex 5 .js var mesFruits Tab =[ " banane " , " pomme " , " ananas " , " pêche " , " fraise " ] ;function monControl($scope){$scope.affichage=function(){$scope. me sFruits = mesFruitsTab ;}}Décrire le résultat attendu en cas « d'ouverture » du fichier ex 5 .html avec un navigateur internet (Firefox, Chrome….)……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………..Vérifiez votre hypothèsePlusieurs remarques sur cet exemple :• les fonctions qui seront exécutées en cas de clic devront être des méthodes de l'objet $scope d'où le« $scope.affichage »• nous verron s juste après une autre méthode pour faire apparaître et disparaître des éléments d'une page.• Nous avons choisi un bouton comme élément « cliquable », toute autre balise peut convenir (div, a, img…..) ng- show et ng- hideIl est possible de masquer le contenu d'une balise en utilisant la directive ng-show dans ladite balise :