Affichage du jombotron avec angular js

Version imprimable

bonjour
Est que vous pouvez me répondre pourquoi mon code ne marche pas sachant que je voudrait une page HTML diviser en des "<div>" et contrôler la visibilité à partir d'un contrôleur avec Angularjs S'il vous aidez pour que ça fonctionne.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
<head>
<title>Puissance4</title>
<style type="css/text" src="mouvement.css"></style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
</head>
<body>
<div  ng-controller="WelcomeControllor" ng-show="ShowPage" >
<div class="jumbotron">
<div class="container">
		<h1>Welcome</h1>
		<button ng-click="ClickFunction()">Play</button>
</div>
</div>
</div>
<!-- <div ng-controller="GameBoard" ng-show="pageGame"></div>
<div   ng-controllor="gameOver" ng-show="pageLose"> </div>
<div  ng-controllor="Congratulation" ng-show="pageCongratulation" ></div>  -->
<!--  <canvas id="mycanvas" width="500" height="500"> </canvas> 
 --> 
 <script type="text/javaScript">
var ShowPage=true
function WelcomeControllor {
$scope.ClickFunction=function(){
ShowPage=false;
}});
/*$(document).ready(function(){
  $("#mycanvas").click(function(){
    $( "#mycanvas").slideDown();
  });
});*/
</script>
</body>
</html>

19/04/2015, 17h09
slim

Bonjour,

Pourrais-tu dire explicitement ce qui ne fonctionne pas ?

Il faudrait aussi reproduire ton cas dans un jsfiddle ou plunker. Ce qui est beaucoup plus facile pour nous à analyser.

Essaies d'éviter de mettre du Jquery avec AngularJS... parce que tout ce que tu gère en JQuery est hors scope dans AngularJS !

J'ai relevé deux erreurs :
1. angular n'est pas déclaré sur ta page (ng-app) : angular.module('myapp') -> cf. documentation
2. ton controleur n'est pas injecté dans un module angular -> cf. documentation

merci pour votre réponse
je veux faire le jeu puissance 4 avec angularjs
et ce jeu doit contenir page d’accueil "welcome page" une fois que le boutton "play game" est cliqué cet page disparait et le "game board" apparait et ensuite selon l'etat "gagnant/perdant" une page de fin de partie apparait.
tout ce manipule en un page html mais je veux jouer la visibilité des <div> est ce que chaque étape doit avoir un controller ou je l'ai en un même

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bienvenue</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <style  src="mouvement.css"></style>
</head>
<body ng-app="myapp">
<div ng-controller="Puissance4Controller">
<div class="container">
  <div class="jumbotron" ng-show="etat">
  <h1>{{greeting}}</h2>
<div class="container">
	  </div>
       <center><h2>Play Power4 Game</h2><center>
	   <br/>
	     <button  id="btn" class="btn btn-default" ng-click="clickMe($event)">Play Game </button>  
  </div>
</div>
<div class="container" > 
<div class="jumbotron" ng-show="etat1">
<table width="100%" border="1">  
<tr ng-repeat="row in matrix">  
    <td ng-repeat="col in row">{{col.value}}</td>  
</tr>  
</table>
</div> 
 </div>
 <div class="container">
 <div class="jumbotron" ng-show="etat2">
 <button id="btn1" class="btn btn-default" ng-click="ClickToRestart($event)">Restart Game<button>
 </div>
</div>
<script type="text/javascript">
angular.module("myapp",[])
.controller("Puissance4Controller",function($scope){
$scope.etat=true;
$scope.greeting = 'Welcome';
$scope.clickMe = function() {
$scope.etat=false;
  }
  $scope.etat1=true; //debut de la partie
  if($scope.etat==false){
  $scope.matrice= function draw(){
 
  }
 
  /*function animate()*/
 
  //scope.etat1="false" fin de  la partie
  }
  //$scope.etat2=true; Gameover // fonction restart ClickToRestart($event)
  }
);
</script>
</body>
</html>

19/04/2015, 18h15
slim

Salut,

Pour répondre à ta question, il faudrait reprendre et expliquer plusieurs notions d'AngularJS (trop pour un post sur le forum). Je te conseillerai de faire le tuto officiel sur la page du framework : ici
Après, si tu as un problème spécifique, on pourra t'aider sans problème.

Et comme j'ai dis dans mon premier poste, tu pourrais mettre ton exemple dans un jsfiddle pour qu'on puisse le corriger facilement et dire exactement ce qui ne fonctionne pas.