Der abstrakte Zustand kann nicht verwendet werden, um anfängliche gemeinsame Ansichten im eckigen UI-Router

Question

zu liefern Ich versuche, einige erste "teilweise" Ansichten durch einen abstrakten Zustand mit Angular und Angular UI router zu liefern, aber irgendwo auf dem Weg mache ich eine Fehlinterpretation bricht meine Implementierung ...

Wie Sie sehen können, versuchte ich einige Variationen mit der Angabe einer customLayout.html Vorlage auf den abstrakten Zustand. Das hat auch nicht funktioniert.

Was funktioniert funktionieren (aber ist nicht was ich will) ist die gemeinsame partielle Vorlagen für jeden Zustand.

Ich habe umgesetzt, was tut und was nicht hier:

sehen: JSBin.

Betrachten Sie: //REMOVE COMMENT HERE, um zwischen einem "geerbten" oder "Kind" -Zustand zu wechseln.

 $stateProvider 
      .state("layout", { 
       abstract: true, 
       url: "", 
       //templateUrl: "customLayout.html", 
       views: { 
        "header" : { 
         templateUrl: 'shared/header.html', 
        } 
       } 
      }) 
      //REMOVE COMMENT HERE 
      //.state("layout.demo") 
      .state("demo", { 
       url: "/demo", 
       views: { 
        "" : { 
         templateUrl: 'demo.html', 
        }, 
        "header" : { 
         templateUrl: 'shared/header.html'        
        } 
       } 
      }); 

Edit:

Mit Hilfe von this:

$stateProvider 
      .state("layout", { 
       abstract: true, 
       url: "", 
       //templateUrl: "customLayout.html", 
       views: { 
        "header" : { 
         templateUrl: 'shared/header.html', 
        }, 
        //ADDED THIS, ESSENTIALLY PROXYING THE NAMELESS TEMPLATE 
        '': { 
         template: '<ui-view />' 
        } 
       } 
      }) 

Answer 1

Try this:

app.config([ 
    '$stateProvider', 
    '$urlRouterProvider', 
    function ($stateProvider, $urlRouterProvider) { 
     console.log("app: states"); 

     $urlRouterProvider 
      .otherwise('/demo'); 


     $stateProvider 
      .state("layout", { 
       abstract: true, 
       url: "", 
       //templateUrl: "customLayout.html", 
       views: { 
        "" : { 
         templateUrl: 'demo.html' 
        }, 
        "header" : { 
         templateUrl: 'shared/header.html' 
        } 
       } 
      }) 
      //REMOVE COMMENT HERE 
      //.state("layout.demo") 
      .state("layout.demo", { 
       url: "/demo", 
      }); 
    } 
]); 

Hier ist der Arbeits Link: http://jsbin.com/zehejovaco/1/edit?html,output