Rediriger entre différentes pages en angular js

**tunisiano44** · 03/11/2016, 11h29

Salut, je fait faire une simple exemple pour dirigée entre différents page en angular js

voici code de l'exemple qui ne marche pas

code 1.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body ng-app="MonApp">
	  <div ng-view></div>
 
	  	<script type="text/javascript" src="js/angular.min.js"></script>
 
		<script src="js/angular-route.min.js"></script>
 
		<script type="text/javascript" src="js/for.js"></script>
 
 
</body>
</html>

code index.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<body ng-app="MonApp">
 
<div ng-controller="TestCtrl">
 
	<input type="text" placeholder="votre nom">
	<input type="text" votre prenom="votre prenom">
	<a href="#/for"><button ng-click="test()">envoyer</button></a>
 
 
</div>
 
			<script type="text/javascript" src="js/angular.min.js"></script>
 
		<script src="js/angular-route.min.js"></script>
 
		<script type="text/javascript" src="js/for.js"></script>
 
</body>
</html>

code for.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
	<head>
		<title>for</title>
	</head>
 
	<body ng-app="MonApp" >
 
		<div ng-controller="ForCtrl"> 
		<input type="text" placeholder="tapez votre valeur" ng-model="test">
		<button ng-click="calcul_factorielle()">Factorielle</button> <br>
		{{factorielle}}
		</div>
 
		<script type="text/javascript" src="js/angular.min.js"></script>
 
		<script src="js/angular-route.min.js"></script>
 
		<script type="text/javascript" src="js/for.js"></script>
 
	</body>
</html>

code for.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
var app = angular.module('MonApp', ['ngRoute'])
 
app.config(function($routeProvider) {
        $routeProvider
 
          .when('/',{templateUrl: 'for/for.html',controller: 'ForCtrl'})
          .when('/index',{templateUrl: 'for/index.html',controller: "TestCtrl"})
          .otherwise({redirectTo : '/'});
    });
 
app.controller('ForCtrl', function($scope) {
 
	$scope.calcul_factorielle = function(){
 
		var mm = 1;
		console.log(mm);
		for(i=2;i<=$scope.test;i++) {
			mm = mm * i;
		}
 
		$scope.factorielle = mm;
}
 
 
/* FIN DU CONTROLEUR */
 
 
});
 
 
app.controller('TestCtrl', function($scope) {
 
	$scope.test = function() {
		document.write("test");
	}
});

quelle est la solution pour la code est fonctionne et merci d'avance

**Marco46** · 03/11/2016, 11h45

quelle est la solution pour la code est fonctionne et merci d'avance

Comprendre l'architecture du framework avec lequel tu travailles.

Angular sert à écrire des SPA (Single Page Application).

Il n'y a qu'une seule page, qui peut contenir des vues.

Je te suggère de te plonger dans le documentation du routeur.

Invité · 03/11/2016, 19h46

Squelette de base d'un routing de vue avec angularjs, dans un simple fichier index.html:

Pour tester c'est ici

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html ng-app="monApp">
  <head>
   <meta charset="utf8" >
    <title>Squelette de base d application MVC Angular</title>
        <!-- CHARGEMENT DES LIBRAIRIES -->
        <!-- APPEL LIB ANGULAR -->
        <script type="text/javascript" src="angular-1.3.13/angular.min.js"></script>
        <script src="angular-route.min.js"></script>
        <script src="librairies/angular-locale_fr-fr.js"></script>
         <!-- CSS DE L APPLICATION -->
        <link href="app10.css" media="screen" rel="stylesheet" type="text/css" />
        <script>
 
        <!-- Déclaration des modules utilisés par l application MVC Angular, ngRoute est obligatoire pour router les vues : Les modules sont spécifiés entre Crochets, on en trouve des centaines sur internet, ils extendent les capacités d Angular, ce sont des librairies -->
         var monApp = angular.module('monApp',['ngRoute'])
 
        <!-- Configuration des vues et de leurs controleurs affiliés, avec ng-route . Note : Les vues peuvent partager le même controleur-->
        .config(function ($routeProvider, $locationProvider){
          $routeProvider
            .when('/accueil', {
              templateUrl: 'defaut.html',
              controller: 'accueilCtrl'
            })
            .when('/liste', {
              templateUrl: 'liste.html',
              controller: 'listeCtrl'
            })
            .when('/detail', {
              templateUrl: 'detail.html',
              controller: 'editDetailsCtrl'
            })
            .when('/statistiques', {
              templateUrl: 'stats.html',
              controller: 'stats'
            })
            .otherwise({redirectTo: '/accueil'});
        })
 
        <!-- Ci-dessous, les différents controleurs qui opèrent sur les vues, ils peuvent partager le modèle de data à l'aide d'une factory, à ce moment là, il faut inclure la factory dans les paramêtres du controleur.. Généralement, les controleurs sont dans un répertoire séparé appellé "controllers" pour être à la norme Grunt ou pour que tout sois plus clair -->
 
        <!-- LE CONTROLEUR DE L ACCUEIL -->
        .controller("accueilCtrl", function($scope) {
            $scope.bonjour = "Mr Durand";
        <!-- FIN DU CONTROLEUR -->
        })
 
        <!-- LE CONTROLEUR DE LA LISTE -->
        .controller("listeCtrl", function($scope) {
        <!-- FIN DU CONTROLEUR -->
        })
 
        <!-- LE CONTROLEUR D UN OBJET A EDITER -->
        .controller("editDetailsCtrl", function($scope) {
        <!-- FIN DU CONTROLEUR -->
        })
 
        <!-- LE CONTROLEUR DES STATISTIQUES -->
        .controller("stats", function($scope) {
        <!-- FIN DU CONTROLEUR -->
        })
 
    </script>
 </head>
 
 <!-- La page HTML générale, généralement c est index.html -->
<body ng-controller="accueilCtrl" >
 
    <!-- Le menu, qui appelle,grâce à HREF, les différentes vues HTML situées plus bas, puis les affiche dans la balise ng-view -->
    <div class="container ">
        <div class="menu designDiv">
            <a href="#/accueil" class="">Accueil</a>
            <a href="#/liste" class="">Liste  </a>
            <a href="#/detail" class="">Details</a>
            <a href="#/statistiques" class="">Stats</a>
        </div>
        <!-- Cette balise NG-View va afficher les différentes vues -->
        <div id="main" class="designDiv">
            <div ng-view></div>
        </div>
    </div>
</body>
 
<!-- Voici maintenant la liste des vues qui s affichent dans la balise ng-view(voir plus haut), qui doivent généralement être dans un fichier séparé, normalement dans un réperoire "views", pour être à la norme Grunt ou en général quoi -->
<!-- VUE HTML : DEFAUT-->
    <script type="text/ng-template" id="defaut.html">
        Bonjour {{bonjour}} je suis la vue de l accueil.
    </script>
 
<!-- VUE HTML : LISTE -->
    <script type="text/ng-template" id="liste.html">
        Bonjour, je suis la vue qui présente une liste d objets.
    </script>
 
<!-- VUE HTML : LISTE -->
    <script type="text/ng-template" id="detail.html">
        Bonjour, je suis la vue qui présente le detail d un objet.
    </script> 
 
<!-- VUE HTML : STATS -->
    <script type="text/ng-template" id="stats.html">
        Bonjour, je suis la vue qui présente des statistiques.
    </script>

Rediriger entre différentes pages en angular js

AngularJS

Discussions similaires

Partager

Partager