0

I have a simple single-page application in AngularJS. The URL appears something like this .../Angular/index.html and when I click on the link in the page it goes transforms to .../Angular/index.html#/addStudent.

Now, I wanted to remove the # from the URL, but I'm unable to do it. I googled it and found many answers, but none worked (I'm really new to Angular and programming), so it might be that I'm missing something really silly.

Here's the code:

<html>
   
   <head>
      <title>Angular JS Views</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp">
         <p><a href = "#addStudent">Add Student</a></p>
         <p><a href = "#viewStudents">View Students</a></p>
         <div ng-view></div>
         
         <script type = "text/ng-template" id = "addStudent.htm">
            <h2> Add Student </h2>
            {{message}}
         </script>
         
         <script type = "text/ng-template" id = "viewStudents.htm">
            <h2> View Students </h2>
            {{message}}
         </script>
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", ['ngRoute']);
         mainApp.config(['$routeProvider', function($routeProvider) {
            $routeProvider.
            
            when('/addStudent', {
      //url:'/',
               templateUrl: 'addStudent.htm',
               controller: 'AddStudentController'
            }).
            
            when('/viewStudents', {
      //url:'/',
               templateUrl: 'viewStudents.htm',
               controller: 'ViewStudentsController'
            }).
            
            otherwise({
               redirectTo: '/addStudent'
            });
   //$urlRouterProvider.otherwise('/');
   //$locationProvider.html5Mode(true);
   //check browser support
       // if(window.history && window.history.pushState){
            //$locationProvider.html5Mode(true); will cause an error $location in HTML5 mode requires a  tag to be present! Unless you set baseUrl tag after head tag like so: <head> <base href="/">

         // to know more about setting base URL visit: https://docs.angularjs.org/error/$location/nobase

         // if you don't wish to set base URL then use this
        // $locationProvider.html5Mode({
          //       enabled: true,
            //     requireBase: false
    // rewriteLinks: true
    //      });
     //   }
            
         }]);
         
         mainApp.controller('AddStudentController', function($scope) {
            $scope.message = "This page will be used to display add student form";
         });
         
         mainApp.controller('ViewStudentsController', function($scope) {
            $scope.message = "This page will be used to display all the students";
         });
   
      </script>
      
   </body>
</html>
iamdanchiv
  • 4,052
  • 4
  • 37
  • 42
Ramnarayan Choudhary
  • 1
  • 2
  • Possible duplicate of [How to remove the hash # from the angularjs ng-route](https://stackoverflow.com/questions/28629774/how-to-remove-the-hash-from-the-angularjs-ng-route) – Ted Jun 29 '17 at 13:43
  • Possible duplicate of [Removing the fragment identifier from AngularJS urls (# symbol)](https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol) – kvn Jun 29 '17 at 13:43
  • @Ted Hi, I understand it's a duplicate but I wasn't able to solve the problem even after going through the given solution. – Ramnarayan Choudhary Jun 29 '17 at 13:45

3 Answers3

0

You need to set HTML5-mode to true: 

$locationProvider.html5Mode(true);

And in your links, don't include the #. Do it like this instead:

<a href="/addStudent">Add Student</a>
Gustaf Gunér
  • 2,272
  • 4
  • 17
  • 23
  • My initial url was file:///C:/Users/.../Desktop/.../Angular/index.html and it was working with the # (url became something like file:///C:/Users/.../Desktop/.../Angular/index.html#/Addstudent). I tried using $locationProvider.html5Mode(true); as you can see the commented code(Also added $locationProvider in config and function both, As suggested in many answers of similar questions but none worked) – Ramnarayan Choudhary Jun 29 '17 at 13:57
  • @RamnarayanChaudhary What's happening if you make the changes I suggested? – Gustaf Gunér Jun 29 '17 at 14:02
  • It removed the # from the url but unable to connect to the template. So it's showing error "file not found". – Ramnarayan Choudhary Jun 29 '17 at 14:09
  • I tried the methods which are commented in my code. – Ramnarayan Choudhary Jun 29 '17 at 14:10
0

Use 

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

in your js and 

<base href="http://localhost:4000" || "or your URL in here">

in main HTML

dont forget to $locationProvider in your config.

Ashish Yadav
  • 3,039
  • 1
  • 16
  • 23
  • I tried using that but it wasn't working. It removed the # from the url but unable to connect to the template. So it's showing error "file not found" Could you please try this code in your system with changes, if this works. Thanks in advance. – Ramnarayan Choudhary Jun 29 '17 at 14:08
  • I have made some changes please check – Ashish Yadav Jun 30 '17 at 11:41
0

If you want to remove the prefix (#), you can do the following:

1) Activate the HTML5 mode in your module config

$locationProvider.html5Mode(true);

2) Set base to / in the <head> on your index.html

<head>
    ...
    <base href="/">
</head>

Note that if you are using Angular 1.6, you will need to remove the ! as well. You can see this solution.

Mistalis
  • 17,793
  • 13
  • 73
  • 97