时间戳

首页 > 解决方案 > AngularJS，ui-router 不显示模板

angularjs - AngularJS，ui-router 不显示模板

问题描述

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

1/ 应用程序.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当我单击并登陆urltemplate时不会显示。#/first有谁知道问题出在哪里？

标签： angularjsangular-ui-router

解决方案

/我认为您的 url 属性中缺少 a


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

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

推荐阅读