HTMLファイルへの角度ルーティングが機能しない

Question

私はビデオを通して角度学習を学びました。私は自分のコードのこのルーティング部分に立ち往生しました。

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'); 
}]); 

これは私のフォルダ構造です：

私は多くの方法を試してみましたが、それでも失敗しています、持っています見て！

EDITここ はUI

Answer 1

の図であり、私はこれがあなたの問題を引き起こしているかどうかわからないのですが、このようにしてみてください：

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

とconfigにファイル：

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

}）;

PS。あなたのアプリのどこかに<div ui-view></div>がありますか？