2016-07-11 23 views
0

私はAngularJSの一種であるAngularJSでMVCを学び、AngularJSを初めて知りました。何らかの理由で、AngularJSルーティングが私のために機能していません。私は非常に多くの組み合わせを試みましたが、そのうちのものは働いていません私が間違っているかもしれない手掛かりはありますか?私が受け取るエラーは、MVCにビューメソッドが実装されていないリンクを持つボタンをクリックすると 'リソースが見つかりません'というメッセージです。AngularJsルーティングの問題404

レイアウト:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title>@ViewBag.Title - My ASP.NET Application</title> 
 
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" /> 
 
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
    <script src="~/Scripts/modernizr-2.6.2.js"></script> 
 
    <link href="~/Content/bootstrap-superhero.css" rel="stylesheet" /> 
 
    <script src="~/Scripts/angular.js"></script> 
 
    <script src="~/Scripts/angular-resource.js"></script> 
 
    <script src="~/Scripts/angular-route.js"></script> 
 
    <script src="~/Scripts/registration-module.js"></script> 
 
    @RenderSection("head", false) 
 
</head> 
 
<body> 
 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
 
     <div class="container"> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
       @Html.ActionLink("Application name xxx", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) 
 
      </div> 
 
      <div class="navbar-collapse collapse"> 
 
       <ul class="nav navbar-nav"> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="container body-content" ng-app="registrationModule"> 
 
     @RenderBody() 
 
     <hr /> 
 
     <footer> 
 
      <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p></footer> 
 
    </div> 
 

 
    <script src="~/Scripts/jquery-1.10.2.min.js"></script> 
 
    <script src="~/Scripts/bootstrap.min.js"></script> 
 

 

 
</body> 
 
</html>

public class RouteConfig 
 
    { 
 
     public static void RegisterRoutes(RouteCollection routes) 
 
     { 
 
      routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); 
 

 
      routes.MapRoute(
 
       name: "Default", 
 
       url: "{controller}/{action}/{id}", 
 
       defaults: new { controller = "Registration", action = "Index", id = UrlParameter.Optional } 
 
      ); 
 

 
      //routes.MapRoute(
 
      // name: "Application", 
 
      // url: "{*url}", 
 
      // defaults: new { controller = "Registration", action = "Index" }); 
 
     } 
 
    }

角度登録:

angularJsクライアント側のルーティングがある前に、MVCのルーティングが処理されているように思えます

var registrationModule = angular.module("registrationModule", ['ngRoute','ngResource']) 
 
    .config(function ($routeProvider, $locationProvider) { 
 
     //$routeProvider.when('/Registration/Courses', { templateUrl: '/Templates/courses.html', controller: 'CoursesController' }); 
 
     $routeProvider.when('/Registration/Courses', { templateUrl: '/Templates/test.html' }); 
 
     $routeProvider.when('/Registration/Instructors', { templateUrl: '/Templates/instructors.html', controller: 'InstructorsController' }); 
 
     $routeProvider.otherwise({ redirectTo: '/' }); 
 
     $locationProvider.html5Mode(true); 
 
    });

ビュー

@model Ang2.Models.Registration.Registration 
 

 
@{ 
 
    ViewBag.Title = "Index"; 
 
} 
 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="navbar navbar-default"> 
 
      <div class="navbar-header"> 
 
       <ul class="nav navbar-brand"> 
 
        <li><span class="navbar-brand"></span></li> 
 
       </ul> 
 
      </div> 
 
      <div class="navbar-collapse collapse"> 
 
       <ul class="nav navbar-nav"> 
 
        <li><a href="/Registration/Courses">Browse Catalog</a></li> 
 
        <li><a href="/Registration/Instructors">Browse Instructors</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div ng-view></div> 
 

 
</div>

物理ファイルが存在します。

enter image description here

+0

私の最初の解決策は、$ locationProvider.html5Mode({enabled:true、requireBase:false}); – lucas

答えて

0

HTML5ルーティングモードhtml5Mode(true)を使用しているようですが、ベースURLを指定していないため、角度はルーティングの開始位置を知るようにしています。 HTML5モードを無効にする(falseに設定する)か、<base>タグを使用してベースを指定するかのいずれかを試みることができます。

サーバー側(C#コード)は完全に無関係であり、クライアント側のルーティングには使用されません。角度ルーティングはクライアント側のみであり、サーバー自体を呼び出すわけではないので、コントローラの呼び出しは期待しないでください。つまり、 "view"はC#で処理されません。単純なhtmlが得られます。

あなたはルーティングサーバー側をしているように見えるので、まったく角度ルーティングは必要ありません。

+0

お返事ありがとうございます。 AngularJSルーティングが必要なので、私は質問を投稿しました。 MVCとAngularJSの両方が必要です。私はそれが可能であることを知っている。なぜこれが動作していないのか理解していない。そのベースタグについては、AngularJSルーティングを動作させるためには何が必要ですか? registrationModuleは正しく見えます。これらのhtmlテンプレートは動作しません。 – lucas

+0

Angularはブラウザで動作し、クライアント側のフレームワークなので、サーバ側のルーティングはできません。あなたはC#で処理されるはずのhtmlビューをリクエストしようとしています(それは、@ ViewBag.Titleのような要素を持つ、かみそりエンジンを使用します)。それは意味をなさないと思われる。とにかく、ベースは '" 'のように使用され、hrefはクライアント側ルーティングが開始される場所に設定されます。 – Nikolay

+0

私はそれを認識しています。解決策:$ locationProvider.html5Mode({enabled:true、requireBase:false});ありがとう – lucas