Je suis le fondateur du cours sur AngularJS. Voila 2 semaines que le cours à été publié. Je souhaiterai avoir vos premiers retours pour ceux qui ont commencé (ou fini) de le lire. Certains m'ont déjà fait parvenir leurs remarques par MP.
Par ailleurs, je souhaiterai écrire quelques exercices et QCMs afin de faciliter votre compréhension. Concernant les exercices, y a t-il des sujets, projets sur lesquels vous aimeriez bien travailler et qui pourraient faire office d'exercices ou TPs?
J'attends vos réponses avec impatience!
- Edité par nicolas.challeil@openclassrooms.com 3 février 2015 à 9:15:31
Merci pour le cours sur AngularJS tout d'abord. Je m'intéresse pas mal à la programmation temps-réél et aux SPA je jetterai donc sûrement un œil à ton cours (même si je suis plutôt environnement .NET mais le choix d'Angular n'empêche pas le .NET donc bon ).
Je ne peux pas encore te faire un retour par contre, une idée d'exercice/TP que j'aimerai bien voir de façon propre (n'y connaissant pas grand chose pour le moment) serait un petit exemple de sondage en ligne.
Plusieurs choix possibles et les barres de l'histogramme représentant les pourcentages changent au fur et à mesure que les gens votent
Voilà pour l'idée, bonne continuation !
Si un message vous a aidé, n'oubliez pas le +1 et de passer votre sujet en "Résolu" ! :)
J'ai sauté la partie "installation" pour jetter un oeil au cours en lui même j'ai lu en diagonal mais une chose m'interpelle : le premier exemple de code ("squelette" de la page html) n'a pas d'attribut "ng-app". Je ne sais pas si le code fonctionne sans ça et je suis étonné de ne pas le voir avant la partie sur les directives puisque tout y est rattaché...
Pour moi, la notion de scope n'est pas suffisament approfondie. Comme les directives créent des scopes, je pense qu'il est important de dire qu'on peut lire les données qui se trouvent dans un des scopes parents mais on ne peux pas y écrire. Avec le problème un peu fourbe que ça pose :
Veux accéder à une variable sans trop savoir ou elle est
je vais essayer de la lire : ça marche, cool!
je lui affecte une nouvelle valeur : ça marche, j'ai une variable avec la bonne valeur
Malgré tout, sur ma page j'ai toujours l'ancienne valeur
On lit la variable dans le scope parent, on veux mettre une nouvelle valeur mais on crée une nouvelle variable dans le scope courant et ensuite, c'est à cette variable qu'on accède tant qu'on est dans le scope.
Autre chose, dans le "pour aller plus loin", tu parles de batarang, qui est très bien, mais qui causait des alertes sécurité dans chrome pendant un temps.
Bon j'ai lu en diagonale, mais je trouve le cours bien fichu. Je verrai bien des liens supplémentaires vers la doc officielle (dans la page "directives" entre autre) mais bon, ceux qui en ont besoin sont capable de chercher eux même normalement .
@Xiarea: Ta remarque sur $scope est très pertinente. En fait, il convient de bien comprendre comment JavaScript fonctionne et plus particulièrement la notion d'héritage de prototypes (mais je pense que tu l'as compris). Tu peux effectivement changer la valeur d'un attribut attaché à une scope parent, mais pour cela, il faut gruger un peu. Soit:
Créer une fonction (setter) dans la scope parent permettant de changer la valeur de la variable
Représenter l'attribut sous la forme d'un objet
Utiliser $parent
Sinon, comme tu le dis si bien, cela crée un nouvel attribut dans le contexte courant au lieu de modifier celui du contexte parent. Mais cela n'est pas contingent à Angular mais bien à JavaScript (encore que toutes les directives ne se comportent pas de la même manière).
Mais ta remarque est très juste, et j'en prends note!
Tu peux effectivement changer la valeur d'un attribut attaché à une scope parent, mais pour cela, il faut gruger un peu. Soit:
Créer une fonction (setter) dans la scope parent permettant de changer la valeur de la variable
Représenter l'attribut sous la forme d'un objet
Utiliser $parent
Je ne sais pas si c'est ce que tu entends par "Représenter l'attribut sus la forme d'un objet" mais ma solution en générale est de fournir directement l'élément au scope qui en a besoin. Typiquement :
Tu peux effectivement changer la valeur d'un attribut attaché à une scope parent, mais pour cela, il faut gruger un peu. Soit:
Créer une fonction (setter) dans la scope parent permettant de changer la valeur de la variable
Représenter l'attribut sous la forme d'un objet
Utiliser $parent
Je ne sais pas si c'est ce que tu entends par "Représenter l'attribut sus la forme d'un objet" mais ma solution en générale est de fournir directement l'élément au scope qui en a besoin. Typiquement :
Tout a fait, il s'agit de la bonne méthode puisque lorsque tu crées une directive en définissant l'attribut scope, tu spécifies à angular que tu souhaites utiliser une scope isolée et par conséquent, tu es bien obligé de spécifier les attributs que tu veux partager avec ta scope parente. C'est donc tout à fait juste.
Please try running this command again as root/Administrator.
Il te faut les droits root/administrateur pour exécuter cette commande. Assures-toi que tu as des droits suffisant et/ou que la fenêtre console est ouverte en tant qu'administrateur
Si un message vous a aidé, n'oubliez pas le +1 et de passer votre sujet en "Résolu" ! :)
Bonjour,
Alors oui effectivement, très bonne remarque de Pyrobolser. Il faut en effet être en root lorsque l'on exécute cette commande.
La raison est très simple. Lorsque vous exécuter la commande npm -g ... , l'installation est globale au système. Il existe donc un répertoire dans lequel les modules spécifiques à Node sont installés. Il faut être root pour pouvoir écrire dans ce répertoire. Vous avez également la possibilité d'exécuter les commande en ne mettant pas l'option -g. Cela aura pour effet d'installer les modules node au niveau du répertoire courant.
npm ERR! Please include the following file with any support request: npm ERR! /Users/djeinababa/Desktop/workspace/first-app/npm-debug.log events.js:85 throw er; // Unhandled 'error' event ^ Error: spawn grunt ENOENT at exports._errnoException (util.js:746:11) at Process.ChildProcess._handle.onexit (child_process.js:1046:32) at child_process.js:1137:20 at process._tickCallback (node.js:355:11)
Lorsque vous exécutez la commande sudo npm install grunt-karma --save-dev, vous essayez d'installer grunt-karma et non pas grunt. L'erreur indique qu'effectivement il manque la dépendance grunt.
Avez-vous essayé d'installer grunt globalement avec la commande: npm install -g grunt-cli
Vous n'êtes pas le premier à rencontrer des problèmes dans l'installation. L'erreur suggère en réalité que grunt ne parvient pas à localiser le répertoire bower_components.
Essayez d'installer les dépendances de Bower à la main avec la commande suivante: bower install
Bonjour je débute sur ce tuto angular et j'ai le même problème que le vdd.
En ce qui me concerne je programme (entre autre) du javascript depuis quelques temps et comme je commence un nouveau projet j'aimerais essayer l'angular. Je ne suis pas très familier des consoles donc je découvre un peu. En ce qui concerne ce problème je me pose plusieurs question. Je suis arrivé à la conclusion après des recherches que bower n'était pas correctement installé, il m'a semblé voir des erreurs à ce propos lors du lancement de la commande yo angular. J'ai donc essayé bower install et j'ai un message enogit git is not installed or not in the path. Ce n'est pas très clair au début du cours mais a-t-on besoin de git dès le début? Corollaire: je ne connais pas git, c'est grave docteur? j'ai tenté une commande npm install git dans node_modules, le module a été installé mais ça n'a pas résolu le problème de bower. Deuxième chose qui me turlupine j'ai trois dossiers node_modules. Un dans c:\nodejs un dans c:\workspace\first-app dans lequel se trouve entre autre git et bower et un autre dans c:\users\dirtyharry\ . Et dans le dossier dans user se trouve un dossier .bin et un dossier... bower! Comme je vous le disais je ne suis pas très familier des consoles et il se pourrait j'ai commis une boulette!
Le message d'erreur lors de la commande grunt
C:\workspace\first-app\node_modules>grunt
Running "newer:jshint" (newer) task
Running "newer:jshint:all" (newer) task
No newer files to process.
Running "newer:jshint:test" (newer) task
No newer files to process.
Running "clean:server" (clean) task
>> 0 paths cleaned.
Running "wiredep:app" (wiredep) task
Warning: Error: Cannot find where you keep your Bower packages. Use --force to continue.
Aborted due to warnings.
celui lors de la commande bower install
C:\workspace\first-app>bower install
bower angular#^1.3.0 ENOGIT git is not installed or not in the PATH
- Edité par minuitdix 25 avril 2015 à 18:17:49
Ancien ouvrier devenu développeur backend JAVA bach +3 grâce au site du zér0 puis openclassroom et aux cours de https://www.iepsm.be/
Désolé pour ma réponse un peu tardive. Alors effectivement, l'erreur ENOGIT (Error No GIT) indique que la commande GIT ne peut pas être exécutée car introuvable. Soit celle-ci n'est pas installée, soit elle n'est pas présente dans votre variable d'environnement ($PATH). Cependant, GIT ne constitue pas un package node et par conséquent, il est inutile de l'installer via npm. Il faut donc l'installer: http://git-scm.com/book/fr/v1/D%C3%A9marrage-rapide-Installation-de-Git
J'ai regardé rapidement ton cours et j'aurai deux trois suggestions pour être dans les "bonnes pratiques" et pour du vrai JS...
Dans tous tes exemples, si on minifie notre projet, ça va pas faire rire les mouettes... Tu injectes les composants directement sans penser au fait que les noms vont changer.
Autre chose, c'est bien d'isoler chaque partie dans des (function(){})() =)
Il faut regarder aussi du côté des alias au niveau des controllers. Tu travailles tout au niveau du $scope. Pareil, plus on va loin et moins les scope deviennent rigolos... !
De manière général, je trouve ça plus intéressant de bien nommer ses functions plutôt que de faire dans l'anonyme. Après, ça relève moins d'AngularJS mais du niveau des gens en JS... Tout est fonction
Sinon c'est bien, le tour d'horizon est plutôt bon pour découvrir Angular !
Un petit chapitre sur des modules incontournables ? genre ui router =)
Cannot find where you keep your Bower packages, signifie qu'il ne trouve pas ou est situé ton dossier où s'installent tous tes composants Bower (bibliothèques et frameworks Front-end de ton site en général, installé avec le gestionnaire de dépendances Bower). Normalement si tu as installé Bower dès le début, et que tu as initialisé ton projet avec Yeoman ( yo angular ) tu ne devrais pas avoir ce problème. Car le générateur de angular execute bower init ainsi que npm init, puis bower install ansi que npm install
Les commendes "init" crées les fichiers bower.json pour Bower ainsi que packages.json pour Npm, et les commandes "install" installes les composants et packages dont tu as besoin dans les dossiers correspondants : bower_components pour Bower et node_modules pour Node/Npm
Cela signifie donc surement que tu n'as pas de fichier ".bowerrc" (qui signifie surement "bower repository components", traduction : Le dossier des composants bower)
A l'intérieur du fichier devrait figurer ce bout de code JSON :
{
"directory": "bower_components"
}
Pour cela fait simplement tu fais un : bower init
Si tu n'as pas accès à la commande bower, c'est que bower n'est pas installé globalement à ton système. Globalement signifie que tu peux lancer la commande dans n'importe qu'elle dossier dans le terminal de ligne de commande.
Pour installer BOWER : sudo npm install -g bower (fonctionne sur MacOS, Ubuntu) Si tu es sur Debian essaye : su npm install -g bower
Si tu es sur Windows, la commande sudo(ou su) n'existe pas, et l'équivalent est "runas" il me semble, je n'utilise pas Windows depuis un moment déjà.
- Edité par asap_ricko 30 août 2015 à 15:54:34
Passe la nuit à coder, et tu ne dormiras pas sans blé #EnSiliconValley --->[]
Je suis le fondateur du cours sur AngularJS. Voila 2 semaines que le cours à été publié. Je souhaiterai avoir vos premiers retours pour ceux qui ont commencé (ou fini) de le lire. Certains m'ont déjà fait parvenir leurs remarques par MP.
Par ailleurs, je souhaiterai écrire quelques exercices et QCMs afin de faciliter votre compréhension. Concernant les exercices, y a t-il des sujets, projets sur lesquels vous aimeriez bien travailler et qui pourraient faire office d'exercices ou TPs?
J'attends vos réponses avec impatience!
- Edité par STuFF le 3 février 2015 à 9:15:31
Personnellement j'adore ce cours, mais dans la partie des tests : https://openclassrooms.com/courses/developpez-vos-applications-web-avec-angularjs/afficher-les-films-populaires , alors que j'ai récupéré le projet via git clone, et que tu as nommé le module 'cineAngularApp', dans le code du cours tu as mis : 'coursExoApp' , ce qui créer déjà un problème dans les tests. Une fois ce problème régler, 2 des 3 tests échoue toujours, les 2 tests du contrôleur PopularCtrl ( /cine_angular/test/spec/controllers/popular.js )
J'obtiens :
PhantomJS 1.9.8 (Mac OS X 0.0.0) Controller: PopularCtrl should set $scope.movies and $scope.total_pages when calling $scope.loadMovies FAILED
TypeError: 'undefined' is not a function (evaluating 'spyOn(serviceAjax, 'popular').andCallFake')
at /Users/eric/workspace/cine_angular/test/spec/controllers/popular.js:32
PhantomJS 1.9.8 (Mac OS X 0.0.0) Controller: PopularCtrl should call loadMovies function when calling pageChanged function FAILED
Error: loadMovies() method does not exist
at /Users/eric/workspace/cine_angular/test/spec/controllers/popular.js:42
PhantomJS 1.9.8 (Mac OS X 0.0.0): Executed 3 of 3 (2 FAILED) (0.004 secs / 0.022 secs)
Warning: Task "karma:unit" failed. Use --force to continue.
Aborted due to warnings.
Le premier FAIL indique donc :
TypeError: 'undefined' is not a function (evaluating 'spyOn(serviceAjax, 'popular').andCallFake')
at /Users/eric/workspace/cine_angular/test/spec/controllers/popular.js:32
après recherche j'ai cru comprendre que la syntaxe entre Jasmine 1.x et 2.x change (http://stackoverflow.com/questions/22041745/jasmine-spyonobj-method-andcallfake-or-and-callfake) :
// version 1:
spyOn(mBankAccountResource, 'getBankAccountData').and.callFake(fakedFunction);
// version 2:
spyOn(mBankAccountResource, 'getBankAccountData').andCallFake(fakedFunction);
J'ai donc remplacé le code du test ( and.callFake(...) à la place de andCallFake(...) )
Et je pense que le problème ce déplace vu que l'erreur passe de la ligne 32 à la ligne 34.
L'erreur du Test 1 ressemble maintenant à l'erreur du test 2 : au sujet de la fonction loadMovies();
PhantomJS 1.9.8 (Mac OS X 0.0.0) Controller: PopularCtrl should set $scope.movies and $scope.total_pages when calling $scope.loadMovies FAILED
TypeError: 'undefined' is not a function (evaluating 'scope.loadMovies()')
at /Users/eric/workspace/cine_angular/test/spec/controllers/popular.js:34
PhantomJS 1.9.8 (Mac OS X 0.0.0) Controller: PopularCtrl should call loadMovies function when calling pageChanged function FAILED
Error: loadMovies() method does not exist
at /Users/eric/workspace/cine_angular/test/spec/controllers/popular.js:42
PhantomJS 1.9.8 (Mac OS X 0.0.0): Executed 3 of 3 (2 FAILED) (0.005 secs / 0.049 secs)
Warning: Task "karma:unit" failed. Use --force to continue.
Aborted due to warnings.
Je ne sais pas du coup si il faut rester sur la syntaxe de la version 1 ou celle de la version 2, si ton test est bien écrit ou non, si je require les bonnes versions en local et en global... OU si c'est le faite qu'on accède pas au scope que l'ont souhaite vu qu'on arrive pas à accéder à la fonction loadMovies... je suis perdu.
- Edité par asap_ricko 30 août 2015 à 17:12:51
Passe la nuit à coder, et tu ne dormiras pas sans blé #EnSiliconValley --->[]
Cannot find where you keep your Bower packages, signifie qu'il ne trouve pas ou est situé ton dossier où s'installent tous tes composants Bower (bibliothèques et frameworks Front-end de ton site en général, installé avec le gestionnaire de dépendances Bower). Normalement si tu as installé Bower dès le début, et que tu as initialisé ton projet avec Yeoman ( yo angular ) tu ne devrais pas avoir ce problème. Car le générateur de angular execute bower init ainsi que npm init, puis bower install ansi que npm install
Les commendes "init" crées les fichiers bower.json pour Bower ainsi que packages.json pour Npm, et les commandes "install" installes les composants et packages dont tu as besoin dans les dossiers correspondants : bower_components pour Bower et node_modules pour Node/Npm
Cela signifie donc surement que tu n'as pas de fichier ".bowerrc" (qui signifie surement "bower repository components", traduction : Le dossier des composants bower)
A l'intérieur du fichier devrait figurer ce bout de code JSON :
{
"directory": "bower_components"
}
Pour cela fait simplement tu fais un : bower init
Si tu n'as pas accès à la commande bower, c'est que bower n'est pas installé globalement à ton système. Globalement signifie que tu peux lancer la commande dans n'importe qu'elle dossier dans le terminal de ligne de commande.
Pour installer BOWER : sudo npm install -g bower (fonctionne sur MacOS, Ubuntu) Si tu es sur Debian essaye : su npm install -g bower
Si tu es sur Windows, la commande sudo(ou su) n'existe pas, et l'équivalent est "runas" il me semble, je n'utilise pas Windows depuis un moment déjà.
- Edité par asap_ricko le 30 août 2015 à 15:54:34
Merci asap_ricko ! C'est mieux.
Par contre lorsque je lance "grunt serve" ça ne fonctionne pas, pourtant lorsque je l'avais installé il y avait bien une nouvelle page qui s'ouvrait. Maintenant j'ai un message d'erreur :
Cannot find where you keep your Bower packages, signifie qu'il ne trouve pas ou est situé ton dossier où s'installent tous tes composants Bower (bibliothèques et frameworks Front-end de ton site en général, installé avec le gestionnaire de dépendances Bower). Normalement si tu as installé Bower dès le début, et que tu as initialisé ton projet avec Yeoman ( yo angular ) tu ne devrais pas avoir ce problème. Car le générateur de angular execute bower init ainsi que npm init, puis bower install ansi que npm install
Les commendes "init" crées les fichiers bower.json pour Bower ainsi que packages.json pour Npm, et les commandes "install" installes les composants et packages dont tu as besoin dans les dossiers correspondants : bower_components pour Bower et node_modules pour Node/Npm
Cela signifie donc surement que tu n'as pas de fichier ".bowerrc" (qui signifie surement "bower repository components", traduction : Le dossier des composants bower)
A l'intérieur du fichier devrait figurer ce bout de code JSON :
{
"directory": "bower_components"
}
Pour cela fait simplement tu fais un : bower init
Si tu n'as pas accès à la commande bower, c'est que bower n'est pas installé globalement à ton système. Globalement signifie que tu peux lancer la commande dans n'importe qu'elle dossier dans le terminal de ligne de commande.
Pour installer BOWER : sudo npm install -g bower (fonctionne sur MacOS, Ubuntu) Si tu es sur Debian essaye : su npm install -g bower
Si tu es sur Windows, la commande sudo(ou su) n'existe pas, et l'équivalent est "runas" il me semble, je n'utilise pas Windows depuis un moment déjà.
- Edité par asap_ricko le 30 août 2015 à 15:54:34
Merci asap_ricko ! C'est mieux.
Par contre lorsque je lance "grunt serve" ça ne fonctionne pas, pourtant lorsque je l'avais installé il y avait bien une nouvelle page qui s'ouvrait. Maintenant j'ai un message d'erreur :
'compass.bat' n'est pas reconnu en tant que commande interne
ou externe, un programme ex?cutable ou un fichier de commandes.
Use --force to continue.
Aborted due to warnings.
- Edité par fredb73 le 2 septembre 2015 à 11:14:36
Je ne connais pas cette erreur. Cependant sur Mac OS et distributions LINUX lorsque mon GRUNT SERVE ne fonctionne pas c'est du au faite que toutes les dépendances ne sont pas installés correctement.
Normalement, YO ANGULAR ce charge de le faire mais cela peut échoué pour des raisons de droits d'accès. Cela m'étonne que sous Windows tu souffres a cause de droits d'accès. Windows est en général (trop?) permissif.
Il faut donc ré-executer la commande NPM INSTALL avec les droits adéquats. Il te faut suivre les indications du tutoriel à la lettre, même si j'avoue qu'il manque des précisions des fois. Tout de même il faut lire et relire, et chercher sur google en faisant copier coller des erreurs obtenu, il y a souvent une solution sur stackoverflow.com proposé dans les premiers résultats sur Google. Ne pas avoir peur de l'anglais. Ou il faut s'y mettre dès maintenant.
Personnellement, j'attends encore que l'auteur daigne suivre la communauté, son code et ses indications manque de rigueur et de suivi.
Passe la nuit à coder, et tu ne dormiras pas sans blé #EnSiliconValley --->[]
Je suis passé par grunt build, qui m'a ajouté mes dépendances, super, mais j'ai toujours ce problème... Le source ne trouve visiblement pas le fichier angular.js, je ne comprend pas à côté de quoi je suis passé
mon vhost doit bien pointé dans le répertoire app, on est d'accord?
ca me bloque sur le chargement de toute mes autres dépendances... angular-route, jquery, ... tout pareil
Bon, j'ai découvert qu'avec grunt serve il me lancait l'application et que là tout fonctionnait... Je ne peux pas y accéder via mon vhost normalement?? Pas tout compris du fonctionnement
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Ancien ouvrier devenu développeur backend JAVA bach +3 grâce au site du zér0 puis openclassroom et aux cours de https://www.iepsm.be/