Angular ngRouteが正しく動作しない

私はAngularルートの例で作業していますが、何らかの理由で動作しません。Angular ngRouteが正しく動作しない

私は多くのページや多くのことを試しましたが、役に立たないようです。ここで

は何かアドバイスは楽しいだろう

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8" /> 
    <script src="../Scripts/angular.min.js"></script> 
    <script src="../Scripts/angular-route.min.js"></script> 
    <script> 
     var app = angular.module("Main", ["ngRoute"]); 

     app.config(["$routeProvider", function ($routeProvider) { 
      $routeProvider. 
      when("/first", { 
       templateUrl: "_Pages/test.html", 
       controller: "first" 
      }). 
      when("/second", { 
       templateUrl: "_Pages/index.html", 
       controller: "second" 
      }); 
     }]); 

     app.controller("first", function ($scope) { 
      $scope.list = [1, 2, 3, 4, 5]; 
     }); 

     app.controller("second", function ($scope) { 
      $scope.list = [1, 2, 3]; 
     }); 
    </script> 
</head> 

<body ng-app="Main"> 
    <ul> 
     <li> <a href="#/first"> first partial </a> </li> 
     <li> <a href="#/second"> second partial </a> </li> 
    </ul> 
    <div ng-view></div> 
</body> 

</html>

です！

出典

2017-02-01 Joris van Balkom

コンソール上の任意のエラーを得ましたか？ –

サンプルを作成します。

あなたは

<script src="http://code.angularjs.org/1.4.8/angular.js"></script>  
<script src="https://code.angularjs.org/1.2.16/angular-route.min.js"></script>

（または）

、してファイルのインクルードコードを置き換えるのいずれかがここからコード全体をコピーします。角度JS &ルートの作業バージョンは次のとおりです。

DEMO

注：私はデモの目的のためにtemplateにtemplateUrlを変更しました。

出典

2017-02-01 10:46:42

ありがとうございました。私はhttp部分を削除できるように、正しいスクリプトを組み込むことができました。 –

正常に動作しているようです。そして角度バージョンがルートと互換性があることを確認してください。私はそれがあなたの角度のjsファイルのインクルードでのバージョンの問題があることが考えられますPlunker

<script data-require="[email protected]" data-semver="1.5.10" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script> 
<script data-require="[email protected]" data-semver="1.2.0-rc1" src="https://code.angularjs.org/1.2.0rc1/angular-route.js"></script>

出典

2017-02-01 10:38:11

私はそれを配備すれば私のプロジェクトに正しいライブラリを含めるつもりはないと思っていますか？正しいバージョンが含まれていることを確認するにはどうすればよいですか？私はバージョン1.5.10とバージョン1.2.0 rc1を私のプロジェクトにnugetを使って含めるべきですか？ –

1.4.8と1.2.16を使ったいくつかのバージョンではすでに動作しています。最新バージョンのAngleにアップグレードすると、次のコメントで解決できない問題が発生します。 –

Angular 1.6を使用している場合は、おそらくデフォルトのハッシュプレフィックスの変更が必要です。これは、v1.6.0以降のものです。これは""（空文字列）でしたが、!はデフォルトのハッシュ接頭辞です。

<li> <a href="#!/first"> first partial </a> </li> 
<li> <a href="#!/second"> second partial </a> </li>

それとも

をアプリに$locationProviderを注入することによって、ハッシュプレフィックスを削除し、次のよう

があなたのリンクを変更し...どちらか、この問題を解決するには

。次のように空文字列にハッシュ接頭辞を設定します。

app.config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) { // with this the links can remain: href="#/first" and href="#/second" $locationProvider.hashPrefix(""); $routeProvider. when("/first", { templateUrl: "_Pages/test.html", controller: "first" }). when("/second", { templateUrl: "_Pages/index.html", controller: "second" }); }]);

参考資料：

Angular Issues - Angular 1.6.0 incorrectly redirects to hashbang

Angular Docs - Migrating from v1.5 to 1.6

出典

2017-02-01 10:58:51

Angular ngRouteが正しく動作しない

答えて

関連する問題