Angular抽象状态无法在页面重新加载上运行：“应用程序已使用此元素自举”

Question

I'm building my app on top of meanjs.org application.

I needed a main controller on top of each pages so I updated a bit the stateslike this:

    $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...

Everything worked as expected until I started to work on the authentication page.

What I did is just to add the main abstract app. to the authentication abstract to keep the url to be /authentication/sign-in like this:

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

So, when through the application I click on the sign in link it load the main abstract page and the authentication abstract page correctly and it is populated by the sign in page too.

But when I'm in the sign in page and I try to reload the page it fire an error:

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

I wish my app to be reloaded in every state and to look as it should.

What I did wrong here?

Here is also my 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 (default):

<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

This usually happens when you accidentally use both ng-app and angular.bootstrap to bootstrap an application.

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

Note that for bootstrapping purposes, the <html> element is the same as document, so the following will also throw an error.

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

You can also get this error if you accidentally load AngularJS itself more than once.

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

    ...

  </head>
  <body>

    ...

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

Source: angular documentation