AngularJs routing issue 404

Я совершенно новый для AngularJS, пытаясь узнать MVC с AngularJS, своего рода мини-SPA. По какой-то причине маршрутизация AngularJS не работает для меня. Я пробовал столько комбинаций, но не работал. Какие-нибудь подсказки, что я могу ошибаться? Ошибка, которую я получаю, это «Не удается найти ресурс» 404 при нажатии на кнопку со ссылкой, для которой MVC не имеет метода представления. Похоже, что MVC маршрутизация обрабатывается на стороне клиента, прежде чем angularJs маршрутизация является:AngularJs routing issue 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" }); 
 
     } 
 
    }

Угловой регистрация:

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>

Физические файлы существуют:

источник

2016-07-11 lucas

Мое начальное решение для выше: $ locationProvider.html5Mode ({enabled: true, requireBase: false}); – lucas

Кажется, вы используете режим маршрутизации HTML5 html5Mode(true), но не указали базовый url, чтобы угловые знали, с чего начать маршрутизацию. Вы можете попробовать либо отключить режим HTML5 (установить его значение false), либо указать базу, используя тег <base>.

Обратите внимание, что серверный код (код C#) полностью не связан и не используется для маршрутизации на стороне клиента. Также обратите внимание, что вы не должны ожидать, что ваши контроллеры будут вызваны, потому что угловая маршрутизация является только клиентской, она сама не вызывает сервер. Значит, «view» НЕ обрабатывается C#, вы просто получите простой html.

В целом, похоже, вам не нужна угловая маршрутизация вообще, поскольку вы, похоже, выполняете маршрутизацию на стороне сервера.

источник

2016-07-11 21:04:47 Nikolay

Спасибо за ответ. Мне нужна маршрутизация AngularJS, поэтому я опубликовал вопрос. Мне нужны оба, MVC и AngularJS. Я знаю, что это возможно. Не понимаю, почему это не работает. Что относительно этого базового тега, что мне нужно сделать, чтобы сделать работу маршрутизации AngularJS. Образец регистрации выглядит корректно. Он не работает с этими шаблонами html. – lucas

Угловой не может выполнять маршрутизацию на стороне сервера, поскольку он работает в браузере и является клиентской структурой. Вы пытаетесь запросить html-представление, которое должно обрабатываться C# (оно использует механизм бритвы, т. Е. Имеет элементы типа '@ ViewBag.Title'). Кажется, это не имеет смысла. В любом случае, база используется как this '" ', устанавливает href там, где должна начинаться маршрутизация на стороне клиента. – Nikolay

Я знаю, что я не думаю, что вы понимаете проблему, nvm, это кажется для решения: $ locationProvider.html5Mode ({enabled: true, requireBase: false}); Спасибо – lucas

AngularJs routing issue 404

ответ

Смежные вопросы