Как настроить навигацию в AngularJS без #

Как настроить навигацию в AngularJS без #

Как настроить навигацию в AngularJS без #

Все очень просто. Здесь нет никаких заморочек. Если вам, как и мне не нравится навигация в стиле angular через #/, то вот решение. Достаточно в настройках роутинга своего приложения включить html5Mode. Делается это следующим образом:

$locationProvider.html5Mode(true);

Вся штука в том, что для использования url’ов без решетки angular использует методы html5, которые доступны не во всех браузерах. Поэтому, чтобы обезопасить свое приложение и чтобы все пользователи могли им воспользоваться, следует добавить проверку на работоспособность нужных методов в браузере. Сделать это можно следующим образом:

if(window.history && window.history.pushState){
    $locationProvider.html5Mode(true);
}

Простое условие-проверка позволяет выяснить поддерживает ли браузер нужные методы. Таким образом, целиком конфигурация приложения на данном этапе будет выглядеть примерно так:

myApp.config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider.
        when('/login', {
            templateUrl: 'views/page-login.html',
            controller: 'loginPageCtrl'
        }).
        when('/register', {
            templateUrl: 'views/page-register.html',
            controller: 'registerPageCtrl'
        }).
        otherwise({
            redirectTo: '/main'
        });

        if(window.history && window.history.pushState){
            $locationProvider.html5Mode(true);
        }
    }]);

Соответственно роутинг вы оставляете свой, я вставил несколько записей для примера.

Казалось бы все, теперь вы избавились от надоедливой решетки в url, но если на данном этапе вы попробуете открыть страницу любую и затем перезагрузить ее через браузер, у вас вылезет 404 ошибка. Это возникает, потому как нужно настроить сервер, чтобы он запросы переписывал на запросы с решеткой и отправлял их в ваше angular приложение. Если вы используете apache, как я, то это делается просто, созданием подобного .htaccess файла в корне вашего веб-приложения:

RewriteEngine On
Options FollowSymLinks

RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]

После создания данного файла у вас больше не будет проблем с перезагрузкой страницы и открытием ссылок в приложении без решетки.

Похожие записи
  • Как запустить веб приложение через NP... Как запустить веб приложение через NPM с помощью serve. Есть множество способов запустить свои web html проекты. Для этого потребуется веб-сервер. Есть несколько простых веб-серверов для nodejs, которые можно использовать для запуска приложений. Это очень удобно для разработки и отладки. В данной статье не берем Express, так как он довольно сложен для настройки и использования. [...]
  • Как отследить все Javascript события ... Привет, сегодня я хочу рассказать тебе о простом но очень полезном методе, который позволяет отследить все Javascript события в Chrome. Он тебе поможет отследить все события, все вызовы всех функций на твоем сайте. Очень полезная команда для отладки фронт-энда. [...]
  • Как пользоваться популярными трекерам... Как пользоваться популярными трекерами без стороннего софта, прокси серверов или расширений Все просто. Недавно я писал про один из способ улучшить работу вашего интернета, который вы можете найти здесь и здесь. Днс сервера гугла помогут вам с этим, но могут и не помочь, как было у меня, потому как провайдер блокировал весь трафик, поступающий с данного [...]
  • Встраивание Foundation в Laravel с по... Что такое Elixir? Elixir — это компонент Laravel, позволяющий без проблем встраивать scss, sass, less компоненты в ваш проект. С помощью данного компонента очень легко можно подключить любые фронт-энд пакеты из npm, скомпилировать их, вести версии. Инструкция Для начала, чтобы скомпилировать исходный код фронтэнд библиотек, как известно, вам необходимо установить node с менеджером пакетов npm. [...]
  • ORM для CodeIgniter Недавно я писал про свой небольшой проект — доработку для CodeIgniter. Прочитать предыдущие статьи вы можете здесь. Здесь пойдет речь о упрощенной версии этого проекта, которую вы можете найти здесь. Собственно второй проект является упрощенной версией первого, так как не содержит моих методов для получения данных. Если вы искали именно это, то прошу. Генераторы моделей [...]

Пока нет комментариев

Добавить комментарий