我該如何糾正這個使用ui路由器多個命名的視圖

我試圖設置一個頁面沒有父模板，但包含使用角度ui路由器的多個命名的視圖。我該如何糾正這個使用ui路由器多個命名的視圖

有一個簡單的HTML設置：

<body> 
    <div ng-app="thing"> 
    <h1>Multiple Views</h1> 
    <div ui-view="oneThing"></div> 
    <div ui-view="twoThing"></div> 
    <div ui-view="threeThing"></div> 

    <script id="one_thing.html" type="text/ng-template"> 
     <p>one: {{text}}</p> 
    </script> 
    <script id="two_thing.html" type="text/ng-template"> 
     <p>two: {{text}}</p> 
    </script>  
    <script id="three_thing.html" type="text/ng-template"> 
     <p>three: {{text}}</p> 
    </script> 
    </div> 
    </body>

我希望這意味着我有三個看法和三個模板的「東西」應用可以看到

然後JS設置是：

'use strict'; 

var thing = angular.module("thing", ['ui.router']); 

thing.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
    .state('things', { 
     url: '/things', 
     views: { 
      'oneThing': { 
      templateUrl:'one_thing.html', 
      controller: 'oneCtrl' 
      }, 
      'twoThing': { 
      templateUrl:'two_thing.html', 
      controller: 'twoCtrl' 
      }, 
      'threeThing': { 
      templateUrl:'three_thing.html', 
      controller: 'threeCtrl' 
      } 
     } 
    }); 
    $urlRouterProvider.when('/', 'things'); 
}); 

thing.controller('oneCtrl', function($scope) { 
    $scope.text = 'boom'; 
}); 

thing.controller('twoCtrl', function($scope) { 
    $scope.text = 'bang'; 
}); 

thing.controller('threeCtrl', function($scope) { 
    $scope.text = 'wallop'; 
});

我以爲這意味着始終加載'事物'作爲路線並在該狀態下載入三個視圖，每個視圖指向不同的模板和控制器。但相反，我得到一個空白頁...

我誤解了這是如何工作，或如何寫它（或者，更糟糕的是，兩個!!）？

來源

2014-10-06 Paul D' Ambra

默認URL爲不/

所以$urlRouterProvider.when('/', 'things');沒有被觸發。

更改爲

$urlRouterProvider.when('', 'things');

和你plunkr作品。

來源

2014-10-06 13:25:46

或者，當然把'$ urlRouterProvider.when（''，'/'）;' – 2014-10-06 13:26:36

啊，啊！我有一種感覺，問題出在我的耳朵之間。謝謝！ – 2014-10-06 13:27:08

我該如何糾正這個使用ui路由器多個命名的視圖

回答

相關問題