múltiples archivos html ui-view en ui-router

Question

Aug 17, 2014, 02:26 PM

angularjs node.js javascript html angular-ui-router

múltiples archivos html ui-view en ui-router

¿Es posible hacer algo usando 2 o más archivos html usando ui-view? Necesito que sea algo como esto:

He intentado hacer algo trabajandoplinker, pero parece que claramente no entiendo los conceptos. He leído un tutorial anidado de ui-vew pero simplemente hacen un solo index.html y colocan múltiples vistas de ui allí, pero necesito múltiples archivos .html.

test.html es solo un archivo con texto que debe mostrarse debajo del encabezado maestro

index.html tiene este aspecto

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

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

y app.js está escrito en un pseudocódigo que muestra cómo quiero que funcione, porque claramente no tengo idea de cómo hacerlo 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 es solo un texto.