AngularJS: Recharger ng-après authentification de l'utilisateur (ou une meilleure façon de résoudre la question)

Je suis vraiment juste d'apprentissage Angulaire et je suis d'essayer de créer une application qui limite l'accès au contenu basé sur l'authentification. J'ai de la partie authentification de travail (également en utilisant le framework PHP Laravel), mais je vais avoir un problème de "rechargement" de certains morceaux de contenu basé sur auth statut, à savoir après une authentification réussie.

D'abord, ce que je suis en train de faire est de mettre à jour le menu de navigation principale lorsqu'un utilisateur se connecte. Je suis sûr qu'il y est une meilleure approche, mais ce que j'ai jusqu'à présent est un point de vue retourné par le serveur qui a différents éléments de navigation selon que l'utilisateur est connecté ou non, puis le charger dans un élément avec ng-include.

Il y a une option pour se connecter, ce qui charge un formulaire de connexion dans la ng-view. Après que l'utilisateur se connecte, je voudrais actualiser la ng-inclure avec la vue depuis le serveur.

Est-il un moyen de le recharger à ce modèle dans le ng-après une connexion réussie?

N'hésitez pas à recommander une meilleure technique pour la résolution de ce si c'est la mauvaise approche. Bien sûr, ce serait très facile de le faire en jQuery, mais je préfère faire les choses de la Angulaires.

Ici est une partie de mon code pour l'instant:

index.html:

<div class="container" ng-controller="appController">

    <div id="nav" ng-include src="menuUrl()"></div>

    <div class="row">
        <div class="span3" ng-include src="'partials/brands.html'" ng-controller="brandController"></div>
        <div class="span9" ng-view></div>
    </div>

</div>

Certains contrôleurs:

.controller('appController', function($scope){
    $scope.loggedIn = false;

    $scope.menuUrl = function() {
        return "partials/nav.html";
    };

})
.controller('loginController',function($scope, $sanitize, $location, Authenticate, Flash){
    $scope.login = function(){
        Authenticate.save({
            'email': $sanitize($scope.email),
            'password': $sanitize($scope.password)
        },function() {
            $location.path('/products')
            Flash.clear()
            sessionStorage.authenticated = true;
        },function(response){
            Flash.show(response.flash)
        })
    }
})
.controller('logoutController',function($scope, $location, Authenticate, Flash){
    $scope.logout = function (){
        Authenticate.get({},function(response){
            delete sessionStorage.authenticated
            Flash.show(response.flash)
            $location.path('/login')
        })
    }
})

Services:

.factory('Authenticate', function($resource){
    return $resource("/service/authenticate/")
})
.factory('Flash', function($rootScope){
    return {
        show: function(message){
            $rootScope.flash = message
        },
        clear: function(){
            $rootScope.flash = ""
        }
    }
})

Application:

 .config(['$routeProvider',function($routeProvider){
        $routeProvider.when('/', {
            templateUrl: 'partials/home.html', 
            controller: 'homeController'
        })

        $routeProvider.when('/login', {
            templateUrl: 'partials/login.html', 
            controller: 'loginController'
        })

        $routeProvider.when('/logout', {
            templateUrl: 'partials/logout.html', 
            controller: 'logoutController'
        })

        $routeProvider.otherwise({redirectTo :'/'})
    }])
    .config(function($httpProvider){

        var interceptor = function($rootScope,$location,$q,Flash){

        var success = function(response){
            return response
        }

        var error = function(response){
            if (response.status == 401){
                delete sessionStorage.authenticated
                $location.path('/')
                Flash.show(response.data.flash)

            }
            return $q.reject(response)

        }
            return function(promise){
                return promise.then(success, error)
            }
        }
        $httpProvider.responseInterceptors.push(interceptor)
    })
    .run(function($http,CSRF_TOKEN){
        $http.defaults.headers.common['csrf_token'] = CSRF_TOKEN;
    })

Laravel vue:

<ul class="nav nav-tabs">
  <li><a href="#/">Home...</a></li>
  @if(!Auth::check())
  <li><a href="#/login">Log-in</a></li>
  @else
  <li><a href="#/logout">Log-out</a></li>
  @endif
  <li><input name="search" id="search" type="search" placeholder="Search products..." />
</ul>

OriginalL'auteur Jazzy | 2013-10-05