UI 路由器内联模板

Question

我只是第一次尝试 UI 路由器。这是我非常简单的尝试。所以我现在期望，只有 header 会显示。但是页面保持空白。我做错了什么？

<!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

如果您希望某个状态在特定 url（来自 pushState 或 http）上激活，您需要指定 url.

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

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

Answer 2

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

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

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

Answer 3

您必须为 $stateProvider

设置空白 url 状态

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 路由器内联模板

UI Router inline template

javascript

angularjs

angular-ui-router