Multiple index.html when using Angular UI Router

Question

I'm new to using Angular with Meteor. Currently I am struggling with using the Angular UI Router, where I have an index.html file which is like a main layout template with <div ui-view></div> where the router will render view templates in depending on the current route.

Is it possible to create more layout template files like index.html, and select which version of index.html we want to render a view template in?

This can be because most pages on the site uses a certain layout defined in index.html, but a few pages may require their own special layouts (ie: no header, etc)

Angular is meant to be a one-page-application so you dont need to do that. Here's a personal guide for whenever I'm starting a project. You cant create unique layout for each pages in this approach. See here. github.com/jofftiquez/angular-app-starter-pack — jofftiquez
– jofftiquez, Commented Dec 18, 2015 at 11:34

Claies · Accepted Answer · 2015-12-18 11:29:07Z

0

You don't want to use separate index.html pages, because that is where all the angular scripts are held, and transitioning to a new index.html means loading all your scripts again.

Instead, you can use abstract parent states which represent the template with their own ui-view for the child states to populate.

From the Ui-Router Wiki:

$stateProvider
.state('contacts', {
    abstract: true,
    templateUrl: 'contacts.html'
})
.state('contacts.list', {
    // loaded into ui-view of parent's template
    templateUrl: 'contacts.list.html'
})
.state('contacts.detail', {
    // loaded into ui-view of parent's template
    templateUrl: 'contacts.detail.html'
})

<!-- contacts.html -->
<h1>Contacts Page</h1>
<div ui-view></div>

answered Dec 18, 2015 at 11:29

Claies

22.4k4 gold badges56 silver badges81 bronze badges

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

Comments

Charlie · Accepted Answer · 2015-12-18 11:33:06Z

0

Your requirement to have many index.html files together with ui-router hits a weak design. But I will answer your question.

One way you can achieve different layouts in index.html is to have a ui-view manager directive which listens to the state. You can use this directive in all the different places your ui-view might go and get it to insert the directive ui-view depending on the state.

Also your directive can show/hide it's parent blocks to impose your layout configuration. This way you can configure your index.html layout blocks before ui-router replaces markup.

answered Dec 18, 2015 at 11:33

Charlie

24k12 gold badges65 silver badges96 bronze badges

Collectives™ on Stack Overflow

Multiple index.html when using Angular UI Router

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related