Partage
  • Partager sur Facebook
  • Partager sur Twitter

Cours AngularJS

    7 mars 2017 à 11:32:10

    Pourquoi ne pas m'avoir répondu à mon problème d'affichage html sous angular puisque vous m'avez répondu pour me dire de venir sur ce topic? :-)

    CelineChapalain a écrit:

    J'ai tenté également et vite abandonné. Dommage, j'aurai bien besoin d'apprendre ce langage. J'ai commencé par les tutos JS, je débute totalement, mais en glânant ça et la des infos sur le net, j'arrive à obtenir des résultats. Rien de transcendant, mais c'est faisable pour un débutant. Il est bien dommage de n'avoir qu'un seul tuto Angular sur OC. Je ne peux pas encore passer sur Angular 2 pour raisons pro, mais ça sera la prochaine étape.



    • Partager sur Facebook
    • Partager sur Twitter
      7 mars 2017 à 11:38:16

      Encore une fois : je n'ai pas la réponse. Je suis une simple utilisatrice, qui apprend, tout comme vous.
      • Partager sur Facebook
      • Partager sur Twitter
        7 mars 2017 à 12:09:20

        @celine chaptalain : je vous ai répondu sur l'autre topic :-)

        je mets qd même ici mon code problématique :

        j'obtiens une page blanche sur http://localhostavec ce code :

        index.html : <div class="container">
             
              <div ng-include="main.html" ng-controller="MainCtrl"></div>


            </div>

        main.html : <h1>Hello, World!</h1>

        Comment cela se fait il?

        A noter que c'est le seul code qu'il y a dans le cours, rien d'autre, pas d'autre code, pas de fichier js !

        Merci

        • Partager sur Facebook
        • Partager sur Twitter
          7 mars 2017 à 13:37:16

          Vous ne déclarez pas votre application Angular. Il faut un Ng app dans votre fichier et une déclaration comme quoi vous faites appel a un module Angular. Cette opération est précisée dans le cours Angular JS:)

          Par ailleurs il manque pas mal de choses.... le doctype des pages html entre autres...

          -
          Edité par CelineChapalain 7 mars 2017 à 14:43:39

          • Partager sur Facebook
          • Partager sur Twitter
            7 mars 2017 à 15:32:17

            merci je vais essayer ng app.Effectivement c'est ds le cours angular mais en ce qui concerne le code que je vous ai écrit il n'a rien écrit en ce qui concerne ng app...

            Et en ce qui concerne le doctype, même sans doctype cela marche quand même quand on écrit que du code html

            P.S : sur quel site allez vous pour apprendre angular?

            sakuto m'a mis des liens à propos d'angular lci je pense que je vais aller là.

            Je ne savais même pas que angularjs et angular c'était deux choses différentes !

            Alors je me dis que ce que je voulais à la base c'est apprendre angular donc je vais peut etre aller sur le lien de sakuto...

            CelineChapalain a écrit:

            Vous ne déclarez pas votre application Angular. Il faut un Ng app dans votre fichier et une déclaration comme quoi vous faites appel a un module Angular. Cette opération est précisée dans le cours Angular JS:)

            Par ailleurs il manque pas mal de choses.... le doctype des pages html entre autres...


            -
            Edité par CelineChapalain il y a 44 minutes



            -
            Edité par IsabellePasvraideux 7 mars 2017 à 15:38:24

            • Partager sur Facebook
            • Partager sur Twitter
              7 mars 2017 à 15:47:27

              Ajouter Ng app ne sera pas suffisant. Vous devez aussi faire appel à angular JS via une balise Script. En ce qui concerne le doctype, même pour un exercice, je vous conseille de le mettre. Avez vous des bases en javascript ?

              Enfin, en ce qui concerne l'apprentissage d'Angular, j'ai trouvé des vidéos sur youtube permettant d'avoir des bases.

              • Partager sur Facebook
              • Partager sur Twitter
                7 mars 2017 à 15:57:16

                Dans le cours entier sur angularjs le formateur ne parle pas de faire appel à angularjs via une balise script.

                Je vous crois, mais c'est une erreur du formateur de ne pas en parler.

                Oui j'ai des bases en javascript.

                Quelle est la différence entre angularjs et angular?

                Quelles sont les videos utube?Si vous ne vous en rappelez pas c pas grave...

                CelineChapalain a écrit:

                Ajouter Ng app ne sera pas suffisant. Vous devez aussi faire appel à angular JS via une balise Script. En ce qui concerne le doctype, même pour un exercice, je vous conseille de le mettre. Avez vous des bases en javascript ?

                Enfin, en ce qui concerne l'apprentissage d'Angular, j'ai trouvé des vidéos sur youtube permettant d'avoir des bases.



                • Partager sur Facebook
                • Partager sur Twitter
                  7 mars 2017 à 16:14:53

                  C'est bien pour cela que la plupart des personnes ont lâché ce cours. Pour ma part, j'ai réussi a installer les dépendances malgré mes lacunes en ligne de commandes mais lorsque j'ai vu comment était découpé le cours et le manque de précisions sur certains points, j'ai stoppé.

                  Pour votre question sur Angular, en cherchant sur google :

                  A priori ça n'existe pas en tant que tel. Soit c'est Angular JS, soit c'est Angular2. Je pense que la personne qui vous a répondu a supposé que vous parliez de Angular 2, et que c'est pour cela qu'il vous a orienté vers Angular-CLI. ( Il est marqué que Angular-CLI se base sur Angular2).

                  Je n'avais pas plus d'infos que vous sur ce point, j'ai juste cherché les définitions.

                  Enfin pour les vidéos, pas de chaîne en particulier, a part peut être graffik art...

                  • Partager sur Facebook
                  • Partager sur Twitter
                    7 mars 2017 à 19:24:00

                    Un petit point d'explication sur Angular : http://angularjs.blogspot.be/2016/12/ok-let-me-explain-its-going-to-be.html
                    • Partager sur Facebook
                    • Partager sur Twitter

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

                      8 mars 2017 à 19:21:52

                      @celinechapalain:

                      Merci.

                      En ce qui concerne le cours angularjs de ce site, moi non plus je n'en suis pas contente car effectivement il y a beaucoup de choses que le formateur saute,comme lier angular avec une balise script.

                      Ce qui est quand même primordial.

                      Je trouve dommage que sur ce site ce cours soit si mauvais et nous perde autant...

                      @sakuto :

                      Merci pour le lien je vais aller y jeter un coup d'oeil...

                      -
                      Edité par IsabellePasvraideux 8 mars 2017 à 19:25:00

                      • Partager sur Facebook
                      • Partager sur Twitter
                        9 mars 2017 à 10:05:12

                        IsabellePasvraideux a écrit:

                        @celinechapalain:

                        Merci.

                        En ce qui concerne le cours angularjs de ce site, moi non plus je n'en suis pas contente car effectivement il y a beaucoup de choses que le formateur saute,comme lier angular avec une balise script.

                        Ce qui est quand même primordial.

                        Je trouve dommage que sur ce site ce cours soit si mauvais et nous perde autant...

                        @sakuto :

                        Merci pour le lien je vais aller y jeter un coup d'oeil...

                        -
                        Edité par IsabellePasvraideux il y a environ 14 heures


                        Mais du coup, avez vous résolu vos problèmes ? Si c'est le cas, il faut clore vos posts, sinon ça porte à confusion. Avez vous réussi a afficher votre H1 en liant Javascript et en ajoutant ng app ?
                        • Partager sur Facebook
                        • Partager sur Twitter
                          12 mars 2017 à 15:12:50

                          Les problèmes que j'ai avec le script pour rattacher angular, c'est que je sais comment faire avec jquery et bootstrap ou je lie avec bootsrap.min.css ou avec javascript, mais avec angular je ne sais pas quel fichier lier et je ne sais pas si je dois télécharger angular 1 ou angular2

                          CelineChapalain a écrit:

                          IsabellePasvraideux a écrit:

                          @celinechapalain:

                          Merci.

                          En ce qui concerne le cours angularjs de ce site, moi non plus je n'en suis pas contente car effectivement il y a beaucoup de choses que le formateur saute,comme lier angular avec une balise script.

                          Ce qui est quand même primordial.

                          Je trouve dommage que sur ce site ce cours soit si mauvais et nous perde autant...

                          @sakuto :

                          Merci pour le lien je vais aller y jeter un coup d'oeil...

                          -
                          Edité par IsabellePasvraideux il y a environ 14 heures


                          Mais du coup, avez vous résolu vos problèmes ? Si c'est le cas, il faut clore vos posts, sinon ça porte à confusion. Avez vous réussi a afficher votre H1 en liant Javascript et en ajoutant ng app ?



                          -
                          Edité par IsabellePasvraideux 12 mars 2017 à 15:13:10

                          • Partager sur Facebook
                          • Partager sur Twitter
                            13 mars 2017 à 10:09:16

                            IsabellePasvraideux a écrit:

                            avec angular je ne sais pas quel fichier lier et je ne sais pas si je dois télécharger angular 1 ou angular2

                            Angular 1 ou 2, c'est en fonction du tutoriel que vous suivez.

                            Pour qu'angular fonctionne, il faut intégrer le fichier angular.js. C'est le seul fichier nécessaire au fonctionnement d'angular.

                            Après il faut ajouter les fichiers javascript du projet (ceux que vous écrivez).

                            En ce qui me concerne, ça ressemble à ça:

                            <body ng-app="appname">
                            	<script src="bower_components/angular/angular.js"></script>
                            	<script src="scripts/app.js"></script>
                            	<script src="scripts/controllers/login.js"></script>
                            	<!-- etc. -->
                            </body>
                            

                            Si vous avez un lien vers votre sujet, je veux bien aller y jetter un oeil.

                            -
                            Edité par Xia 13 mars 2017 à 10:10:07

                            • Partager sur Facebook
                            • Partager sur Twitter
                              13 mars 2017 à 10:14:00

                               IsabellePasvraideux a écrit:

                              Les problèmes que j'ai avec le script pour rattacher angular, c'est que je sais comment faire avec jquery et bootstrap ou je lie avec bootsrap.min.css ou avec javascript, mais avec angular je ne sais pas quel fichier lier et je ne sais pas si je dois télécharger angular 1 ou angular2

                              CelineChapalain a écrit:

                              IsabellePasvraideux a écrit:

                              @celinechapalain:

                              Merci.

                              En ce qui concerne le cours angularjs de ce site, moi non plus je n'en suis pas contente car effectivement il y a beaucoup de choses que le formateur saute,comme lier angular avec une balise script.

                              Ce qui est quand même primordial.

                              Je trouve dommage que sur ce site ce cours soit si mauvais et nous perde autant...

                              @sakuto :

                              Merci pour le lien je vais aller y jeter un coup d'oeil...

                              -
                              Edité par IsabellePasvraideux il y a environ 14 heures


                              Mais du coup, avez vous résolu vos problèmes ? Si c'est le cas, il faut clore vos posts, sinon ça porte à confusion. Avez vous réussi a afficher votre H1 en liant Javascript et en ajoutant ng app ?



                              -
                              Edité par IsabellePasvraideux il y a environ 18 heures

                              Si vous apprenez Angular2, vous téléchargez Angular2 depuis le site officiel. Sinon, ça reste AngularJs, dernière version....

                              • Partager sur Facebook
                              • Partager sur Twitter
                                14 mars 2017 à 19:02:59

                                @xia :

                                Merci.

                                Pr l'instant g laissé tomber ce tuto pr aller sur un tuto conseillé par un autre forumeur...

                                @celinechapalain :

                                Merci.

                                P.S : g lu un des liens que m'avait posté sakuto et la conclusion de l'auteur de l'article est : employer le terme angularjs pr angular1(vous aviez raison) et angular pr angular2!

                                • Partager sur Facebook
                                • Partager sur Twitter
                                  15 mars 2017 à 14:36:45

                                  Bonjour,

                                  Je suis en train d'apprendre AngularJS, et j'ai un souci sur une liste que je souhaite mettre à jour. Je m'explique, j'ai 2 boutons sur une page book.html. J'affiche une page contenant une liste de livre. Lorsque je clique sur le bouton 'add to kart' lié au livre, celui ci est retiré de la liste et ajouté sur une autre vue 'panier' (kart). Pour cette partie là, pas de problème. Par contre, quand je reviens sur ma liste de livre via le bouton book, je la retrouve telle que je l'avais avant d'en sélectionner (et d'en retirer) un item.

                                  Je précise que je débute en Javascript et donc aussi en Angular. Je pense que la solution est toute bête, mais là, elle m'échappe !

                                  Merci d'avance à ceux qui se pencheront sur mon code :

                                  book.html (injecté dans une vue 'index.html' sur laquelle est déclarée le ng-view ainsi que le ng app et les deux boutons : book et kart).

                                  <div class="container bookList" ng-controller="bookListCtrl">
                                  	<input type="text"  ng-model="searchBook.titre"/>
                                  	<ul>
                                  		<li ng-repeat ="book in books | filter : searchBook | orderBy : '-titre' ">
                                  			<img ng-src="imgs/{{book.id}}.jpeg"/>
                                  			<div>
                                  				<h3>{{book.titre}}</h3>
                                  				<p>{{book.nombre}}</p>
                                  				<ul class="list-rank">
                                  					<li> Rating : {{book.rang}}</li>
                                  					<li> Binding : {{book.binding}}</li>
                                  					<li> Publisher : {{book.edition}}</li>
                                  					<li> Released : {{book.date}}</li>
                                  				</ul>
                                  				<p>{{book.resume}}</p>
                                  				<button class="btn btn-info pull-right"  ng-click="addKartCtrl(book)" >Add to Kart</button>
                                  			</div>
                                  		</li>
                                  	</ul>
                                  	<div class="" ng-hide="mustshow">
                                  			<p>Le livre a bien été ajouté.</p>
                                  	</div>
                                  </div>

                                  Mon code angularJS :

                                  var myApp=angular.module('myApp', ["ngRoute"]);
                                  
                                  /***route***/
                                  
                                  myApp.config(['$locationProvider', function($locationProvider) { // URL !!!
                                    $locationProvider.hashPrefix('');
                                  }]);
                                  
                                  myApp.config(['$routeProvider', function($routeProvider){
                                  	$routeProvider
                                  		.when('/kart',{
                                  			templateUrl:'kart.html',
                                  			controller : 'kartCtrl'
                                  		})
                                  		.when('/book',{
                                  			templateUrl:'book.html',
                                  			controller : 'bookListCtrl'
                                  		})
                                  		.otherwise({
                                              redirectTo: '/index.html'
                                          });
                                  }]);
                                  
                                  /*** Service**/
                                  myApp.service("kartService", function(){
                                  
                                  		var kartList=[];
                                  		
                                  		this.addKart = function (book){
                                  			kartList.push(book);
                                  		};
                                  		this.showKart = function(){
                                  			return kartList;
                                  		}
                                  });
                                  
                                  
                                  /***Controllers**/
                                  myApp.controller('HeaderCtrl', function($scope){
                                  	$scope.appDetails = {
                                  		title: "BooKart",
                                  		tagline: "We have 1 million books for you"
                                  	};
                                  });
                                  
                                  myApp.controller('bookListCtrl', function($scope, kartService){
                                  	$scope.books = [
                                  		{ id: "adultery", titre : "Adultery", nombre : "205", rang : "4", binding : "Paperback", edition : "Random House India", date : "12-08-2014", resume : "Despite the tumor-shrinking medical miracle that has bought her a few years, Hazel has never been anything but terminal, her final chapter inscribed upon diagnosis. But when a gorgeous plot twist n...  "},
                                  		{ id :"geronimo", titre : "Geronimo Stilton Spacemice#2 : You're Mine, Captain!", nombre : "168", rang : "5", binding : "Paperback", edition : "Scholastic", date : "01-07-2014", resume : "Geronimo Stilton meets outer space in this cosmically fun spin-off series!Meet Geronimo StiltonixHe is a spacemouse - the Geronimo Stilton of a parallel universe! He is captain of the spaceship Mou.."},
                                  		{ id :"life-or-death",  titre : "Life or Death", nombre : "339", rang : "4", binding : "Hardcover", edition : "Hachette India", date : "01-04-2014", resume : "Why would a man escape from prison the day before he's due to be released? Audie Palmer has spent a decade in prison for an armed robbery in which four people died, including two of his gang. Five..."},
                                  		{ id :"playing",  titre : "Playing It My Way : My Autobiography", nombre : "599", rang : "5", binding : "Hardcover", edition : "Hodder & Stoughton", date : "01-08-2014", resume : "I knew that if I agreed to write my story, I would have to be completely honest, as thats the way I have always played the game and that would mean talking about a number of things I have not addr..."},
                                  		{id : "the-fault",  titre : "The Fault in Our Stars", nombre : "227", rang : "4.5", binding : "Paperback", edition : "Penguin Books Ltd", date : "25-01-2013", resume : "Despite the tumor-shrinking medical miracle that has bought her a few years, Hazel has never been anything but terminal, her final chapter inscribed upon diagnosis. But when a gorgeous plot twist n..."},
                                  		{id :"wings-of-fire",  titre : "Wings of Fire: An Autobiography", nombre : "124", rang : "5", binding : "Paperback", edition : ": Universities Press", date : "25-08-2000", resume : "Wings of Fire traces the life and times of India's former president A.P.J. Abdul Kalam. It gives a glimpse of his childhood as well as his growth as India's Missile Man. Summary of the Book Wings..."}
                                  	];	
                                  
                                  	
                                  	$scope.mustshow=true;
                                  	
                                  	$scope.addKartCtrl= function(book){
                                  		kartService.addKart(book);		
                                  		$scope.mustshow=false;
                                  		$scope.books.splice($scope.books.indexOf(book),1);
                                  		console.log($scope.books);
                                  	}
                                  });
                                  
                                  myApp.controller('kartCtrl', function($scope, kartService){		
                                  		$scope.kartList = kartService.showKart();
                                  });
                                  var myApp=angular.module('myApp', ["ngRoute"]);
                                  
                                  /***route***/
                                  
                                  myApp.config(['$locationProvider', function($locationProvider) { // URL !!!
                                    $locationProvider.hashPrefix('');
                                  }]);
                                  
                                  myApp.config(['$routeProvider', function($routeProvider){
                                  	$routeProvider
                                  		.when('/kart',{
                                  			templateUrl:'kart.html',
                                  			controller : 'kartCtrl'
                                  		})
                                  		.when('/book',{
                                  			templateUrl:'book.html',
                                  			controller : 'bookListCtrl'
                                  		})
                                  		.otherwise({
                                              redirectTo: '/index.html'
                                          });
                                  }]);
                                  
                                  /*** Service**/
                                  myApp.service("kartService", function(){
                                  
                                  		var kartList=[];
                                  		
                                  		this.addKart = function (book){
                                  			kartList.push(book);
                                  		};
                                  		this.showKart = function(){
                                  			return kartList;
                                  		}
                                  });
                                  
                                  
                                  /***Controllers**/
                                  myApp.controller('HeaderCtrl', function($scope){
                                  	$scope.appDetails = {
                                  		title: "BooKart",
                                  		tagline: "We have 1 million books for you"
                                  	};
                                  });
                                  
                                  myApp.controller('bookListCtrl', function($scope, kartService){
                                  	$scope.books = [
                                  		{ id: "adultery", titre : "Adultery", nombre : "205", rang : "4", binding : "Paperback", edition : "Random House India", date : "12-08-2014", resume : "Despite the tumor-shrinking medical miracle that has bought her a few years, Hazel has never been anything but terminal, her final chapter inscribed upon diagnosis. But when a gorgeous plot twist n...  "},
                                  		{ id :"geronimo", titre : "Geronimo Stilton Spacemice#2 : You're Mine, Captain!", nombre : "168", rang : "5", binding : "Paperback", edition : "Scholastic", date : "01-07-2014", resume : "Geronimo Stilton meets outer space in this cosmically fun spin-off series!Meet Geronimo StiltonixHe is a spacemouse - the Geronimo Stilton of a parallel universe! He is captain of the spaceship Mou.."},
                                  		{ id :"life-or-death",  titre : "Life or Death", nombre : "339", rang : "4", binding : "Hardcover", edition : "Hachette India", date : "01-04-2014", resume : "Why would a man escape from prison the day before he's due to be released? Audie Palmer has spent a decade in prison for an armed robbery in which four people died, including two of his gang. Five..."},
                                  		{ id :"playing",  titre : "Playing It My Way : My Autobiography", nombre : "599", rang : "5", binding : "Hardcover", edition : "Hodder & Stoughton", date : "01-08-2014", resume : "I knew that if I agreed to write my story, I would have to be completely honest, as thats the way I have always played the game and that would mean talking about a number of things I have not addr..."},
                                  		{id : "the-fault",  titre : "The Fault in Our Stars", nombre : "227", rang : "4.5", binding : "Paperback", edition : "Penguin Books Ltd", date : "25-01-2013", resume : "Despite the tumor-shrinking medical miracle that has bought her a few years, Hazel has never been anything but terminal, her final chapter inscribed upon diagnosis. But when a gorgeous plot twist n..."},
                                  		{id :"wings-of-fire",  titre : "Wings of Fire: An Autobiography", nombre : "124", rang : "5", binding : "Paperback", edition : ": Universities Press", date : "25-08-2000", resume : "Wings of Fire traces the life and times of India's former president A.P.J. Abdul Kalam. It gives a glimpse of his childhood as well as his growth as India's Missile Man. Summary of the Book Wings..."}
                                  	];	
                                  
                                  	
                                  	$scope.mustshow=true;
                                  	
                                  	$scope.addKartCtrl= function(book){
                                  		kartService.addKart(book);		
                                  		$scope.mustshow=false;
                                  		$scope.books.splice($scope.books.indexOf(book),1);
                                  		console.log($scope.books);
                                  	}
                                  });
                                  
                                  myApp.controller('kartCtrl', function($scope, kartService){		
                                  		$scope.kartList = kartService.showKart();
                                  });
                                  


                                  je ne joins pas le 'kart.html ', de son côté ça fonctionne et le tableau crée reste affiché (sauf si je rafraichis la page).

                                  Merci d'avance !

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    16 mars 2017 à 9:28:05

                                    Comme la liste de livres dans le panier (cart) est disponible dans ton service kartService, tu peux ajouter un filtre dans le ng-repeat pour ne garder que ceux qui ne sont pas dans cette liste.

                                    Note:

                                    • il vaut peut-être mieux utiliser un identifiant numérique pour les livres, ça facilite les comparaisons et ce n'est pas sujet à changement.
                                    • Tu as beaucoup de controlleurs définis dans le même fichier, tu peux le fractionner en plusieurs, tu t'y retrouvera plus facilement, surtout si ton application est amenée à grossir.

                                    -
                                    Edité par Xia 16 mars 2017 à 9:54:35

                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      16 mars 2017 à 9:54:32

                                      Xia a écrit:

                                      Comme la liste de livres dans le panier (cart), tu peux ajouter un filtre dans le ng-repeat pour ne garder que ceux qui ne sont pas dans cette liste.

                                      Note:

                                      • il vaut peut-être mieux utiliser un identifiant numérique pour les livres, ça facilite les comparaisons et ce n'est pas sujet à changement.
                                      • Tu as beaucoup de controlleurs définis dans le même fichier, tu peux le fractionner en plusieurs, tu t'y retrouvera plus facilement, surtout si ton application est amenée à grossir.

                                      -
                                      Edité par Xia il y a 17 minutes

                                      Je te remercie ! Oui, c'est bien cart, mais j'ai fait une faute au départ et finalement je n'ai pas cherché à la corriger.

                                      Je ne suis pas familière avec le MVC, je sais qu'il vaut mieux un fichier par controller (sauf si le controller est vraiment minime), donc c'est prévu. Pour l'instant j'en suis au stade du 'comment ça marche ?' et j'apprends de zéro donc j'essaie déja dans un premier temps d'obtenir des résultats et de comprendre ce que je fais.
                                      Je vais essayer ta piste :)

                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        16 mars 2017 à 12:59:38

                                        Bonjour,

                                        mon code est le suivant :

                                        index.html : <!DOCTYPE html>
                                        <html>
                                            <head>
                                                <script src="libs/angular.js"></script>
                                                <script src="app.js"></script>
                                                
                                                <script src="controllers/mainController.js"></script>
                                                
                                            </head>
                                            <body>
                                            <div ng-app="app" ng-controller="mainController">{{$scope.message}}
                                        </div>
                                            
                                            </body>
                                        </html>

                                        mainController.js:

                                        angular.module("app").controller("mainController",function($scope){
                                        $scope.message = "hello depuis le controller";});

                                        app.js:

                                        angular.module("app",[]);

                                        or je n'obtiens rien à l'affichage : quelqu'un peut il m'aider s'il vous plait?

                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          16 mars 2017 à 14:18:37

                                          IsabellePasvraideux a écrit:

                                          Bonjour,

                                          mon code est le suivant :

                                          index.html : <!DOCTYPE html>
                                          <html>
                                              <head>
                                                  <script src="libs/angular.js"></script>
                                                  <script src="app.js"></script>
                                                  
                                                  <script src="controllers/mainController.js"></script>
                                                  
                                              </head>
                                              <body>
                                              <div ng-app="app" ng-controller="mainController">{{$scope.message}}
                                          </div>
                                              
                                              </body>
                                          </html>

                                          mainController.js:

                                          angular.module("app").controller("mainController",function($scope){
                                          $scope.message = "hello depuis le controller";});

                                          app.js:

                                          angular.module("app",[]);

                                          or je n'obtiens rien à l'affichage : quelqu'un peut il m'aider s'il vous plait?

                                          En enlevant $scope dans ta vue, ça marche. Tu écris simplement : {{message}}. Je ne suis pas experte en JS, encore moins en Angular, mais pour moi $scope ne peut pas être sorti de ton controller. (A ce que je comprends :) )

                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                            16 mars 2017 à 14:49:08

                                            Merci :-) j''ai vérifié en corrigeant ce que tu m'as dit et effectivement ça marche !

                                            Ce que je ne comprends pas c'est que c'était un tuto video et  j'avais suivi en faisant les memes choses que lui et lui ça marche (avec $scope.message) et pas moi!!!

                                            P.S : j'ai suivi un autre tuto(qu'on va appeler  tuto2)   avec lequel j'avais compris le fontionnement de leur angular(le code angular du tuto2)  et là avec le tuto ou il y avait l'erreur $scope. message (tuto1)  ils utilisent dans ce tuto(tuto1) "  .controller" ,ce qui n'était pas utilisé dans le tuto2  ; dans le tuto2  ils utilisent un controller non nommé controller(il a un nom quelconque.js) et qui ne se trouve pas non plus dans un dossier controller, ils l'utilisent simplement en appelant un  fichier javascript qui est en fait leur controller.

                                            De +, ils n'utilisent pas non plus de fichier ou dossier app, ce qui fait que je suis un peu  perdue...


                                            CelineChapalain a écrit:

                                            IsabellePasvraideux a écrit:

                                            Bonjour,

                                            mon code est le suivant :

                                            index.html : <!DOCTYPE html>
                                            <html>
                                                <head>
                                                    <script src="libs/angular.js"></script>
                                                    <script src="app.js"></script>
                                                    
                                                    <script src="controllers/mainController.js"></script>
                                                    
                                                </head>
                                                <body>
                                                <div ng-app="app" ng-controller="mainController">{{$scope.message}}
                                            </div>
                                                
                                                </body>
                                            </html>

                                            mainController.js:

                                            angular.module("app").controller("mainController",function($scope){
                                            $scope.message = "hello depuis le controller";});

                                            app.js:

                                            angular.module("app",[]);

                                            or je n'obtiens rien à l'affichage : quelqu'un peut il m'aider s'il vous plait?

                                            En enlevant $scope dans ta vue, ça marche. Tu écris simplement : {{message}}. Je ne suis pas experte en JS, encore moins en Angular, mais pour moi $scope ne peut pas être sorti de ton controller. (A ce que je comprends :) )



                                            • Partager sur Facebook
                                            • Partager sur Twitter
                                              16 mars 2017 à 14:55:50

                                              IsabellePasvraideux a écrit:

                                              Merci :-) j''ai vérifié en corrigeant ce que tu m'as dit et effectivement ça marche !

                                              Ce que je ne comprends pas c'est que c'était un tuto video et  j'avais suivi en faisant les memes choses que lui et lui ça marche (avec $scope.message) et pas moi!!!

                                              P.S : j'ai suivi un autre tuto(qu'on va appeler  tuto2)   avec lequel j'avais compris le fontionnement de leur angular(le code angular du tuto2)  et là avec le tuto ou il y avait l'erreur $scope. message (tuto1)  ils utilisent dans ce tuto(tuto1) "  .controller" ,ce qui n'était pas utilisé dans le tuto2  ; dans le tuto2  ils utilisent un controller non nommé controller(il a un nom quelconque.js) et qui ne se trouve pas non plus dans un dossier controller, ils l'utilisent simplement en appelant un  fichier javascript qui est en fait leur controller.

                                              De +, ils n'utilisent pas non plus de fichier ou dossier app, ce qui fait que je suis un peu  perdue...



                                              Il est probable que ça dépende aussi des versions d'AngularJs utilisées dans le tuto... Par contre, pense vraiment à cloturer tous tes posts sur le sujet et qui n'ont plus lieu d'être. Je viens de voir que tu as posé exactement la même question sur un post dédié. Il vaut mieux le mettre comme résolu en expliquant comment il a été résolu, ça évitera que des personnes se penchent sur ton souci alors qu'il n'est plus d'actualité. Tu as quelle version d'angular ? (je suis sur la 1.6.2 par ex).

                                              • Partager sur Facebook
                                              • Partager sur Twitter
                                                16 mars 2017 à 15:04:51

                                                Que quoi  dépende de la version?Le fait qu'ils utilisent ".controller"?

                                                La version que j'ai  est 1.6.3

                                                P.S : je vais aller cloturer l'autre topic...

                                                CelineChapalain a écrit:

                                                IsabellePasvraideux a écrit:

                                                Merci :-) j''ai vérifié en corrigeant ce que tu m'as dit et effectivement ça marche !

                                                Ce que je ne comprends pas c'est que c'était un tuto video et  j'avais suivi en faisant les memes choses que lui et lui ça marche (avec $scope.message) et pas moi!!!

                                                P.S : j'ai suivi un autre tuto(qu'on va appeler  tuto2)   avec lequel j'avais compris le fontionnement de leur angular(le code angular du tuto2)  et là avec le tuto ou il y avait l'erreur $scope. message (tuto1)  ils utilisent dans ce tuto(tuto1) "  .controller" ,ce qui n'était pas utilisé dans le tuto2  ; dans le tuto2  ils utilisent un controller non nommé controller(il a un nom quelconque.js) et qui ne se trouve pas non plus dans un dossier controller, ils l'utilisent simplement en appelant un  fichier javascript qui est en fait leur controller.

                                                De +, ils n'utilisent pas non plus de fichier ou dossier app, ce qui fait que je suis un peu  perdue...



                                                Il est probable que ça dépende aussi des versions d'AngularJs utilisées dans le tuto... Par contre, pense vraiment à cloturer tous tes posts sur le sujet et qui n'ont plus lieu d'être. Je viens de voir que tu as posé exactement la même question sur un post dédié. Il vaut mieux le mettre comme résolu en expliquant comment il a été résolu, ça évitera que des personnes se penchent sur ton souci alors qu'il n'est plus d'actualité. Tu as quelle version d'angular ? (je suis sur la 1.6.2 par ex).



                                                • Partager sur Facebook
                                                • Partager sur Twitter
                                                  16 mars 2017 à 15:11:30

                                                  IsabellePasvraideux a écrit:

                                                  Que quoi  dépende de la version?Le fait qu'ils utilisent ".controller"?

                                                  La version que j'ai  est 1.6.3

                                                  P.S : je vais aller cloturer l'autre topic...

                                                  CelineChapalain a écrit:

                                                  IsabellePasvraideux a écrit:

                                                  Merci :-) j''ai vérifié en corrigeant ce que tu m'as dit et effectivement ça marche !

                                                  Ce que je ne comprends pas c'est que c'était un tuto video et  j'avais suivi en faisant les memes choses que lui et lui ça marche (avec $scope.message) et pas moi!!!

                                                  P.S : j'ai suivi un autre tuto(qu'on va appeler  tuto2)   avec lequel j'avais compris le fontionnement de leur angular(le code angular du tuto2)  et là avec le tuto ou il y avait l'erreur $scope. message (tuto1)  ils utilisent dans ce tuto(tuto1) "  .controller" ,ce qui n'était pas utilisé dans le tuto2  ; dans le tuto2  ils utilisent un controller non nommé controller(il a un nom quelconque.js) et qui ne se trouve pas non plus dans un dossier controller, ils l'utilisent simplement en appelant un  fichier javascript qui est en fait leur controller.

                                                  De +, ils n'utilisent pas non plus de fichier ou dossier app, ce qui fait que je suis un peu  perdue...



                                                  Il est probable que ça dépende aussi des versions d'AngularJs utilisées dans le tuto... Par contre, pense vraiment à cloturer tous tes posts sur le sujet et qui n'ont plus lieu d'être. Je viens de voir que tu as posé exactement la même question sur un post dédié. Il vaut mieux le mettre comme résolu en expliquant comment il a été résolu, ça évitera que des personnes se penchent sur ton souci alors qu'il n'est plus d'actualité. Tu as quelle version d'angular ? (je suis sur la 1.6.2 par ex).

                                                  Non, je pensais plus a l'utilisation de $scope dans la vue. Peut être que dans les précédentes versions, le binding se faisait avec cette déclaration ;) Je pense que si tu suit des tutos crées par des personnes différentes, les versions d'AngularJS peuvent varier et les déclarations de dépendances, directives etc... différer. Mais il est difficile de trouver des sources libres et accessibles aux débutants, donc nous n'avons pas trop le choix je pense ^^

                                                  Après, je te donne mon opinion mais je peux me tromper :p



                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                    16 mars 2017 à 15:23:08

                                                    merci j'ai aussi pensé que ct peut etre la version du utubeur qui différait de la mienne...

                                                    Par contre g vu que ds ton code tu utilises " . controller"  est ce la façon d'écrire la plus récente, comparée à celle qui n'utilise pas cette dépendance?

                                                    CelineChapalain a écrit:

                                                    IsabellePasvraideux a écrit:

                                                    Que quoi  dépende de la version?Le fait qu'ils utilisent ".controller"?

                                                    La version que j'ai  est 1.6.3

                                                    P.S : je vais aller cloturer l'autre topic...

                                                    CelineChapalain a écrit:

                                                    IsabellePasvraideux a écrit:

                                                    Merci :-) j''ai vérifié en corrigeant ce que tu m'as dit et effectivement ça marche !

                                                    Ce que je ne comprends pas c'est que c'était un tuto video et  j'avais suivi en faisant les memes choses que lui et lui ça marche (avec $scope.message) et pas moi!!!

                                                    P.S : j'ai suivi un autre tuto(qu'on va appeler  tuto2)   avec lequel j'avais compris le fontionnement de leur angular(le code angular du tuto2)  et là avec le tuto ou il y avait l'erreur $scope. message (tuto1)  ils utilisent dans ce tuto(tuto1) "  .controller" ,ce qui n'était pas utilisé dans le tuto2  ; dans le tuto2  ils utilisent un controller non nommé controller(il a un nom quelconque.js) et qui ne se trouve pas non plus dans un dossier controller, ils l'utilisent simplement en appelant un  fichier javascript qui est en fait leur controller.

                                                    De +, ils n'utilisent pas non plus de fichier ou dossier app, ce qui fait que je suis un peu  perdue...



                                                    Il est probable que ça dépende aussi des versions d'AngularJs utilisées dans le tuto... Par contre, pense vraiment à cloturer tous tes posts sur le sujet et qui n'ont plus lieu d'être. Je viens de voir que tu as posé exactement la même question sur un post dédié. Il vaut mieux le mettre comme résolu en expliquant comment il a été résolu, ça évitera que des personnes se penchent sur ton souci alors qu'il n'est plus d'actualité. Tu as quelle version d'angular ? (je suis sur la 1.6.2 par ex).

                                                    Non, je pensais plus a l'utilisation de $scope dans la vue. Peut être que dans les précédentes versions, le binding se faisait avec cette déclaration ;) Je pense que si tu suit des tutos crées par des personnes différentes, les versions d'AngularJS peuvent varier et les déclarations de dépendances, directives etc... différer. Mais il est difficile de trouver des sources libres et accessibles aux débutants, donc nous n'avons pas trop le choix je pense ^^

                                                    Après, je te donne mon opinion mais je peux me tromper :p





                                                    • Partager sur Facebook
                                                    • Partager sur Twitter
                                                      16 mars 2017 à 15:32:43

                                                      Je suis désolée, mais je ne comprends pas ta question... Parce que toi aussi tu utilises .controller :) A la différence que j'utilise une variable pour éviter de retaper angular.module('... Etc.


                                                      IsabellePasvraideux a écrit:

                                                      merci j'ai aussi pensé que ct peut etre la version du utubeur qui différait de la mienne...

                                                      Par contre g vu que ds ton code tu utilises " . controller"  est ce la façon d'écrire la plus récente, comparée à celle qui n'utilise pas cette dépendance?

                                                      CelineChapalain a écrit:

                                                      IsabellePasvraideux a écrit:

                                                      Que quoi  dépende de la version?Le fait qu'ils utilisent ".controller"?

                                                      La version que j'ai  est 1.6.3

                                                      P.S : je vais aller cloturer l'autre topic...

                                                      CelineChapalain a écrit:

                                                      IsabellePasvraideux a écrit:

                                                      Merci :-) j''ai vérifié en corrigeant ce que tu m'as dit et effectivement ça marche !

                                                      Ce que je ne comprends pas c'est que c'était un tuto video et  j'avais suivi en faisant les memes choses que lui et lui ça marche (avec $scope.message) et pas moi!!!

                                                      P.S : j'ai suivi un autre tuto(qu'on va appeler  tuto2)   avec lequel j'avais compris le fontionnement de leur angular(le code angular du tuto2)  et là avec le tuto ou il y avait l'erreur $scope. message (tuto1)  ils utilisent dans ce tuto(tuto1) "  .controller" ,ce qui n'était pas utilisé dans le tuto2  ; dans le tuto2  ils utilisent un controller non nommé controller(il a un nom quelconque.js) et qui ne se trouve pas non plus dans un dossier controller, ils l'utilisent simplement en appelant un  fichier javascript qui est en fait leur controller.

                                                      De +, ils n'utilisent pas non plus de fichier ou dossier app, ce qui fait que je suis un peu  perdue...



                                                      Il est probable que ça dépende aussi des versions d'AngularJs utilisées dans le tuto... Par contre, pense vraiment à cloturer tous tes posts sur le sujet et qui n'ont plus lieu d'être. Je viens de voir que tu as posé exactement la même question sur un post dédié. Il vaut mieux le mettre comme résolu en expliquant comment il a été résolu, ça évitera que des personnes se penchent sur ton souci alors qu'il n'est plus d'actualité. Tu as quelle version d'angular ? (je suis sur la 1.6.2 par ex).

                                                      Non, je pensais plus a l'utilisation de $scope dans la vue. Peut être que dans les précédentes versions, le binding se faisait avec cette déclaration ;) Je pense que si tu suit des tutos crées par des personnes différentes, les versions d'AngularJS peuvent varier et les déclarations de dépendances, directives etc... différer. Mais il est difficile de trouver des sources libres et accessibles aux débutants, donc nous n'avons pas trop le choix je pense ^^

                                                      Après, je te donne mon opinion mais je peux me tromper :p







                                                      • Partager sur Facebook
                                                      • Partager sur Twitter
                                                        16 mars 2017 à 15:40:14

                                                        Il serait intéressant de créer un nouveau sujet pour poser vos questions, un sujet servant à une question PRECISE. Poster ici est utile si vous avez un problème avec le contenu du cours, ce qui ne semble pas être le cas ici.

                                                        Nul besoin non plus de citer l'intégralité des messages chaque fois, avez-vous vu la taille de votre message juste pour une phrase ?

                                                        • Partager sur Facebook
                                                        • Partager sur Twitter

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

                                                          16 mars 2017 à 15:42:07

                                                          En effet. Pour ma part, je vais modérer mes citations ^^

                                                          • Partager sur Facebook
                                                          • Partager sur Twitter
                                                            16 mars 2017 à 15:49:20

                                                            Je vais créer un sujet ".controller " dans angular pour continuer notre discussion...;-)

                                                            CelineChapalain a écrit:

                                                            Je suis désolée, mais je ne comprends pas ta question... Parce que toi aussi tu utilises .controller :) A la différence que j'utilise une variable pour éviter de retaper angular.module('... Etc.


                                                            • Partager sur Facebook
                                                            • Partager sur Twitter
                                                              22 avril 2017 à 13:05:38

                                                              Bonjour,

                                                              j'ai commencé à regarder les noms des tutos dont tu parles ; en fait j'aimerais aller au tuto ou il commence à parler de browser,grunt,yeman..etc...mais sur les titres des tutos il n'y fait pas référence ; quulqu'un peut il m'aider svp?

                                                              Lucky13 a écrit:

                                                              Hello Philippe MEYER

                                                              Je me suis fait la même réflexion, le cours me semble fait pour ceux qui ont déjà mis un pied sur ce Framework, pas assez détaillé, on passe les étapes trop vite.

                                                              Perso j' ai suivi ce tuto vidéo de 24 mini chapitres en plus de ceux que l'on trouve sur la toile. Je le trouve adapté pour commencer, l'auteur prend son temps et explique plutôt bien. Il faut juste regarder la doc officielle pour être à jour.

                                                              Et bien bonne continuation à toi...



                                                              -
                                                              Edité par IsabellePasvraideux 22 avril 2017 à 13:27:29

                                                              • Partager sur Facebook
                                                              • Partager sur Twitter

                                                              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.
                                                              • Editeur
                                                              • Markdown