Почему угловые маршруты не работают в ASP.NET MVC

Я новичок в angularjs и реализую его в ASP.NET MVC. Я прочитал несколько статей и реализовать код, как показано ниже,Почему угловые маршруты не работают в ASP.NET MVC

это мой макет страницы,

@{ 
    Layout = null; 
} 

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>angular demo</title> 
    <script src="~/Scripts/modernizr-2.6.2.js"></script> 
    <script src="~/Scripts/angular.js"></script> 
    <script src="~/Scripts/angular-route.js"></script> 
    <script> 
     var schoolModule = angular.module("schoolModule", ['ngRoute']); 

     schoolModule.config(function ($routeProvider) { 
     $routeProvider.when('/one', { 
      templateUrl: "Master/One", 
      controller: "OneController" 
     }) 
     .when('/two', { 
      templateUrl: "Master/Two", 
      controller: "TwoController" 
     }) 
     .when('/three', { 
      templateUrl: "Master/Three", 
      controller: "ThreeController" 
     }) 
     .otherwise({ 
      redirectTo: 'Master/One' 
     }); 
    }); 


     schoolModule.controller("OneController", function ($scope) { 
      $scope.message = "One message"; 
     }); 


     schoolModule.controller("TwoController", function ($scope) { 
      $scope.message = "Two message"; 
     }); 


     schoolModule.controller("ThreeController", function ($scope) { 
      $scope.message = "Three message"; 
     }); 
    </script> 
</head> 
<body ng-app="schoolModule"> 
    <header>Title</header> 
    @RenderBody() 
    <footer>Footer here</footer> 
</body> 
</html>

Моя страница Индекс,

@{ 
    ViewBag.Title = "Index"; 
    Layout = "~/Views/Shared/_Master.cshtml"; 
} 
<a href="/#/one">One</a> 
<a href="/#/two">Two</a> 
<a href="/#/three">Three</a> 
<div ng-view> 
</div>

Я также создал 3 частичный вид, только с сообщениями ,

<div ng-controller="OneController"> 
    {{message}} 
</div>

Вот, когда я запускаю проект, расположенный по адресу,

http://localhost:52211/Master/index#/Master/one

при нажатии на вторую кнопку, он перенаправляет меня на другой контроллер и действие, но гиперссылка есть

http://localhost:52211/#/two

и он переходит на главный контроллер, указатель.

Скажите, пожалуйста, какую ошибку я здесь делаю и как заставить ее работать? Спасибо.

источник

2015-12-17 Keval Patel

Это, как я ее решил, если кто-то и получает проблемы с той же вещи,

@{ 
    Layout = null; 
} 

<!DOCTYPE html> 

<html> 

<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>angular demo</title> 
    <script src="~/Scripts/modernizr-2.6.2.js"></script> 
    <script src="~/Scripts/angular.js"></script> 
    <script src="~/Scripts/angular-route.js"></script> 
    <script> 
     var schoolModule = angular.module("schoolModule", ['ngRoute']); 

     schoolModule.config(function ($routeProvider, $locationProvider) { 
      $routeProvider.when('/One', { 
       templateUrl: "/Master/One", 
       controller: "OneController" 
      }) 
      .when('/two', { 
       templateUrl: "/Master/Two", 
       controller: "TwoController" 
      }) 
      .when("/three", { 
       templateUrl: "/Master/Three", 
       controller: "ThreeController" 
      }); 

     }); 
     schoolModule.controller("OneController", function ($scope, callService, callFactory) { 
      //$scope.message = "One message"; 
      //$scope.message = callService.message(); 
      $scope.message = callFactory.message(); 
     }); 
     schoolModule.controller("TwoController", function ($scope) { 
      $scope.message = "Two message"; 
     }); 
     schoolModule.controller("ThreeController", function ($scope) { 
      $scope.message = "Three message"; 
     }); 

     schoolModule.factory("callFactory", function($http){ 
      var serviceObj = {}; 
      serviceObj.message = function() { 
       return "Result from factory"; 
      }; 
      return serviceObj; 
     }); 

     schoolModule.service("callService", function ($http) { 
      this.message = function() { 
       return "Result from service"; 
      }; 
     }); 
    </script> 
</head> 
<body ng-app="schoolModule"> 

    <header>Title</header> 
    @RenderBody() 

    <footer>Footer here</footer> 
</body> 
</html>

мой взгляд Индекс,

@{ 
    ViewBag.Title = "Index"; 
    Layout = "~/Views/Shared/_Master.cshtml"; 
} 

<a href="#/One">One</a> 
<a href="#/two">Two</a> 
<a href="#/three">Three</a> 
<ng-view></ng-view>

источник

2015-12-18 17:03:59

Вам необходимо установить тег HTML5 <base>. Из AngularJS documentation:

Относительные ссылки

Обязательно проверьте все относительные ссылки, изображения, скрипты и т.д. Угловая требует указать URL-адрес базы в голове основного HTML-файла (<base href="/my-base">) если только html5Mode.requireBase не установлен в false в объекте определения html5Mode, переданном $locationProvider.html5Mode(). При этом относительные URL-адреса всегда будут разрешены для этого базового URL-адреса, даже если исходный URL-адрес документа отличается.

В вашей странице макета, добавьте базовый URL с задней косыми чертами. Например:

<base href="/Master/index/" />

источник

2015-12-17 03:43:00

Это сделало мой URL чистый, но представления не отображаются в теге div ng-view. –

Когда вы используете тег 'base', ваши ресурсы также будут относиться к базе, поэтому вам нужно будет обновить свой' templateUrl' соответственно. –

@ KevalPatel это сработало для вас? –

Bro убедитесь, что у вас есть one, two и three метод действия с точки зрения в MasterController.

Держите <div ng-view></div> только в Index странице. Он должен работать должным образом.

источник

2015-12-17 05:45:25

Почему угловые маршруты не работают в ASP.NET MVC

ответ

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