Как можно сделать чтобы левая часть сайта не изменялась, а правая прогружалась с Loader'ом?

Question

[Ivan Stroykin]

Доброго времени суток,

Возник такой вопрос на днях. Как можно сделать следующее:
Есть сайт (пока он только в макете, еще даже не сверстан). Левая часть (логотип, навигация, и соц.кнопки) всегда статичны и присутствуют на всех страницах сайта. А вот правая часть имеет разных контент (в зависимости от выбранной страницы).
Сама суть вопроса: как можно сделать так, чтобы при переходе, к примеру, по ссылке "Дизайн интерьера" левая (статичная) панель показывалась сразу, а в правой части появлялся "Loader" и содержимое прогружалось и после чего "Loader" исчезал и плавно появлялся контент?

К сожалению я не силен в AJAX. Только в PHP. Даже простые советы в виде примеров будут очень сильно полезны.
Вот такой скелет:

Answer 1

[Андрей]

pjax.herokuapp.com
или банально $( "#result" ).load( "ajax/test.html" );

<a href="page1.html">Ссылка 1</a>
<a href="page2.html">Ссылка 2</a>

$("a").on("click", function () {
    $( "#result" ).load( $(this).prop("href") );
    return false;
})

Comments

[Андрей]

при необходимости добовляй хэши и смотри как правильно это делать для яндекса и гугла чтоб проиндексировали норм

Answer 2

[Pshkll]

AngularJS

Comments

[Ivan Stroykin]

Премного благодарен. Однако появился вопрос, так как не нашел ответа в тексте. Адрес в адресной строке будет меняться? Потому что это очень важно как для пользователей, так и для поисковых машин.

[Pshkll]

Что мешает скачать исходники и посмотреть? Будет меняться так index.html#/about

[Ivan Stroykin]

Pshkll: Такое, к сожалению, очень плохо скажется на взаимодействии с поисковыми машинами :(

[Pshkll]

Вы сами ответили на свой вопрос)

[Ivan Stroykin]

Pshkll: Может быть есть какой-то другой вариант?) Буду рад услышать мнение.

[Николай]

Иван Стройкин: при использовании html5mode в ангуляре urlы будут без хешей, если вы об этом. Если надумаете использовать ангулар - сразу знакомьтесь с angular-ui-router, он лучше чем стандартный.

[Ivan Stroykin]

Николай: Нужно попробовать. Думаю всё будет идти методом проб и ошибок и в итоге затратится довольно много времени...эх. чего не сделаешь, чтобы получилось красиво. Спасибо

[Николай]

Иван Стройкин: если у вас не особо тяжелые темплейты - можете сами написать свой велосипед: делаем в правой части контейнер, при навигации пользуемся history Api для обновления url, а темплейт грузим ajax'ом и вставляем в наш контейнер. Но таким я рекомендовал бы заниматься только будучи уверенным в своих знаниях js

[Ivan Stroykin]

Николай: "Уверенным в своих знаниях js"...эх, тут похвастаться, к сожалению, нечем :)

Answer 3

[Николай]

Самый простой( в плане времени и комтылей) вариант - взять фреймворк с роутингом. Ангуляр очень хорош для SPA, да и не сказать чтобы сильно сложный в освоении, но время конечно потратить придется.