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)

Answer 1

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> 

Answer 2

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.