Угловой прямой URL без хеша

У меня есть сайт, который я построил на mvc и C#.net, который работает нормально, сейчас я пытаюсь создать мобильный сайт для того же, используя angular, поэтому я хочу, чтобы URL были без хэша, поэтому я использую следующий код в моем файле js

var app = angular.module('mobilesite', ["ngRoute", "ngTouch", "mobile-angular-ui", "shoppinpal.mobile-menu"]);

app.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
}]);

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/Blog', {
        templateUrl: "/Blog/Index"
    });

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

app.controller('maincontroller', function ($scope) {
    $scope.Name = "Index Mobile";
});

app.controller('blogcontroller', function ($scope) {
    $scope.Name = "Blog Mobile";
});

Например, URL для блога будет http://localhost/Blog, и он работает без проблем при нажатии на ссылку.

Но когда я открываю новый браузер и набираю вышеупомянутый URL напрямую, я не загружаю макет, и только он отображает {{Name}}. Когда я изменил JavaScript, чтобы использовать хэш, то все работает отлично.

Я что-то здесь упустил, пожалуйста, помогите.

Источник

2 ответа

Решение

Спасибо за ответ, но на самом деле я использовал mvc 4.0, и я исправил это двумя способами, во-первых, у меня есть логика перезаписи URL web.config с обычного сайта, и, поскольку это мобильное устройство, мне не нужны разные URL-адреса, поэтому, хотя я и сделал свой html5mode к истине, это не работает, поэтому я изменил условие routeprovider на нижний регистр, и это сработало.

 <rewrite>
  <rules>
    <rule name="Add WWW prefix">
      <match url="(.*)" ignoreCase="true"></match>
      <conditions>
        <add input="{HTTP_HOST}" pattern="^xxxxx\.com"/>
      </conditions>
      <action type="Redirect" url="http://www.xxxxxx.com/{R:1}" redirectType="Permanent"/>
    </rule>
    <rule name="Lower Case URLs" stopProcessing="true">
      <match url="[A-Z]" ignoreCase="false" />
      <conditions logicalGrouping="MatchAll" trackAllCaptures="false">
        <add input="{URL}" pattern="WebResource.axd" negate="true" />
      </conditions>
      <action type="Redirect" url="{ToLower:{URL}}" />
    </rule>
  </rules>
</rewrite>

но когда я обновил страницу или получил прямой доступ к ней, я проверял макет, если request.isajaxrequest и это сделало волшебство.

Источник

Я думаю, что вам нужно установить $locationProvider.setHtml5Mode(true), См. https://docs.angularjs.org/api/ng/provider/$ locationProvider и AngularJS маршрутизацию без хеша '#'

редактировать

Вы также должны настроить свой сервер для глубоких ссылок. Взгляните на эту страницу: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions

Если вы используете Apache:

<VirtualHost *:80>
    ServerName my-app

    DocumentRoot /path/to/app

    <Directory /path/to/app>
        RewriteEngine on

        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html to allow html5 state links
        RewriteRule ^ index.html [L]
    </Directory>
</VirtualHost>
Источник
Другие вопросы по тегам