Comment cacher un contenu après routage de page
Bonsoir à vous,
je suis débutant sur angularJS, et actuellement j'aimerais réaliser certaines actions mais cela m'ai impossible. En réalité, j'aimerais avoir une interface standard, à savoir une entête de page un corps de page matérialisé par une balise <div ng-view> et un pied de page. J'utilise le système de routage avec ngRoute. Mon problème est le suivant j'aimerais que lorsque ma page d'acceuil «*«home.html*» s'affiche au lancement de l'application que le pied de page et l'entete de page ne s'affiche pas, mais lorsqu'on clique sur le lien pour passer à la page suivante le pied de page et l'entete de page s'affiche et lorsqu'on retourne à la page d'accueil que le pied de page et l'entete de page ne s'affiche plus. Comment réaliser cela. Voici mon code.
Merci pour vos réaction.
voici mon index
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
| <html ng-app="MonApp">
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="dist/css/bootstrap.css" />
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/service/post.js"></script>
<script src="js/controller/posts.js"></script>
<script src="js/controller/comments.js"></script>
<script>
</script>
</head>
<body>
<div class="container">
<!-- bar de navigation -->
<div ng-controller="LoginCtrl as user">
<nav class="navbar navbar-inverse" ng-if="!user.isLogg">
<ul class="nav navbar-nav">
<li class="active"> <a href="#">Accueil</a> </li>
<li> <a href="#/" ng-click="user.isLogg = false">Logout</a> </li>
<li> <a href="#">Témoignages</a> </li>
<li> <a href="#">Références</a> </li>
</ul>
<form class="navbar-form pull-right">
<input type="text" style="width:150px" class="input-small" placeholder="Recherche">
<button type="submit" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-eye-open"></span> Chercher</button>
</form>
</nav>
</div>
<!-- la vue -->
<div ng-view></div>
<div class='' style=" width: 100%; line-height: 40px; background: #499249; color: #000;text-align: center;">Pied de page</div>
</div>
</body>
</html> |
ma page d'accueil
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div ng-if="!isLogged">
<p>Please Login</p>
<a ng-click="isLogged = false" href='#/login'>Login</a>
</div>
<div ng-show="loading">Chargement...</div>
<div ng-hide="loading">
<div ng-repeat="post in posts">
<h1>{{post.name}}</h1>
<p>{{post.content}}</p>
<a href="#/comments/{{post.id}}">{{post.comments.length}} commentaires</a>
<hr>
</div>
</div> |
la vue désirée
Code:
<div>la vue desirée</div>
mon fichier de route
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| //Création d'un module
var app = angular.module('MonApp', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/', {templateUrl:'partials/home.html', controller:'PostsCtrl'})
.when('/login', {templateUrl:'partials/logins.html', controller:'LoginCtrl'})
.when('/comments/:id', {templateUrl:'partials/comments.html', controller:'CommentsCtrl'})
.otherwise({redirectTo: '/'});
});
app.controller('LoginCtrl', function ($scope) {
$scope.isLogg = false;
}); |
ma factory
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
|
app.factory('PostFactory', function($http, $q, $timeout){
var factory = {
posts : false,
getPosts : function(){
var deferred = $q.defer();
if(factory.posts !== false){
deferred.resolve(factory.posts);
}else{
$http.get('posts.json')
.success(function(data, status){
factory.posts = data;
$timeout(function(){
deferred.resolve(factory.posts);
}, 2000)
}).error(function(data, status){
deferred.reject('Impossible de recupèrer des articles');
});
}
return deferred.promise;
},
getPost : function(id){
var deferred = $q.defer();
var post = {};
var posts = factory.getPosts().then(function(posts){
angular.forEach(posts, function(value,key){
if(value.id == id){
post = value;
}
});
deferred.resolve(post);
}, function(msg){
deferred.reject(msg);
})
return deferred.promise;
},
}
return factory;
}); |
mon controller post
Code:
1
2
3
4
5
6
7
8
9
10
11
|
app.controller('PostsCtrl', function($scope, PostFactory){
$scope.loading = true;
$scope.isLogged = false;
$scope.posts = PostFactory.getPosts().then(function(posts){
$scope.loading = false;
$scope.posts = posts;
}, function(msg){
alert(msg);
})
}); |
mon controller comments
Code:
1
2
3
4
5
6
7
8
9
10
11
|
app.controller('CommentsCtrl',function ($scope, PostFactory, $routeParams){
$scope.loading = true;
var post = PostFactory.getPost($routeParams.id).then(function(post){
$scope.loading = false;
$scope.title = post.name;
$scope.comments = post.comments;
}, function(msg){
alert(msg);
});
}); |
