vários arquivos html de visualização da interface do usuário no roteador da interface do usuário
É possível fazer algo usando 2 ou mais arquivos html usando o ui-view? Eu preciso que seja algo como isto:
Eu tentei fazer algo trabalhandoplinker, mas parece que eu claramente não entendo conceitos. Eu li um tutorial aninhado de interface do usuário, mas eles simplesmente criam um único index.html e colocam várias visualizações de interface do usuário, mas preciso de vários arquivos .html.
test.html é apenas um arquivo com algum texto que deve ser exibido no cabeçalho principal
index.html fica assim
<html ng-app="MyApp">
<head>
<link href="stylesheets/style.css" rel="stylesheet">
</head>
<body>
<h4>
This should be Master header
</h4>
<div ui-view></div>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-router@*" data-semver="0.2.10" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="controllers/main.js"></script>
</body>
</html>
isso é app.html
<head>
<link href="stylesheets/style.css" rel="stylesheet">
</head>
<body>
<h4>
This should be Sub master header
</h4>
<div ui-view></div>
</body>
e app.js está escrito em pseudo-código mostrando como eu quero que funcione, porque claramente não tenho ideia 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.