Почему мой url содержит "!" при использовании углового?

Я только что начал со стека MEAN, и я слежу за некоторыми TUT.Почему мой url содержит "!" при использовании углового?

Я использую npm-views из Angular и пытаюсь перенаправить тег html a в другой файл html. Однако, когда я перехожу на localhost:3000, я получаю это: localhost:3000/#!/ и когда я ссылаюсь на эту страницу, он просто добавляет localhost:3000/#!/#%2Fsl.

Мой index.html это (без каких-либо элементов - слишком много текста // Я удалил все JS и CSS файлы, но я их все в моем файле):

<!DOCTYPE html> 
<html ng-app="firstApp"> 

<head> 

<script type="text/javascript"> 

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

app.config(function($routeProvider){ 
    $routeProvider 
    .when('/', { 
     templateUrl: 'home.html', 
     controller: 'HomeController', 
    }) 
    .when('/sl', { 
     templateUrl: 'sl.html', 
     controller: 'SLController', 
    }); 

}); 

app.controller('HomeController', function ($scope, $http){ 
    console.log('Home page'); 
}); 

app.controller('SLController', function ($scope, $http){ 
    console.log('Signup page'); 
}); 

</script> 
    <title>First Node.JS app</title> 

</head> 

<body> 
    <div class="container-fluid"> 

    <h1 id="indexTitle"> MyFirst App </h1> 
    <div ng-view></div> 

    </div> 
</body> 

</html>

Мой home.html файл состоит в следующем:

<div class="container main-forms" id="main-forms"> 

    <h3 id="letMeIn1"><a href="#/sl" id="letMeIn">Let me in</a></h3> 

</div>

и мой sl.html файл следующим образом:

<div class="container main-forms" id="main-forms"> 

    <div> 

    <!-- Nav tabs --> 
     <ul class="nav nav-tabs" role="tablist"> 
     <li role="presentation" class="active tab-btn"><a href="#login" class="tab-link" id="login1" aria-controls="login" role="tab" data-toggle="tab">Login</a></li> 
     <li role="presentation" class="tab-btn"><a href="#signup" class="tab-link" id="signup1" aria-controls="signup" role="tab" data-toggle="tab">Sign Up</a></li> 
     </ul> 

    <!-- Tab panes --> 
     <div class="tab-content"> 
     <div role="tabpanel" class="tab-pane active" id="login"> 

      <div class=" row main col-md-6 col-md-offset-3"> 

       <form class="form-group"> 

        <h3 class="form-titles center-block">Login</h3> 

        <input type="text" class="form-control form-subtitles" placeholder="Usuario"> 

        <input type="password" class="form-control form-subtitles" placeholder="Password"> 

        <input type="submit" class="form-control form-subtitles btn btn-info" value="Login"> 

       </form> 

      </div> 


     </div> 
     <div role="tabpanel" class="tab-pane" id="signup"> 
      <div class=" row main col-md-6 col-md-offset-3"> 

       <form class="form-group"> 

        <h3 class="form-titles center-block">Sign Up</h3> 

        <input type="text" class="form-control form-subtitles" placeholder="Usuario"> 

        <input type="text" class="form-control form-subtitles" placeholder="E-mail"> 

        <input type="password" class="form-control form-subtitles" placeholder="Password"> 

        <input type="submit" class="form-control form-subtitles btn btn-info" value="Signup"> 

       </form> 

      </div> 
     </div> 






     </div> 

    </div> 

</div>

источник

2017-02-03 Diego Rios

Возможно http://stackoverflow.com/a/4739713/218196. –

Вы используете угловую навигацию hashbang - https://docs.angularjs.org/guide/$location – dmoo

Возможный дубликат [angularjs 1.6.0 (последние сейчас) маршруты не работают] (http: // stackoverflow.com/questions/41211875/angularjs-1-6-0-latest-now-routes-not-working) – georgeawg

Если браузер HTML5 браузер angularJS Wi ll перенаправить его на #!

В противном случае это будет только #.

Прочтите эту документацию здесь, на $location, чтобы узнать больше о том, почему это происходит.

Открытие регулярного URL в унаследованной браузере -> перенаправляет к hashbang

URL Открытие hashbang URL в современном браузере -> переписывает в обычный URL

режим HTML5

В режиме HTML5 сервисные приемники и сеттеры $location взаимодействуют с URL-адресом браузера через API-интерфейс истории HTML5 . Этот позволяет использовать обычные URL-адреса и поисковые сегменты, а не их эквиваленты hashbang. Если API истории HTML5 не поддерживается браузером, служба определения местоположения $ будет возвращаться к использованию URL-адресов хэш-сайтов автоматически. Это избавляет вас от необходимости беспокоиться о том, поддерживает ли браузер ваше приложение API истории или ; в службе определения местоположения прозрачно используется лучший доступный вариант .

Открытие регулярного URL в унаследованной браузере -> перенаправляет к hashbang URL hashbang Открытие URL в современном браузере -> переписывает на регулярной URL Обратите внимание, что в этом режиме, AngularJS перехватывает все ссылки (при условии в «Правила перезаписи HTML-ссылок» ниже) и обновляет URL-адрес , который никогда не выполняет полную перезагрузку страницы.

Пример:

it('should show example', function() { 
    module(function($locationProvider) { 
    $locationProvider.html5Mode(true); 
    $locationProvider.hashPrefix('!'); 
    }); 
    inject(function($location) { 
    // in browser with HTML5 history support: 
    // open http://example.com/#!/a -> rewrite to http://example.com/a 
    // (replacing the http://example.com/#!/a history record) 
    expect($location.path()).toBe('/a'); 

    $location.path('/foo'); 
    expect($location.absUrl()).toBe('http://example.com/foo'); 

    expect($location.search()).toEqual({}); 
    $location.search({a: 'b', c: true}); 
    expect($location.absUrl()).toBe('http://example.com/foo?a=b&c'); 

    $location.path('/new').search('x=y'); 
    expect($location.url()).toBe('/new?x=y'); 
    expect($location.absUrl()).toBe('http://example.com/new?x=y'); 
    }); 
}); 

it('should show example (when browser doesn\'t support HTML5 mode', function() { 
    module(function($provide, $locationProvider) { 
    $locationProvider.html5Mode(true); 
    $locationProvider.hashPrefix('!'); 
    $provide.value('$sniffer', {history: false}); 
    }); 
    inject(initBrowser({ url: 'http://example.com/new?x=y', basePath: '/' }), 
    function($location) { 
    // in browser without html5 history support: 
    // open http://example.com/new?x=y -> redirect to http://example.com/#!/new?x=y 
    // (again replacing the http://example.com/new?x=y history item) 
    expect($location.path()).toBe('/new'); 
    expect($location.search()).toEqual({x: 'y'}); 

    $location.path('/foo/bar'); 
    expect($location.path()).toBe('/foo/bar'); 
    expect($location.url()).toBe('/foo/bar?x=y'); 
    expect($location.absUrl()).toBe('http://example.com/#!/foo/bar?x=y'); 
    }); 
});

источник

2017-02-03 22:20:15

Спасибо. И что мне делать, чтобы исправить ссылку, которая отправляет меня на «localhost: 3000/#!/#% 2Fsl' –

@DiegoRios Попробуйте использовать' $ locationProvider.hashPrefix ('') '; –

И я не думаю, что я запускаю его в браузере Legacy. Является ли последний Chrome старым браузером? –

Почему мой url содержит "!" при использовании углового?

ответ

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