2017-01-23 12 views
1

私は私が最初にルートを使用しようとしているが、何かがそれと間違っている、これは動作していない、角度の勉強:AngularJSルーティングとASP.net MVC

これは私のメインの図である(UsingDirectivesWithDataBinding .cshtml):

@{ 
    Layout = null; 
} 

<html> 
<head>  
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
    <script type="text/javascript" src="~/Scripts/angular-route.js"></script> 
    <script type="text/javascript" src="~/Scripts/AngularFile.js"></script> 
    <title> 
     Using AngularJS Directives and Data Binding 
    </title> 
</head> 
<body> 

    <div data-ng-app="myApp" data-ng-controller="SimpleController">  
     <a href="#/view1"> View 1</a> 
     <a href="#/view2"> View 2</a> 
     <div data-ng-view=""></div> 
    </div> 

</body> 
</html> 

あなたが見ることができるように、私はこのルートを呼び出す2つのリンクがあります:「#/ VIEW2」またはその1:「#/ VIEW1」を、それは代わりに、ホームコントローラのインデックスページに私を取っています同じページに滞在し、表示したい部分的なビューを表示します。これは私のJavascriptファイル(AngularFile.jsが)され

public ActionResult UsingDirectivesWithDataBinding() 
     { 
      return View(); 
     } 

     public PartialViewResult View1() 
     { 
      return PartialView(); 
     } 

     public PartialViewResult View2() 
     { 
      return PartialView(); 
     } 

:なぜ

var app = angular.module("myApp", ["ngRoute"]); 
app.controller("SimpleController", function ($scope) { 
    $scope.firstName = "John"; 
    $scope.lastname = "Doe"; 
    $scope.customers = [ 
     { name: "Dave Jones", city: "Phoenix" }, 
     { name: "Jamie Riley", city: "Atlanta" }, 
     { name: "Heedy Rowt", city: "Memphis" }, 
     { name: "Thomas Winter", city: "Seattle" } 
    ]; 
}); 

app.config(function ($routeProvider) { 
    $routeProvider.when("/view1", { 
     templateUrl: "/Home/View1", 
     controller: "SimpleController" 
    }) 
    .when("/view2", { 
     templateUrl: "/Home/View2", 
     controller: "SimpleController" 
    }) 
    .otherwise({redirectTo : "/view1"}) 
}) 

が動作していないこれは、ホームコントローラで、私が持っているコードですか?

+0

の可能性のある重複した[代わりに、単純なハッシュのURLのハッシュ・バン(#!/)プレフィックス(#/)](http://stackoverflow.com/questions/41226122/url-hash-bang-prefix-simple-hashの代わりに) – Mistalis

答えて

1

角度1.6では、新しいHashPrefixを使用して、#/ view1を#!/ view1に変更しようとします。

0

私は、サーバー側(ASP.net)ルーティングとクライアント側(Angular.js)ルーティングを混乱させると思います。あなたがASP.netからビューをレンダリングしようとしているのかどうかは分かりません。はいの場合、残念ながら、これは動作しません。角度ルータは、ビューを取得するためのサーバコールを行いません。ビューはクライアントサイドでテンプレート(HTML静的ファイル)としてすぐに利用でき、角度はテンプレート上で(APIからフェッチして)データをレンダリングする必要があります。

したがって、この行templateUrl: "/Home/View1"templateUrl: "/Home/View1.html"になります。ここで、View1.htmlは静的なファイル(角度テンプレート)です。詳細については

はこれをチェック>AngularJs routing with Asp.Net Mvc

関連する問題