Выберите .state на странице reload angularjs (используя угловой ui-router)

Я разрабатываю приложение ASP.NET MVC 5. Я загружаю частичный вид через угловой 'ui.router' на div на родительской странице. Маршрутизация работает отлично до тех пор, пока я не обновляю страницу - чем частичное представление загружается на целую страницу, но я хочу, чтобы она по-прежнему загружалась как частичная.Выберите .state на странице reload angularjs (используя угловой ui-router)

Это мой код. Родитель вид, FirstPage.cshtml:

<html ng-app="myApp"> 
<head> 
    <base href="/"> 
    <title>First Page</title> 
    <script src="/Scripts/Angular/angular.js"></script> 
    <script src="/Scripts/Angular/angular-ui-router.js"></script> 
    <script src="/Scripts/app.js"></script> 
</head> 
<body> 
    <h1>First Page</h1> 
    <ul id="myMenu"> 
     <li ui-sref="customer">Customer</li> 
    </ul> 
    <div ui-view="containerOne"></div> 
</body> 
</html>

Это мой app.js:

var myApp = angular.module("myApp", ['ui.router']); 

var proposalConfig = function ($stateProvider, $locationProvider) { 

$locationProvider.hashPrefix('!').html5Mode(true); 

$stateProvider 
    .state('customer', { 
     url: 'Proposal/Customers', 
     views: { 
      "containerOne": { 
       templateUrl: '/Proposal/Customers' 
      } 
     } 
    }); 
} 

proposalConfig.$inject = ['$stateProvider', '$locationProvider']; 

myApp.config(proposalConfig);

Моего RouteConfig.cs:

routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); 

routes.MapRoute(
    name: "ProposalCustomers", 
    url: "Proposal/Customers", 
    defaults: new { controller = "Proposal", action = "Customers" }); 

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

Моего ProposalController.cs:

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

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

Мои изображения/Предложения/Customers.cshtml:

<h2>Customer list</h2>

Я надеюсь, что моя проблема понятна.

EDIT:

Я изменил свой RouteConfig.cs следующего решения из этой статьи:

http://www.codeproject.com/Articles/806500/Getting-started-with-AngularJS-and-ASP-NET-MVC-P

иметь маршрут по умолчанию, как это:

routes.MapRoute(
      name: "Default", 
      url: "{*url}", 
      defaults: new { controller = "Proposal", action = "FirstPage" }

Когда я обновляю страницу с маршрутом точно так же, как мой controller/action, он по-прежнему загружает этот конкретный маршрут на целую страницу, а не как частичный. Если я изменил .state url на что-то еще, обновление страницы работает. Но все же, если я поместил вручную путь controller/action в URL-адрес, он будет отображать представление на целой странице вместо этого как частичное.

Есть ли способ избежать этого?

источник

2015-03-06 kiriz

Вы должны изменить вас ng-view к ui-view, как вы используете угловой $stateProvider не угловая $routeProvider

HTML

<body> 
    <h1>First Page</h1> 
    <ul id="myMenu"> 
     <li ui-sref="customer">Customer</li> 
    </ul> 
    <div ui-view=""></div> 
</body>

Вы stateProvider должны быть изменения, которые в настоящее время с помощью единого представления и вы объявили его как будто вы используете вложенные виды

Config

var myApp = angular.module("myApp", ['ui.router']); 

var proposalConfig = function($stateProvider, $locationProvider, $urlRouterProvider) { 

    $locationProvider.hashPrefix('!').html5Mode(true); 

    $urlRouterProvider.otherwise('/Proposal/Customers'); //default redirection if no route matched 

    $stateProvider.state('customer', { 
     url: '/Proposal/Customers', 
     templateUrl: '/Proposal/Customers', 
     controller: 'someController' //if you want 
    }); 

} 

proposalConfig.$inject = ['$stateProvider', '$locationProvider']; 

myApp.config(proposalConfig);

Надеюсь, это может вам помочь, спасибо.

источник

2015-03-06 10:37:29

Я ошибался здесь ... в моем решении у меня есть ui-view, и он не работает. – kiriz

Хорошо, так что я предполагаю, что вы сопоставили маршрут в своем приложении MVC для того же маршрута, что и ваше угловое приложение, в этом случае вы сопоставили «Предложение/Клиенты» на вашем MVC-маршрутизаторе и в ваш Угловой-UI-Router.

Итак, что происходит, если вы уже находитесь в своем угловом приложении, Угловой маршрутизатор имеет управление, и при навигации по нему он загружает шаблон в качестве дочернего шаблона и помещает HTML в нужное место. Когда вы обновляете, вы отправляете этот маршрут на маршрутизатор MVC, хотя, и он служит HTML в качестве страницы.

EDIT

забыл упомянуть, что это происходит потому, что у вас есть html5 маршрутизация включена.

источник

2015-03-07 05:17:40 Paul

Да, я знаю, в чем проблема, но я не знаю, как ее решить. :) Вы знаете? :) – kiriz

Единственное решение, о котором я знаю, это либо принудительное сопоставление с вашей начальной точкой AngularJS в ваших маршрутах MVC (т. Е. Изменение маршрутизации MVC), либо не использование маршрутизации HTML5 в вашем приложении AngularJS. Если вы используете символ #, MVC автоматически игнорирует его. Если вокруг есть другой способ, я не знаю этого в данный момент. Может быть, кто-то, у кого есть некоторые сложные знания о маршрутизации маршрутов MVC, может рекомендовать жизнеспособное решение. – Paul

Выберите .state на странице reload angularjs (используя угловой ui-router)

ответ

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