角度路由到HTML文件不起作用

Question

我是通过视频学习Angular的新手。我陷入了代码的这个路由部分。

的index.html

<header id="top" class="header">
    <div class="text-vertical-center bg-color" ng-controller="HeaderController">
        <h1 class="animated fadeInLeft">SORTIFY</h1>
        <h3 class="animated fadeInUp">Your Personal Music Assistant</h3>
        <br>
          <a href="#music" class="btn btn-dark btn-lg" >Check out Music</a>
          <a href="#genre" class="btn btn-dark btn-lg">Genrify your Songs</a>
    </div>
</header>

的script.js

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

app.config(['$httpProvider', '$stateProvider', '$urlRouterProvider',
function($httpProvider, $stateProvider, $urlRouterProvider) {

$stateProvider
    .state('music', {
    url: 'music',
    templateUrl: 'music.html',
  });

$urlRouterProvider.otherwise('/index');
}]);

这是我的文件夹结构：

我尝试了很多方法，但我仍然失败了，看看!!

修改 这是UI的视​​图

Answer 1

我不确定这是否会导致您的问题，但请尝试这样：

<a href="#/music" class="btn btn-dark btn-lg" >Check out Music</a>

并在配置文件中：

.state('music', {
url: '/music',
templateUrl: 'music.html',

}）;

PS。您的应用上某处有<div ui-view></div>吗？