Menu
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>
667
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
$locationservice 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');
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
