[解決済み] どのようにangularJSでrouteProviderとlocationProviderを設定するのですか？

質問

angularJSでhtml5Modeを有効にしたいのですが、なぜかうまくいきません。私のコードに何か問題があるのでしょうか？

angular
    .module('myApp',[])
    .config(function($locationProvider, $routeProvider) {
        $locationProvider.html5Mode(true);
        $routeProvider.when('/', {
           templateUrl: 'partials/home.html', 
           controller: HomeCtrl
        });

        $routeProvider.when('/tags/:tagId', {
            templateUrl: 'partials/result.html', 
            controller: TagResultCtrl
        });
        //$routeProvider.otherwise({redirectTo: '/home', controller: HomeCtrl});
     });

htmlで

  <a href="tags/{{tag.id}}"><img data-ng-src="{{tag.imageUrl}}"></a>

解決方法は？

唯一の問題は、相対リンクとテンプレートがこのために正しく読み込まれないことです。

HTML5モードに関するドキュメントより

相対リンク

すべての相対リンク、画像、スクリプトなどを必ず確認してください。メインの html ファイルの head で url のベースを指定する必要があります ( <base href="/my-base"> で始まる)、または絶対URLを使用する必要があります。 / なぜなら、相対URLは、ドキュメントの最初の絶対URLを用いて絶対URLに解決されるからです（この絶対URLは、しばしばアプリケーションのルートとは異なります）。

あなたの場合、フォワードスラッシュを追加することができます。 / で href 属性 ( $location.path はこれを行います 自動的に ) に、また templateUrl を使用する場合、ルートを設定する必要があります。これにより、以下のようなルートを避けることができます。 example.com/tags/another で、テンプレートが正しく読み込まれるようにします。

以下は、動作する例です。

<div>
    <a href="/">Home</a> | 
    <a href="/another">another</a> | 
    <a href="/tags/1">tags/1</a>
</div>
<div ng-view></div>

そして

app.config(function($locationProvider, $routeProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider
    .when('/', {
      templateUrl: '/partials/template1.html', 
      controller: 'ctrl1'
    })
    .when('/tags/:tagId', {
      templateUrl: '/partials/template2.html', 
      controller:  'ctrl2'
    })
    .when('/another', {
      templateUrl: '/partials/template1.html', 
      controller:  'ctrl1'
    })
    .otherwise({ redirectTo: '/' });
});

Chromeを使用する場合は、サーバーから実行する必要があります。