Как я могу условно перенаправить, сразу после подачи index.html в AngularJS SPA? - PullRequest
Новая
       9

Как я могу условно перенаправить, сразу после подачи index.html в AngularJS SPA?

0 голосов
/ 07 мая 2018

У нас есть сайт, который обслуживает файл index.html, используя Asp.net MVC при попадании в корень, а затем использует AngularJS 1.2.4 в качестве одностраничного приложения. Мне нужно обслуживать SPA, но хотелось бы сразу перенаправить на маршрут. Обычно пользователь нажимает на ссылку в письме, и мне нужно отправить его по этому маршруту.

Обслуживание Index.html следующим образом: 

    [AllowAnonymous]
    public ActionResult Index()
    {
        CachingUtility.SetNoCache(Response);
        var path = "index.html";
        if (Convert.ToBoolean(ConfigurationManager.AppSettings["UseDist"]))
        {
            path = "dist/index.html";
        }
        return File(path, "text/html");
    }

Отсюда AngularJS $ routeProvider вступает во владение: 

...
 .config(['$routeProvider', function ($routeProvider) {
    $routeProvider.otherwise({ redirectTo: '/home' });
 }])
 ...
 .config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/products', {
        templateUrl: '/application/app/product/products.html',
        controller: 'ProductsCtrl'
 });
 ... etc,

Есть ли другой способ, которым я могу обслуживать index.html, или что-то, что я могу сделать с маршрутизатором для достижения этой цели? Я стараюсь не обслуживать совершенно новый SPA для этих нескольких маршрутов.

1 Ответ

0 голосов
/ 07 мая 2018

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

Для этого я бы порекомендовал вам использовать ui-router . Кроме того, я не работал ни с одним надежным приложением, которое не использует библиотеку, которая помогает вам с маршрутизацией.

Почему стоит его использовать?

Согласно следующему посту в разделе Почему вы должны использовать UI-Router у вас иногда есть несколько разделов в вашем представлении, когда, например, у вас есть нижний колонтитул, заголовок, боковая панель и т. Д., Которые являются переменным содержанием, поэтому эта мощная библиотека очень полезна. Поэтому, используя его, вы должны настроить провайдера состояния следующим образом: 

$stateProvider
    .state('contacts', {
    url: "/contacts",
    templateUrl: 'contacts.html'
})

Так что единственное, что вам нужно, это: myurl / contacts или все, что вы хотите, чтобы перейти из гиперссылки на вашу почту.

Если вы хотите что-то более мощное (, передавая параметры URL ), то, что я сделал, это установил маршрут, а также язык, который должен реализовывать маршрут при прибытии извне. И реализация будет выглядеть так: 

.state('signup', {
            url: 'myUrl + '/signup?lang',
            params: {
                lang: null
            },
            templateUrl: 'templates/signup.html',
            controller: 'signupCtrl'
        })

Если вы обратите внимание, я добавляю параметр, который я передаю, в конце URL, но по умолчанию он равен нулю, но это необходимо только при передаче параметра (вам потребуется только что-то вроде первого фрагмента ) После этого вам нужно получить параметры из вашего контроллера, а затем использовать их так, как вы хотите. 

$stateProvider.state('contacts.detail', 
   { url: '/contacts/:contactId',   
   controller: function($stateParams){
    $stateParams.contactId  //*** Exists! ***//
     },

Итак, в итоге, если вы решили использовать ui-router и он ответил на ваш вопрос

Есть ли другой способ, которым я могу обслуживать index.html, или что-то, что я можно сделать с роутером, чтобы добиться этого?

  1. Добавить библиотеку ui-router
  2. Настройте файл route.js
  3. Настройка stateProvider
  4. Передайте правильный URL-адрес гиперссылке в вашем письме.

Не уходите далеко от моего объяснения и попробуйте его без библиотеки ui-router, если вы чувствуете, что ваше приложение не будет слишком надежным.

...