CODEWITHSUNDEEP
javascriptangularjs
Jakemmarsh
Jakemmarsh

Reputation: 4661

Index page separate from rest of AngularJS app?

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.

Upvotes: 3

Views: 3966

Answers (1)

Răzvan Flavius Panda
Răzvan Flavius Panda

Reputation: 22116

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

Upvotes: 5

Related Questions