Angular abstrakten Zustand funktioniert nicht auf Seite neu laden: "App bereits mit diesem Element bootstrapped"

Question

Ich baue meine App auf meanjs.org Anwendung.

brauchte ich einen Haupt-Controller auf der jeweils Seiten, damit ich dies ein wenig die stateslike aktualisiert:

wie erwartet arbeitete

$stateProvider 
     .state('app', { 
     abstract: true, 
     templateUrl: 'modules/core/client/views/core.client.view.html', 
     controller: 'MainController', 
     controllerAs: 'mc' 
     }) 
     .state('app.home', { 
     url: '/', 
     templateUrl: '/modules/core/client/views/home.client.view.html', 
     controller: 'HomeController', 
     controllerAs: 'vm' 
     }) 
     .etc... 

Alles, bis ich auf der Authentifizierungsseite zu arbeiten begann.

Was habe ich nur die wichtigsten abstrakten app. auf die Authentifizierung hinzufügen abstrakt die URL zu halten /authentication/sign-in so zu sein:

 .state('app.authentication', { 
     abstract: true, 
     url: '/authentication', 
     templateUrl: '/modules/users/client/views/authentication/authentication.client.view.html', 
     controller: 'AuthenticationController', 
     controllerAs: 'vm' 
     }) 
     .state('app.authentication.signup', { 
     url: '/sign-up', 
     templateUrl: '/modules/users/client/views/authentication/signup.client.view.html', 
     controller: 'AuthenticationController', 
     controllerAs: 'vm', 
     data: { 
      pageTitle: 'Signup' 
     } 
     }) 
     .state('app.authentication.signin', { 
     url: '/sign-in?err', 
     templateUrl: '/modules/users/client/views/authentication/signin.client.view.html', 
     controller: 'AuthenticationController', 
     controllerAs: 'vm', 
     data: { 
      pageTitle: 'Signin' 
     } 
     }); 

Also, wenn es durch die Anwendung, die ich auf dem sign in Link klicken, um es zu laden Die Haupt-Abstract-Seite und die Authentifizierungs-Abstract-Seite sind korrekt und es wird auch von der Anmeldeseite ausgefüllt.

Aber wenn ich in der Anmeldeseite bin und ich versuche, die Seite neu zu laden einen Fehler ausgelöst:

WARNING: Tried to load angular more than once. 
Uncaught Error: [ng:btstrpd] App already bootstrapped with this element 'document' 

Ich mag meine app in jedem Staat neu geladen werden und sehen, wie es sollte.

Was habe ich hier falsch gemacht?

Hier ist auch mein HTML:

core.client.view.html:

<header ng-include="'/modules/core/client/views/partials/header.client.partial.view.html'" ng-controller="HeaderController" id="header" class="topnavbar-wrapper"></header> 

<div data-ui-view autoscroll="false" id="wrapper"></div> 

<footer ng-include="'/modules/core/client/views/partials/footer.client.partial.view.html'"></footer> 

authentication.client.view.html (Standard):

<section class="row"> 
    <h3 class="col-md-12 text-center">Sign in using your social accounts</h3> 
    <div class="col-md-12 text-center"> 
    <div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/facebook')" ng-src="/modules/users/client/img/buttons/facebook.png"></a></div> 
    <div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/twitter')" ng-src="/modules/users/client/img/buttons/twitter.png"></a></div> 
    <div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/google')" ng-src="/modules/users/client/img/buttons/google.png"></a></div> 
    <div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/linkedin')" ng-src="/modules/users/client/img/buttons/linkedin.png"></a></div> 
    <div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/github')" ng-src="/modules/users/client/img/buttons/github.png"></a></div> 
    <div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/paypal')" ng-src="/modules/users/client/img/buttons/paypal.png"></a></div> 
    </div> 
    <div ui-view></div> 
</section> 

Answer 1

Dies geschieht normalerweise, wenn Sie versehentlich ng-app und t verwenden o eine Anwendung neu starten.

<html> 
... 
    <body ng-app="myApp"> 
    <script> 
     angular.bootstrap(document.body, ['myApp']); 
    </script> 
    </body> 
</html> 

Beachten Sie, dass für Bootstrapping Zwecke, das <html> Element das gleiche wie Dokument ist, so wird folgendes auch einen Fehler aus.

<html> 
... 
<script> 
    angular.bootstrap(document, ['myApp']); 
</script> 
</html> 

Sie können auch diese Fehlermeldung erhalten, wenn Sie versehentlich AngularJS selbst mehr als einmal laden.

<html ng-app> 
    <head> 
    <script src="angular.js"></script> 

    ... 

    </head> 
    <body> 

    ... 

    <script src="angular.js"></script> 
    </body> 
</html> 

Quelle: angular documentation