CODEWITHSUNDEEP
javascripthtmlangularjsangular-ui-router
Zoe Steinkamp
Zoe Steinkamp

Reputation: 149

Having Double header and footer issues with Angular Ui-Router

So I am getting a weird error for Angular-UI, basically my ui-view is causing me to have double header and double footers. I have taken a screen shot of the problem.

Screen Shot of the problem

This is my angular ui routes.js file

var planoxApp = angular.module('planoxApp')

planoxApp.config(['$stateProvider','$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('home', {
      url: '/',
      views: {
        '':{
          templateUrl: 'index.html',
            controller: 'MainCtrl'
        },
        'assembly@home':{
          templateUrl: 'assembly.html'
        },
        'client@home':{
           templateUrl: 'home_client.html'
        },
        'photoplan@home':{
            templateUrl: 'home_photoplan.html'
       }
     }
     })
    .state('clients', {
      url: '/clients/{id}',
      templateUrl: 'client/clientsmain.html',
      controller: 'ClientCtrl as client'
    })
    .state('clients.clientoverview', {
      url: '/overview',
      templateUrl: 'client/clientoverview.html',
    })
    .state('clients.photoplans', {
      url: '/photoplans',
      templateUrl: 'client/clientphotoplans.html',
    })
    .state('clients.editclient', {
      url: '/edit',
      templateUrl: 'client/clientedit.html',
    })
    .state('clients.editbranding', {
      url: '/branding',
      templateUrl: 'client/clientbranding.html',
    })
    .state('clients.clientsettings', {
      url: '/settings',
      templateUrl: 'client/clientsettings.html',
    })

    .state('photoplans', {
      url: '/photoplans/{id}',
      templateUrl: 'photoplan/photoplanmain.html',
      controller: 'PhotoplanCtrl as photoplan'
    })
    .state('photoplans.editproperty', {
      url: '/edit',
      templateUrl: 'photoplan/editproperty.html',
    })
    .state('photoplans.uploadproperty', {
      url: '/upload',
      templateUrl: 'photoplan/uploadproperty.html',
    })
    .state('photoplans.slideshowproperty', {
      url: '/slideshow',
      templateUrl: 'photoplan/slideshowproperty.html',
    })
    .state('photoplans.floorplanproperty', {
      url: '/floorplan',
      templateUrl: 'photoplan/floorplanproperty.html',
    })
    .state('photoplans.downloadproperty', {
      url: '/download',
      templateUrl: 'photoplan/downloadproperty.html',
    })
    .state('photoplans.syndicationproperty', {
      url: '/syndication',
      templateUrl: 'photoplan/syndicationproperty.html',
    })
    .state('photoplans.analyticsproperty', {
      url: '/analytics',
      templateUrl: 'photoplan/analyticsproperty.html',
    })
    .state('photoplans.editsettings', {
      url: '/settings',
      templateUrl: 'photoplan/editsettings.html',
    })

}])

And this is my index file that is causing the problem

<html>
  <head>
    <title>My Angular App!</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="../app.js"></script>
    <script src="../route.js"></script>
    <script src="../controllers/controller.js"></script>
    <script src="../directives.js"></script>
  </head>
  <body ng-app="planoxApp">

    <!-- Header Section-->

    <header>
      <nav class="navbar header navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header_navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"> <img ng-src="../images/favicon_64x64.ico" /></a>
          </div>
            <div class="collapse navbar-collapse" id="header_navbar">
              <ul class="nav navbar-nav left-nav">
                <li><a ui-sref="home"> Home </a></li>
                <li><a> Photoplan </a></li>
                <li><a> Client </a></li>
                <li><a> Admin </a></li>
              </ul>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Recent</a></li>
                <li><a href="#"><i class="user-account"></i><i class="sr-only">User Account</i></a></li>
              </ul>
            </div>
        </div>
      </nav>
    </header>


<ui-view>


<div class="container">
<!-- Main Section -->
    <div class="home no-subheader container">
      <div class="row" ng-controller="MainCtrl as main">

        <!-- left -->
        <section name="assembly-queue" class="molding col-md-4" id="assembly">
          <div class="gutter">
            <div id="expanding">
            <div class="top row">
              <div ui-view="assembly"></div>
                </div>
              </div>
              </section>

        <!-- middle -->
        <section name="clients" class="molding col-md-4" id="clients">
          <div class="gutter">
            <div class="top row">
        <div ui-view="client"> </div>

        </div>
      </div>
      </section>

        <!-- right -->
        <section name="photoplans" class="molding col-md-4" id="photoplans">
          <div class="gutter">
            <div class="top row">
        <div ui-view="photoplan"> </div>
      </div>
      </div>
    </section>
      </div>
    </div>
    </div>
  </div>

  <div id="footer">
    <div class="container">
      <p class="text-muted">Im a sucky footer</p>
    </div>
  </div>
</ui-view>

  </body>
</html>

Im wondering if its because I have ui-view on other pages?

Because i only have a double header problem on the front page, nowhere else in my pages do i have this problem. Any help is greatly appreciated, thanks in advance!

Upvotes: 0

Views: 308

Answers (1)

Anid Monsur
Anid Monsur

Reputation: 4538

The issue is that your home state is referencing your index.html file as it's template. This means that it's being loaded twice for your home state. To address this, you'll need to move the content of your home state into a separate template.

Your index.html file should look like this. Notice that the ui-view is empty:

<html>
  <head>
    ...
  </head>
  <body ng-app="planoxApp">
    <header>
      <!-- Header Section-->
      ...
    </header>

    <ui-view></ui-view>

    <div id='footer'>
      <!-- Footer Section -->
      ...
    </div>

  </body>
</html>

Now create a new home.html file with the contents that used to be in that ui-view

<div class="container">
    <!-- Main Section -->
    <div class="home no-subheader container">
        <div class="row" ng-controller="MainCtrl as main">

            <!-- left -->
            <section name="assembly-queue" class="molding col-md-4" id="assembly">
                <div class="gutter">
                    <div id="expanding">
                        <div class="top row">
                            <div ui-view="assembly"></div>
                        </div>
                    </div>
            </section>

            <!-- middle -->
            <section name="clients" class="molding col-md-4" id="clients">
                <div class="gutter">
                    <div class="top row">
                        <div ui-view="client"></div>

                    </div>
                </div>
            </section>

            <!-- right -->
            <section name="photoplans" class="molding col-md-4" id="photoplans">
                <div class="gutter">
                    <div class="top row">
                        <div ui-view="photoplan"></div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

Finally, in your route configuration, the home state should be configured like this. Notice the root templateUrl now refers to home.html:

.state('home', {
    url: '/',
    views: {
        '': {
            templateUrl: 'home.html',
            controller: 'MainCtrl'
        },
        'assembly@home': {
            templateUrl: 'assembly.html'
        },
        'client@home': {
            templateUrl: 'home_client.html'
        },
        'photoplan@home': {
            templateUrl: 'home_photoplan.html'
        }
    }
})

In general, ui-view elements should not have any content within them because they will only be replaced. Here's the bit about that from the ui-router wiki:

If you'd like your to have some default content before it's populated by a state activation, you can do that as well. The contents will be replaced as soon as a state is activated and populates the ui-view with a template.

Upvotes: 1

Related Questions