AngularJS、ui-路由器不显示模板

Question

我是 AnguarJS 的新手，老实说现在有点困惑。我刚开始接触路由并创建这个非常小的应用程序只是为了测试，但它不起作用。让我分享整个应用程序，它是...只有 2 个文件：

1/app.js

angular
    .module('app', ['ui.router'])

app.config(['$stateProvider', function($stateProvider) {
    $stateProvider.state('firstMessage', {
        url: 'first',
        template: `<h1>First message</h1>`
    });
}]);

2/index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ui routing testing</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>
</head>
<body>
    <h1>Hello World</h1>
    <a href="#/first">First Message</a>
    <div ui-view></div>
</body>
</html>

就是这样！但是当我运行带有 npx http-server -o 的应用程序时，当我点击并登陆 #/first url 时 template 不显示。有谁知道问题出在哪里？

Answer 1

我认为您的 url 属性

中缺少 /


angular
    .module('app', ['ui.router'])

app.config(['$stateProvider', function($stateProvider) {
    $stateProvider.state('firstMessage', {
        url: '/first', // HERE
        template: `<h1>First message</h1>`
    });
}]);

AngularJS、ui-路由器不显示模板

AngularJS, ui-router not showing templates

angularjs

angular-ui-router