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