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>

答

你必须设置 - 在你的榜样 - $urlRouterProvider：

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

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

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>' 
    }); 
});

它仍然不起作用：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

UI路由器内联模板

相关推荐