Угловая маршрутизация с ASP MVC

У меня есть тестовый проект MVC, над которым я работаю, чтобы посмотреть, смогу ли я заставить угловую маршрутизацию работать с ним.

Что я имею в виду под работой с ним, так это то, что я хочу иметь целевую страницу для своего приложения: www.testapp.com

Затем, когда люди входят в систему, я хочу, чтобы MVC перенаправлял их на testapp.com/Dashboard/#/, а затем я хочу иметь возможность использовать ng-view для загрузки страниц с помощью Angualar, например: testapp.com/Dashboard/#/PageOne, testapp.com/Dashboard/#/PageTwo и т. д.

Вот что я пробовал: main.js:

angular.module('App', ['ngRoute', 'ngResource']);

angular.module('App').config(function ($routeProvider) {
    $routeProvider
    .when('/Dashboard', {
        templateUrl: 'Dashboard/Index'
    })
    .when('/PageOne', {
        templateUrl: 'Dashboard/PageOne'
    })
});

~/Views/Home/Index.cshtml была моей целевой страницей, которая не использовала угловую маршрутизацию, на ней были только ActionLinks для входа и регистрации.

~/Views/Dashboard/Index.cshtml — это место, где я использовал ng-app и ng-view, и у меня были такие ссылки: <a href="/#/Dashboard">Dashboard</a>, <a href="/#/PageOne">Page One</a>

Проблема в том, что когда я захожу на testapp.com/Dashboard, когда он загружается, URL-адрес превращается в testapp.com/Dashboard#/, а не testapp.com/Dashboard/#/

Другая проблема заключается в том, что когда я нажимаю на свои ссылки, они возвращаются прямо на главную страницу/индекс, а URL-адрес выглядит так: testapp.com/#/PageOne, но отображается главная страница.

в моем файле RouteConfig.cs это просто значение по умолчанию:

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

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

Итак, мой вопрос: что не так с моим кодом, из-за чего он не работает так, как я хочу? Что мне добавить/изменить?

Благодарю вас!


angularjs asp.net-mvc asp.net-mvc-routing angularjs-ng-route
person DevShadow    schedule 12.10.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Итак, я понял, что проблема была в том, как я пишу свои ссылки. Как только мое фактическое приложение angular было загружено (я был на панели инструментов, а не на целевой странице, где инициализируется angular), мне пришлось изменить hrefs тега привязки с \#\{Route} на '/Dashboard/#/{Route}'. Вот моя обновленная конфигурация углового маршрута:

angular.module('App').config(function ($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: 'Index'
    })
    .when('/PageOne', {
        templateUrl: 'PageOne'
    })
});

Это полностью решило мою проблему, поэтому теперь я могу использовать угловую маршрутизацию, когда это необходимо, а также иметь MVC ActionLinks в моем приложении.

Надеюсь, это поможет кому-то еще!

ПРИМЕЧАНИЕ

Я ничего не менял в своем MVC RouteConfig.cs, вы можете оставить значение по умолчанию. Также мне пришлось избавиться от ViewStart, потому что это все портило.

person DevShadow    schedule 12.10.2016