Ссылки на маршрутизацию AngularJS не работают при перезагрузке

Question

Я занимаюсь мини-проектом, используя API TMDb и AngularJS. Работает функция угловой маршрутизации, и я могу загрузить данные фильма по щелчку. Щелчок на домашней странице приведет вас к . Подробности вид и URL-адрес изменяется на movie/:id/:title, и теперь, если пользователь нажимает на другой фильм, присутствующий в окне ,, соответствующие данные для недавно щелкнутого фильма заменяют предыдущие данные. Теперь, если я попытаюсь вернуться с помощью браузера, данные предыдущего фильма не загружаются, но URL-адрес показывает название предыдущего фильма.

Наряду с этой ошибкой, есть еще одна ошибка. Когда я пытаюсь перезагрузить браузер, он вызывает 404 Ошибка. Если я повернусь html5Mode(true), это произойдет. Если я отключен html5Mode, страница не отображает соответствующую информацию, но показывает мне пустой шаблон в представлении. Я просто новичок в AngularJS. Я не знаю, как это исправить. Я упомянул домен, в котором я размещал сайт. Думаю, глядя на это было бы легче понять мою проблему. Надеюсь, кто-то здесь может мне помочь.

URL ПРОЕКТ:http://movie-buffs.xyz/

Это мой код маршрутизации.

.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider){ 
      $routeProvider 
      .when('/',{ 
       templateUrl:'templates/movies.html' 
      }) 
      .when('/movies/:id/:title',{ 
       templateUrl:'templates/moviedetails.html' 
      }) 
      .when('/search',{ 
       templateUrl:'templates/search.html' 
      }) 
      .when('/tv',{ 
       templateUrl:'templates/tv.html' 
      }) 
      .when('/tv/:id/:title',{ 
       templateUrl:'templates/tvdetails.html' 
      }) 
      .when('/celebs',{ 
       templateUrl:'templates/celebs.html' 
      }) 
      .when('/celebs/:id/:name',{ 
       templateUrl:'templates/celebsdetails.html' 
      }) 
      .when('/contact',{ 
       templateUrl:'contact_us.html' 
      }) 

      .otherwise({ 
       redirectTo:'/' 
      }); 

    $locationProvider.html5Mode(true); 
     }]); 

Answer 1

Решение 1

angularjs обеспечивает html5Mode, что делает ваше приложение использовать PushState на основе URL вместо хэштегов. Однако для этого требуется поддержка на стороне сервера, так как генерируемые URL-адреса также должны отображаться правильно.

Просто скопируйте файл index.html в 404.html, и добавьте в ваше приложение:

angular.module('app', []).config(function($locationProvider) { 
    $locationProvider.html5Mode(true); 
}); 

Пожалуйста найти this ссылку для получения дополнительной информации

Solution 2

открыт индекс. html страница и в головной секции добавить

<base href="/"> 

Ваш Угловой код позволит html5Mode

angular.module('main', []).config(['$locationProvider', function($locationProvider) { 
     ... 
     $locationProvider.html5Mode(true); 
     ... 
    }); 

После этого, вам нужно создать файл .htaccess в корневом каталоге вашего сервера Apache совместно как ваши используют сервер Apache добавьте ниже кода

Сервер Apache

RewriteEngine On 
    # If an existing asset or directory is requested go to it as it is 
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] 
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d 
    RewriteRule^- [L] 

    # If the requested resource doesn't exist, use index.html 
    RewriteRule^/index.html 

сервер IIS

<rewrite> 
  <rules> 
    <rule name="AngularJS" stopProcessing="true"> 
      <match url=".*" /> 
      <conditions logicalGrouping="MatchAll"> 
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> 
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> 
      </conditions> 
      <action type="Rewrite" url="/" /> 
    </rule> 
  </rules> 
</rewrite> 

Вот это

Answer 2

Nice страница! Попробуйте ответить в режиме html5 от Curiousdev. И я думаю, вы можете упростить маршрутизацию.Вы можете изменить маршрут от

('/movies/:id/:title') 

в

('/movies/:id') 

Вот пример на один фильм на IMDB:

http://www.imdb.com/title/tt1219827/?pf_rd_m=A2FGELUUNOQJNL&pf_rd_p=2896364242&pf_rd_r=0QKNGNCGK3XM4PBDN2A0&pf_rd_s=hero&pf_rd_t=15061&pf_rd_i=homepage&ref_=hm_hp_cap_pri_2

Они не обеспечивают название в адресе либо

Далее: Если вы хотите сломать проблемы в угловой маршрутизации, удалите все дополнительные jquery-скрипты и так далее. Удостоверьтесь, что он работает до того, как вы добавите классный материал gui.

Answer 3

Вот как я это делаю. В моей конфигурации.

.config(['$routeProvider', function ($routeProvider) { 
$locationProvider.html5Mode(false).hashPrefix(''); 
$routeProvider.otherwise({redirectTo: '/dashboard'});}]); 

Я делю HTML с соответствующими JS и папок ех:

/movie-details/movie-detail.html 
/movie-details/movie-detail.js 

Мои кино-details.js должен выглядеть примерно так:

'use strict'; 
angular.module('myapp') 
    .config(['$routeProvider', function ($routeProvider) { 
     $routeProvider.when('/movies/:Id', { 
      templateUrl: 'movie-details/movie-detail.html', 
      controller: 'MovieDetails as vm' 
     }); 
    }]) 
    .controller('MovieDetails', function ($scope, $routeParams) { 
     var vm = this; 
     vm.movieId= $routeParams.Id; 

    }); 

В HTML вы не нужны любая директива контроллера. Just:

{{vm.something}}