UI路由器內聯模板

我只是第一次嘗試UI路由器。這是我非常簡單的嘗試。所以我現在預計，只會顯示標題。但該頁面保持空白。我究竟做錯了什麼？UI路由器內聯模板

<!doctype html> 
<html ng-app="myApp"> 
<head> 
    <meta charset="utf-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.min.js"></script> 
    <script> 
     var app = angular.module('myApp', ['ui.router']); 
     app.config(function($stateProvider, $urlRouterProvider) { 
      $stateProvider.state('index', { 
       template: '<h1>Header</h1>' 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <main ui-view></main> 
</body> 
</html>

來源

2015-05-09 user3142695

你必須設置 - 在你的榜樣 - $urlRouterProvider：

var app = angular.module('myApp', ['ui.router']); 

app.config(function($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/'); 
    $stateProvider.state('index', { 
     url : '/', 
     template: '<h1>Header</h1>' 
    }); 
});

來源

2015-05-09 19:21:19 user3848987

http://plnkr.co/edit/n3uX2SMR0puNROzRePOO適用於0.2.15版本的版本 – OzBob

如果您希望在特定網址（來自pushState或http）時激活某個狀態，則需要指定url。

var app = angular.module('myApp', ['ui.router']); 

app.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider.state('index', { 
     url : '/', 
     template: '<h1>Header</h1>' 
    }); 
});

來源

2015-05-09 15:54:36

它仍然不起作用：http://plnkr.co/edit/Pajvptvh1F1DO68E5RtM?p=preview – user3142695

plnk fixed h ttp：//plnkr.co/edit/sf3akHnjRp1ElmtwDedr – OzBob

你必須將一個空的URL狀態$ stateProvider

var app = angular.module('myApp', ['ui.router']); 
app.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
    .state('index', { 
     url : '', 
     template: '<h1>Header</h1>' 
    }); 
});

Plnkr：http://plnkr.co/edit/n3uX2SMR0puNROzRePOO

來源

2015-10-27 03:47:06 OzBob

UI路由器內聯模板

回答

相關問題