vários arquivos html de visualização de ui no roteador da interface do usuário

É possível fazer algo usando 2 ou mais arquivos html usando ui-view? Eu preciso que seja algo assim: insira a descrição da imagem aqui

Eu tentei fazer algo trabalhando no plinker , mas parece que não entendo conceitos. Eu li um tutorial ui-vew nested, mas eles simples fazem um único index.html e colocam múltiplos ui-view lá, mas eu preciso de vários arquivos .html.

test.html é apenas um arquivo com algum texto que deve ser exibido no header principal

index.html parece com isso

     

This should be Master header

isso é app.html

     

This should be Sub master header

e app.js é escrito em pseudo código mostrando como eu quero que funcione, porque eu claramente não tenho idéia de como fazê-lo funcionar

  angular.module('MyApp', [ 'ui.router' ]) .config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/'); $stateProvider .state('index', { templateUrl: 'index.html', controller: 'IndexCtrl' }) .state('index.test', { url: '/', templateUrl: 'test.html', controller: 'TestCtrl' }) .state('app', { templateUrl: 'app.html', controller: 'AppController' }) .state('app.test2', { url: '/test2', templateUrl: 'test2.html', controller: 'Test2Controller' }) }) 

test2.html é apenas um texto.

Não tenho certeza se entendo seu objective em 100%, mas há plunker atualizado, mostrando como podemos trabalhar com visualizações aninhadas.

Em primeiro lugar, há uma definição de estado $ mostrando o aninhamento:

 $stateProvider .state('index', { url: '/', views: { '@' : { templateUrl: 'layout.html', controller: 'IndexCtrl' }, 'top@index' : { templateUrl: 'tpl.top.html',}, 'left@index' : { templateUrl: 'tpl.left.html',}, 'main@index' : { templateUrl: 'tpl.main.html',}, }, }) .state('index.list', { url: '/list', templateUrl: 'list.html', controller: 'ListCtrl' }) .state('index.list.detail', { url: '/:id', views: { 'detail@index' : { templateUrl: 'detail.html', controller: 'DetailCtrl' }, }, }) 

E aqui está o layout.html modelo do núcleo do layout.html :

 

E como isso funciona?

I. Visão de Lista

podemos ver o conteúdo do tpl.top.html

 
This is a tpl.top.html
index index.list

que tem alguma navegação para o índice ou exibição de lista . A visão de lista, será injetada no tpl.left.html, que se parece com isso:

 
This is a tpl.left.html

place for list

Se o alvo da view não tiver o nome

, podemos definir $ state assim:

 .state('index.list', { url: '/list', templateUrl: 'list.html', controller: 'ListCtrl' }) 

podemos ver que direcionamos a âncora da visão de estado do índice (raiz), que é sem nome. Mas, para um detalhe, usamos técnicas diferentes:

II. Visualização de detalhes

Este é o conteúdo do tpl.main.html:

 
This is a tpl.main.html

place for detail

Neste caso, a âncora para uma visão é denominada: ui-view = “detail”, é por isso que temos que definir esse estado de detalhe como este:

 .state('index.list.detail', { url: '/:id', views: { 'detail@index' : { templateUrl: 'detail.html', controller: 'DetailCtrl' }, }, }) 

Podemos ver que, porque a visão pai não é o alvo do nosso estado (o índice do pai grande é o alvo) , temos que usar a nomenclatura do aboslute: 'detail@index'

III Exibir nomes – relativos versus nomes absolutos

pequena citação do doc:

Nos bastidores, cada view recebe um nome absoluto que segue um esquema de viewname@statename , onde viewname é o nome usado na diretiva view e state name é o nome absoluto do estado, por exemplo, contact.item. Você também pode optar por escrever seus nomes de exibição na syntax absoluta.

RESUMO:
Então, este exemplo é sobre isso – sobre quase todos os resources essenciais do ui-router . Nós mostramos aqui como usar o aninhamento , ver a nomenclatura (absoluta / relativa) e também como usar múltiplas visões para um estado (definição do estado do índice)
Por favor, observe que tudo em ação aqui (clique no inex.html na seção superior, então tente selecionar alguns detalhes)