Question

我只是第一次尝试使用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>

Answer 1

您必须在您的示例中设置$urlRouterProvider：

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

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

Answer 2

如果您希望在特定网址（来自pushState或http）上激活状态，则需要指定网址。

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

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

Answer 3

您必须为$ 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路由器内联模板

3 个答案: