Removing Hashbang from URL in AngularJs Route

Mohammad Nasir Uddin

unread,

Apr 5, 2016, 1:10:30 PM4/5/16

to AngularJS

I am new in angularJs. I just tried to route pages in angularJs. It's working but '#' symbol is shown. So I have used $locationProvider and $locationProvider.html5Mode(true); but it's not working. So I am giving my code bellow to seek for a help to find the problem. I am using CDN of angularJs.

The project Structure is:

app.Js File is

'use strict';

angular.module('myApp', ['myApp.controllers', 'ngRoute']);

angular.module('myApp').config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/view1', {
            controller: 'Controller1',
            templateUrl: 'partials/view1.html'
        })
        .when('/view2', {
            controller: 'Controller2',
            templateUrl: 'partials/view2.html'
        });

    $locationProvider.html5Mode(true); //activate HTML5 Mode
});

Controller is:
'use strict';

angular.module('myApp.controllers', [])
    .controller('Controller1', function ($scope) {
        $scope.message = "Hello, world";
    })
    .controller('Controller2', function ($scope) {
        $scope.now = new Date();
    });
Html Page is:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8">
    <title>AngularJS Routing</title>
    <link rel="stylesheet" href="app.css"/>
    <base href="/">
</head>
<body>
<ul class="menu">
    <li><a href="/view1">view1</a></li>
    <li><a href="/view2">view2</a></li>
</ul>
<ng-view></ng-view>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>    
<script src="app.js"></script>
<script src="controllers.js"></script>
</body>
</html>

Can anyone help me to solve the problem

Leandroh

unread,

Apr 5, 2016, 1:24:15 PM4/5/16

to ang...@googlegroups.com

Is your browser supporting "pushState"?

"[...] will rely on history.pushState to change urls where supported. Will fall back to hash-prefixed paths in browsers that do not support pushState."

- https://docs.angularjs.org/api/ng/provider/$locationProvider

Mohammad Nasir Uddin

unread,

Apr 6, 2016, 12:14:42 AM4/6/16

to ang...@googlegroups.com

Dear Leandroh

I am using Chrome and it's version is: Version 49.0.2623.110 m. So I think it's supporting "pushState". Please find me a solution. If you agree then I can send you my sample project.

Thanks and Regards

Nasir

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/kKJnWINld1s/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Mohammad Nasir Uddin

Mobile: +8801912767699

Save Paper, Save Trees, Save the Planet

Hugo Arthur Amaral

unread,

Apr 6, 2016, 8:07:25 AM4/6/16

to AngularJS

I did this once, but I don't remember.
I think you need to set the requireBase attribute to false. Something like this:

$locationProvider.html5Mode({
     enabled: true,
     requireBase: false
});

and maybe set something in the index.html file, but at the moment I'm not remembering.

Take a look at the docs of the $locationProvider: https://docs.angularjs.org/api/ng/provider/$locationProvider

Reply all

Reply to author

Forward