Javascript UI路由器内联模板_Javascript_Angularjs_Angular Ui Router

Javascript UI路由器内联模板

javascript angularjs

Javascript UI路由器内联模板,javascript,angularjs,angular-ui-router,Javascript,Angularjs,Angular Ui Router,我只是第一次尝试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"></scr

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


var-app=angular.module（'myApp'，['ui.router']）；
app.config（函数（$stateProvider，$urlRouterProvider）{
$stateProvider.state（'index'{
模板：“标题”
});
});

如果希望在特定url（从pushState或http）上激活状态，则需要指定url

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

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

var-app=angular.module（'myApp'，['ui.router']）；
app.config（函数（$stateProvider，$urlRouterProvider）{
$stateProvider.state（'index'{
url:“/”，
模板：“标题”
});
});

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

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

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

var-app=angular.module（'myApp'，['ui.router']）；
app.config（函数（$stateProvider，$urlRouterProvider）{
$urlRouterProvider。否则（'/'）；
$stateProvider.state（'index'{
url:“/”，
模板：“标题”
});
});

您必须为$stateProvider设置空白url状态

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

var-app=angular.module（'myApp'，['ui.router']）；
app.config（函数（$stateProvider，$urlRouterProvider）{
$stateProvider
.state（'索引'{
url:“”，
模板：“标题”
});
});

Plnkr：