Index page separate from rest of AngularJS app?

Question

I'm working on two projects right now using AngularJS, and I'm running into the same problem with both of them.

The problem is that I have an index page that looks completely different from any of the inner pages, which means that my ng-view has to consist of the entire page. This makes it so that any time a route changes, the whole page has to reload instead of just the main content area. This causes things like the header or sidebar to flash briefly.

The only good approach I can think of to make my index page separate from my app is to literally have a separate, static index.html and then all my angularJS pages inside a separate folder so that I can use a more focused ng-view.

Is this the only/best approach there is? Has anyone achieved this, or have any ideas on how to? thanks.

How about using ng-show to show the parts (header/navigation/etc) that aren't on the "index" page conditionally? — shaunhusain
– shaunhusain, Commented Jul 19, 2013 at 3:39

Răzvan Flavius Panda · Accepted Answer · 2013-07-19 08:53:38Z

5

A way to solve this problem would be using UI-Router.

For example:

You could have an app.html which is a page that holds all of your application views. In it add a:

<body>
    <div ui-view></div>
</body>

and styles/scripts required by the entire application.

All of your views will go there including the index.html view.

Assuming that the pages except the index have some sort of header/body/footer layout in which the body changes according to the actual page you can use a configuration as follows:

var app = angular.module('app', [])
.config(['$stateProvider', function ($stateProvider)
{
    $stateProvider
        .state('index', {
            url: '/index',
            templateUrl: 'index.html',
            controller: 'IndexController'
        })
        .state('root', {
            templateUrl: 'root.html',
            controller: 'RootController'
        })
        .state('root.somePage', {
            url: '/some-page',
            templateUrl: 'some-page.html',
            controller: 'SomePageController'
        })
        .state('root.anotherPage', {
            url: '/another-page',
            templateUrl: 'another-page.html',
            controller: 'AnotherPageController'
        });
}

The root.html will be like a masterpage in ASP.NET Webforms so it would be in the form:

<!-- header markup here -->

<div ui-view></div>

<!-- footer markup here -->

edited Jul 19, 2013 at 8:53

answered Jul 19, 2013 at 8:35

Răzvan Flavius Panda

22.3k19 gold badges121 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jakemmarsh Over a year ago

This sounds like exactly what I need. Does the stateProvider replace the routeProvider?

Răzvan Flavius Panda Over a year ago

@Jakemmarsh, that is my understanding of it, that it replaces routeProvider, adding multilevel views/states: github.com/angular-ui/ui-router/wiki

Collectives™ on Stack Overflow

Index page separate from rest of AngularJS app?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related