Partage

Cours AngularJS

<< 1 2 3 4 5

JeanSmart

24 avril 2017 à 15:46:40

Bonjour #IsabellePasvraideux,

Pourquoi ne crées tu pas un sujet en expliquant de manière claire ce que tu veux ?

Tu trouveras forcément des gens pour t'aider

-
Edité par JeanSmart 24 avril 2017 à 15:47:30

IsabellePasvraideux

6 juin 2017 à 21:32:32

Bonjour,

étant donné que ce tuto est horrible pr les débutants, est ce que quelqu'un connait un tuto pour grunt,yoman,browser...?

Merci

-
Edité par IsabellePasvraideux 7 juin 2017 à 13:21:55

IsabellePasvraideux

4 juillet 2017 à 22:45:08

Bonjour,

dans ce tuto la première page installation de l'environnement il y a le lien http://nodejs.org/download.

Or quand on clique sur ce lien, on ne tombe pas sur un bouton "télécharger" mais une liste de dossiers.Or dans le tuto on nous dit de télécharger Nodejs par ce lien : je ne comprends pas comment faire pour télécharger en tombant sur cette page de dossiers ; quelqu'un peut il m'aider svp?

Merci

Eiffel88

5 juillet 2017 à 11:35:35

IsabellePasvraideux a écrit:

Bonjour,

dans ce tuto la première page installation de l'environnement il y a le lien http://nodejs.org/download.

Or quand on clique sur ce lien, on ne tombe pas sur un bouton "télécharger" mais une liste de dossiers.Or dans le tuto on nous dit de télécharger Nodejs par ce lien : je ne comprends pas comment faire pour télécharger en tombant sur cette page de dossiers ; quelqu'un peut il m'aider svp?

Merci

bonjour, le lien a changé c'est: https://nodejs.org/en/download/

-
Edité par Eiffel88 5 juillet 2017 à 11:36:11

IsabellePasvraideux

5 juillet 2017 à 17:24:45

Merci beaucoup

Eiffel88 a écrit:

bonjour, le lien a changé c'est: https://nodejs.org/en/download/

-
Edité par Eiffel88 il y a environ 5 heures

Morph12345

6 juillet 2017 à 20:05:45

Bonjour,

Je souhaite me former sur angular et j'ai vu le tuto sur OC mais je me demande si il est toujours d'actualité.

Il a été mis à jour récemment mais l'intitulé étant AngularJS (et non pas Angular, comme pour la v2 du framework), je me demande si ça vaut le coup de suivre ce tutoriel ou si il est obsolète.

Je découvre ce framework, merci d'avance pour vos retours

IsabellePasvraideux

6 juillet 2017 à 23:07:12

Bonjour,

dans le tuto lors de l'installation de l'environnement là en l'occurence node.js, il y a écrit de tester l'installation en tapant "node--version" dans la console, je l'ai fait mais il y a marqué que ne reconnait pas la ligne de commande.

Quelqu'un peut il m'aider svp? (décidément chaque ligne de ce tuto me pose un problème! :-s)

Merci

IsabellePasvraideux

7 juillet 2017 à 14:55:50

Eiffel88

7 juillet 2017 à 16:19:46

IsabellePasvraideux a écrit:

Bonjour,

dans le tuto lors de l'installation de l'environnement là en l'occurence node.js, il y a écrit de tester l'installation en tapant "node--version" dans la console, je l'ai fait mais il y a marqué que ne reconnait pas la ligne de commande.

Quelqu'un peut il m'aider svp? (décidément chaque ligne de ce tuto me pose un problème! :-s)

Merci

bonjour , il faut que vous ajoutiez le répertoire ou vous avez installez nodes dans la variable path De windows pour que la commande soit bien reconnu si ça marche pas try Google

JeanSmart

7 juillet 2017 à 16:21:55

Bonjour,

Essaie ça :node -v puis ça : node --version (n'oublie pas l'espace entre node et le trait d'union ) .

Si ça ne marche toujours pas , il faut ajouter node dans tes variables d'environnement :

http://blog.idleman.fr/nodejs-15-installation-sous-windows/

Bon courage !

-
Edité par JeanSmart 7 juillet 2017 à 16:22:21

IsabellePasvraideux

7 juillet 2017 à 18:49:55

ça a marché en faisant node -v puis node --version !

Remarque, j'aurais peut etre réussi sans faire node -v et en tapant juste node ESPACE --version car moi avant je ne mettais pas d'espace entre node et les tirets!

Merci!

JeanSmart a écrit:

Bonjour,

Essaie ça :node -v puis ça : node --version (n'oublie pas l'espace entre node et le trait d'union ) .

Si ça ne marche toujours pas , il faut ajouter node dans tes variables d'environnement :

http://blog.idleman.fr/nodejs-15-installation-sous-windows/

Bon courage !

-
Edité par JeanSmart il y a environ 1 heure

IsabellePasvraideux

9 juillet 2017 à 21:30:01

Bonjour,

voici quelques lignes du tuto :

"installation de bower

<samp>npm install -g bower</samp>

Installation de yo et de quelques générateurs

<samp>npm install -g yo</samp>

Nous rajoutons l'option -g afin de rendre l'installation globale. Cela vous évitera d'avoir à le réinstaller à chaque nouveau projet !"

Moi j'avais fait cela (<samp>npm install -g bower</samp><samp>et npm install -g yo)</samp>

il y a des mois ; est ce que du coup (par rapport au"-g") je n'ai pas à le refaire?

Merci

Sakuto

9 juillet 2017 à 22:11:57

Le refaire les mettra à jour.

Je ne suis plus modérateur, ne me contactez plus pour des demandes, je n'y répondrai pas.

KakombaJosue

8 août 2017 à 17:49:28

moi je suis nul et ca me fait la trouille ce cours mais je suis largement interesse

y a pas moyen d'en preparer une autre plus facile ou vous travailler sur un ptit projet example sans des theories eu comprehensible

pck ce qui m'interesse c de comprendre la place que ces trucs joue dans le metier de tout les jorurs e comment on peut assimiler ca plus rapodemet

LudoBoa

18 octobre 2017 à 9:24:54

Bonjour.

J'ai un problème avec votre cour. J'ai suivi les instructions, mais rien n'y fait. Je n'ai rien qui s'affiche et je ne comprends pas d'où vient le problème.

J'ai comme erreur dans ma console:

angular.js:14700 TypeError: serviceAjax.popular(...).success is not a function
    at loadMovies (popular.js:17)
    at new <anonymous> (popular.js:27)
    at Object.instantiate (angular.js:5055)
    at $controller (angular.js:11015)
    at Object.link (angular-route.js:1214)
    at angular.js:1385
    at invokeLinkFn (angular.js:10545)
    at nodeLinkFn (angular.js:9934)
    at compositeLinkFn (angular.js:9174)
    at publicLinkFn (angular.js:9039) "<div ng-view="" class="ng-scope">"

Pouvez-vous m'aider ???

Voilà mes fichiers...

Fichier index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
  </head>
  <body ng-app="cineAngularApp">
    <!--[if lte IE 8]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <div class="header">
      <div class="navbar navbar-default" role="navigation">
        <div class="container">
          <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="#/">cineAngular</a>
          </div>

          <div class="collapse navbar-collapse" id="js-navbar-collapse">

            <ul class="nav navbar-nav">
              <li class="active"><a href="#/">Home</a></li>
              <li><a ng-href="#/about">About</a></li>
              <li><a ng-href="#/">Contact</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
    <div ng-view=""></div>
    </div>

    <div class="footer">
      <div class="container">
        <p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
      </div>
    </div>


    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
     <script>
       !function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
       (A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
       r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
       }(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

       ga('create', 'UA-XXXXX-X');
       ga('send', 'pageview');
    </script>

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/main.js"></script>
        <script src="scripts/controllers/about.js"></script>
        <script src="scripts/controllers/popular.js"></script>
        <script src="scripts/services/serviceajax.js"></script>
        <!-- endbuild -->
</body>
</html>

Fichier popular.html

<div class="movies-container" id="top">
    <ul class="movies">
        <li ng-repeat="movie in movies">
            <div class="row">
                <div class="col-md-4">
                    <img ng-src="http://image.tmdb.org/t/p/w500{{movie.poster_path}}" width="200" height="300"/>
                </div>
                <div class="col-md-8">
                    <a ng-href="#/info/{{movie.id}}"><h4 ng-bind="movie.title"></h4></a>
                    <div class="row">
                        <label class="col-md-2">Année:</label>
                        <span class="col-md-8" ng-bind="movie.release_date | date:'yyyy'"></span>
                    </div>
                    <div class="row">
                        <label class="col-md-2">Note:</label>
                        <div class="row col-md-10">
                            <rating class="col-md-6" ng-model="movie.vote_average" max="10" readonly="true"></rating>
                            (<span ng-bind="movie.vote_count"></span>&nbs;pavis)
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
    <div class="row">
        <div class="col-md-9 col-md-offset-3">
            <pagination total-items="totalPages" ng-model="currentPage" ng-change="pageChanged()" items-per-page="20" max-size="5" boundary-links="true"></pagination>
        </div>
    </div>
</div>

Fichier App.js

'use strict';

/**
 * @ngdoc overview
 * @name cineAngularApp
 * @description
 * # cineAngularApp
 *
 * Main module of the application.
 */

 angular
   .module('cineAngularApp', [
     'ngRoute', 'ui.bootstrap'
   ])
   .config(function ($routeProvider) {
     $routeProvider
       .when('/popular', {
         templateUrl: 'views/popular.html',
         controller: 'PopularCtrl'
       })
       .otherwise({
         redirectTo: '/popular'
       });
   });

Fichier serviceajax.js

'use strict';

/**
 * @ngdoc service
 * @name cineAngularApp.serviceAjax
 * @description
 * # serviceAjax
 * Factory in the cineAngularApp.
 */
 angular.module('cineAngularApp')
 .factory('serviceAjax', function serviceAjax($http) {
   return{
       popular: function(page){
           return $http.get('http://localhost:3000/popular?page=' + page);
       }
   };
 });

Fichier popular.js

'use strict';

/**
 * @ngdoc function
 * @name cineAngularApp.controller:PopularCtrl
 * @description
 * # PopularCtrl
 * Controller of the cineAngularApp
 */
 angular.module('cineAngularApp')
 .controller('PopularCtrl', function ($scope, serviceAjax) {
       $scope.currentPage = 1;
       $scope.totalPages = 0;

       var loadMovies = function(){
           $scope.loading = true;
           serviceAjax.popular($scope.currentPage).success(function(data){
               $scope.movies = data.results;
               $scope.totalPages = data.total_pages;
               $scope.loading = false;
           });
       };

       $scope.pageChanged = function(){
           loadMovies();
       };
       loadMovies();
 });

-
Edité par LudoBoa 18 octobre 2017 à 11:24:24

Ludo Boa.

surname

30 octobre 2017 à 17:18:26

LudoBoa a écrit:

Bonjour.

J'ai un problème avec votre cour. J'ai suivi les instructions, mais rien n'y fait. Je n'ai rien qui s'affiche et je ne comprends pas d'où vient le problème.

J'ai comme erreur dans ma console:

Pouvez-vous m'aider ???

Voilà mes fichiers...

Fichier serviceajax.js
'use strict';

/**
 * @ngdoc service
 * @name cineAngularApp.serviceAjax
 * @description
 * # serviceAjax
 * Factory in the cineAngularApp.
 */
 angular.module('cineAngularApp')
 .factory('serviceAjax', function serviceAjax($http) {
   return{
       popular: function(page){
           return $http.get('http://localhost:3000/popular?page=' + page);
       }
   };
 });
-
Edité par LudoBoa 18 octobre 2017 à 11:24:24

Tu as essayé de changer le localhost:3000 en localhost:9000 dans serviceAjax.js?

Il me semble que ca m'a resolu cette erreur...

En revanche j'obtiens un 404 not found, mais d'un autre coté je comprends pas tres bien ou il va chercher les informations sur les films?

Pour revenir sur le cours lui-meme j'aurais voulu savoir pour quelle version d'angular il a été pensé? Il semble qu'il ait été écrit en 2015 et j'ai cru voir que $scope n'était plus indispensable (Mais attention j'y connais rien !!!).

-
Edité par surname 30 octobre 2017 à 17:19:48

echo2430

8 novembre 2017 à 11:48:44

Bonjour !

En fait le cours n'est plus tout à fait à jour : success n'éxistant plus il faut le remplacer par la fonction then() => taper then à la place de success dans le fichier popular.js tout simplement.

Ou presque simplement parce que nouvelle fonction = nouvelle reponse. Je veux dire par là qu'il faut rajouter le mot clef "data" avant le "data" qui se trouve dans la fonction.

Comme ici :

serviceAjax.popular($scope.currentPage).then(function(data){
               $scope.movies = data.data.results;
               $scope.totalPages = data.data.total_pages;
               $scope.loading = false;
           });

Et la ça fonctionne un tout petit peu mieux !

En effet bootstrap ne s'utilise pas tout a fait de la même façon non plus, c'est tout expliqué ici :

https://openclassrooms.com/forum/sujet/angular-et-chargement-dependance-ui-bootstrap

Peut être faut il changer de tuto ? Mais je ne suis pas souvent sur openclassroom et je ne sais pas comment remonter l'info :/

LudoBoa

30 novembre 2017 à 10:37:10

Salut.

Merci @echo2430.

Cela fonctionne en changeant le succes en .then et en ajoutant le data comme tu me la dis. Un grand merci à toi !!!

Ludo Boa.

<< 1 2 3 4 5

Cours AngularJS

× 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.

Cours AngularJS

"installation de bower

Installation de yo et de quelques générateurs

Cours AngularJS

Supprimer

Modérer

Signaler le message aux modérateurs