All geek questions in one place

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

I just started from the MEAN stack and I am following some TUT.

I am using npm-views from Angular and trying to redirect the html a tag to another html file. However, when I go to localhost:3000 , I get the following: localhost:3000/#!/ , And when I link to this page, it just adds localhost:3000/#!/#%2Fsl .

My index.html is this (without some elements - too much text // I deleted all the js and css files, but I have all of them 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:

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

  <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>
+5
source share
1 answer

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

Otherwise, it will be only #.

Read this documentation here at $ location to learn more about why this is happening.

Open regular url in legacy browser → redirect to hash entry

Url hashbang url in modern browser -> rewrite to regular url

HTML5 mode

HTML5 mode uses $location service receivers and setters with the browser URL through the HTML5 history API. This allows you to use a regular URL and search segments, rather than their hashbang equivalents. If the HTML5 History API is not supported by the browser, the $ location service will revert to using hashbang URLs automatically. This eliminates the need to worry about whether your browser supports the story API or not; the $ location service transparently uses the best available option.

Opening a regular URL in an outdated browser → redirecting to a hash band URL of the hashbang URL in a modern browser → rewriting into a regular URL Please note that in this mode AngularJS intercepts all links (subject to the "Rules for rewriting HTML links" 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'); }); });
+3
source

Source: https://habr.com/ru/post/1263806/

More articles:


All Articles