Why does my url contains "!" when using angular?

Question

I just started with MEAN stack and i'm following some TUTs.

I'm using the npm-views from Angular and trying to redirect an html a tag to another html file. However when I go to localhost:3000 I get this: localhost:3000/#!/ and the when I the link inside that page it simply adds localhost:3000/#!/#%2Fsl.

My index.html is this (without some elements -- too much text // I removed all the js and css files but I have them all in my file):

<!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>

My home.html file is this:

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

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

</div>

and my sl.html file is this:

    <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>

You are using hashbang angular navigation - docs.angularjs.org/guide/$location — dmoo
– dmoo, Commented Feb 3, 2017 at 22:16
Possible duplicate of angularjs 1.6.0 (latest now) routes not working — georgeawg
– georgeawg, Commented Feb 4, 2017 at 8:41

Pritam Banerjee · Accepted Answer · 2017-02-03 22:24:39Z

If the browser is HTML5 browser angularJS will redirect it to #!

Otherwise it will be only #.

Read this documentation here on $location to find out more on why this happens.

Opening a regular URL in a legacy browser -> redirects to a hashbang

URL Opening hashbang URL in a modern browser -> rewrites to a regular URL

HTML5 mode

In HTML5 mode, the $location service getters and setters interact with the browser URL address through the HTML5 history API. This allows for use of regular URL path and search segments, instead of their hashbang equivalents. If the HTML5 History API is not supported by a browser, the $location service will fall back to using the hashbang URLs automatically. This frees you from having to worry about whether the browser displaying your app supports the history API or not; the $location service transparently uses the best available option.

Opening a regular URL in a legacy browser -> redirects to a hashbang URL Opening hashbang URL in a modern browser -> rewrites to a regular URL Note that in this mode, AngularJS intercepts all links (subject to the "Html link rewriting" rules below) and updates the url in a way that never performs a full page reload.

Example:

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');
  });
});

Thanks. And what should I do to fix the link that sends me to localhost:3000/#!/#%2Fsl
And I don't think i'm running it in a Legacy browser. Is the latest Chrome a legacy browser?

Collectives™ on Stack Overflow

Why does my url contains "!" when using angular?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related