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

-1

Извините, если это слишком простой вопрос, здесь есть угловой + jQuery + HTML/CSS noob.Имейте навигационную панель, не перезагружаемую при загрузке каждой страницы.

У меня есть веб-сайт (www.blog.nishantkelkar.org), который имеет навигационную панель. В нем есть несколько вкладок, один из которых «Обо мне». Мне нужна страница не перезагрузите, когда пользователь нажимает на вкладку «Обо мне». Я предполагаю, что это неэффективно, и экономия времени загрузки для навигатора (который будет постоянно оставаться постоянным на моем сайте) - это хорошо?

Я использую библиотеку с открытым исходным кодом для Bootstrap Twitter для стилизации на моей веб-странице и AngularJS для управления действиями (например, щелчками вкладки).

Мое усилие: У меня есть контроллер, который устанавливает ng-class = "active" в зависимости от того, нажата ли вкладка. Однако он загружает весь href для этой вкладки (всего html), а не только разницу в html.

Спасибо и любая/вся помощь приветствуется!

источник

2016-02-25 Nishant Kelkar

рекомендует отображать и скрывать соответствующие div с помощью JQuery, почти аналогичные целевой странице или веб-сайту одной страницы. В качестве альтернативы вы можете использовать ajax для загрузки страниц в div и сохранить статическое меню, но что вы пробовали? – TrojanMorse

Вы можете использовать [ngRoute] (https://docs.angularjs.org/api/ngRoute), чтобы получить инъекционный динамический контент в контейнер на своей странице, не перезагружая другой контент, который должен оставаться статичным. – 1252748

@person, кто отказался: Могу ли я узнать почему? Я перечислил, что я noob, перечислял свои усилия, четко описал свою проблему. Что еще требуется? –

ng-view и ng-route получите работу для вас.

Просто определите свои взгляды, используя $routeProvider.

Вот пример кода

Главная

<body> 
<header> 
<nav class="navbar navbar-default" ng-controller="HeaderController"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Sample App</a> 
    </div> 
    <ul class="nav navbar-nav"> 
     <li ng-class="{ active: isActive('/')}"><a href="#/">Home</a></li> 
     <li ng-class="{ active: isActive('/about')}"><a href="#/about">About</a></li> 
    </ul> 
    </div> 
</nav> 
</header> 
<ng-view></ng-view> 
</body>

app.js (маршрут конфигурации)

(function() { 

var app = angular.module('sampleApp',['ngRoute']); 

app.config(function ($routeProvider){ 
    $routeProvider 
     .when('/',{ 
      templateUrl:'home.html' 
     }) 
     .when('/about',{ 
      templateUrl:'about.html' 
     }) 
     .otherwise({ redirectTo:'/'}); 
}); 
})();

и HeaderController выделить активные вкладки

(function() { 

var headerController = function ($scope, $location) 
{ 
    $scope.isActive = function (viewLocation) { 
     return viewLocation === $location.path(); 
    }; 
}; 

angular.module('sampleApp').controller('HeaderController',headerController); 
}());

Вот plunker demo

источник

2016-02-25 05:38:22

Downvoters. Не могли бы вы оставить комментарий? –

Большое спасибо @Sachin за пример проекта! Теперь я понимаю намного больше! =) –

рад это узнать. Pls голосуйте, если мой ответ помог вам –

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

Угловые имеют встроенную маршрутизацию на стороне клиента (ng-route), а также сторонний ui-router (это лучше, но сложнее для понимания).

Это означает, что у вас должно быть несколько отдельных файлов: mail.html и несколько page.html.

в main.html вы должны добавить свой заголовок. И директива ng-view (для ng-route). Это будет работать как местозаполнитель, где вы будете отображать ваши страницы.

И На странице. Html вы должны просто добавить основную информацию о странице.

Это похоже на использование на других языках.

Но Важный: вся клиентская маршрутизация имеет плохую сделку с поисковой системой. Таким образом, SEO для всех приложений с одной страницей, например, с угловым, это немного проблематично.

Так, другими словами, если SEO важно для вас, может быть, вы должны отдавать предпочтение маршрутизации серверной основе (по крайней мере, как старой школы, PHP или любой другой, чтобы сделать ваши страницы)

Bonus (оффтоп) Если вам нужен только статический блог (без бэкэнд), но простой для обслуживания, вы можете использовать что-то вроде Jekyl. Это инструмент, который будет генерировать статические страницы из json во время сборки. Вы можете найти несколько альтернатив jekyl для разных платформ (ruby, nodejs и т. Д.). В этом случае вы сможете размещать свои страницы на любом статическом хостинге, like pages.github.com. Вот как использовать jekyl с gh-страницами: link.

источник

2016-02-25 05:46:43

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

ответ

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