Comment cacher un contenu après routage de page

**cürüs** · 17/05/2016, 20h27

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 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
<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 html :

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

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 html :

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

<div>la vue desirée</div>

mon fichier de route

Code :

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

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 :

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
 
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 :

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

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 :

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

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);
    });
});

Invité · 31/08/2016, 19h27

Pourquoi tu ne mets pas un ng-show sur les div qui doivent disparaitre/apparaitre ...?

Ca fait un truc du style dans le html :

Code :

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

1
2
 
<div ng-show="montreMaDiv"></div>

Ensuite tu les fait apparaitre ou disparaitre en fonction d'une variable, du style dans le controleur de l'accueil:

Code :

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

1
2
 
$scope.montreMaDiv = false;

puis après, dans le reste de l'app :

Code :

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

1
2
 
$scope.montreMaDiv = true;

**Marco46** · 01/09/2016, 13h33

Envoyé par cürüs

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.

Tu ne peux pas faire ça proprement avec le routeur basique de angular. Il te faut utiliser ui-router.

Proprement j'entends par là que lorsqu'on ne veut pas qu'un bloc soit présent dans la page, il ne doit pas être présent dans le DOM. Ce que tu veux c'est une première vue de chargement sans aucun menu ni entête ni footer ni content, puis switcher sur ton contenu standard avec un découpage entete menu pied de page et content. Ça se fait très bien avec ui-router.

Le problème du ng-show dans ce cas c'est que ton bloc étant présent dans la page, il va être exécuté avec ses bindings, ses contrôleurs, etc ...

Comment cacher un contenu après routage de page

AngularJS

Discussions similaires

Partager

Partager