AngularJS remove the # in url link

Question

I try to remove hastag from url in my website, but i don't know exactly how..

i researched on the internet, and i find it's neccesary to insert a location providers in my controller, but...where?

Here si my controller code:

'use strict';

(function() {
  var app = angular.module('store', ['store-products']);


  app.controller('StoreController', ['$log', function($log) {

    this.products = gems;
    $log.info('Dependency Info');
  }]);

  app.controller('PanelController', function() {
    this.tab = 1;

    this.selectTab = function(setTab) {
      this.tab = setTab;
    };

    this.isSelected = function(checkTab) {
      return this.tab === checkTab;
    };
  });

  app.controller('ReviewController', function() {
    this.review = {};

    this.addReview = function(product) {
      product.reviews.push(this.review);
      this.review = {};
    };

  });



  var gems = [
    {
      name: 'Dodecahedron',
      price: 2.95,
      description: 'Dodecahedron description...',
      images: [
        {
          full: 'http://courseware.codeschool.com.s3.amazonaws.com/shaping-up-with-angular-js/images/gem-01.gif'
        }
      ],
      canPurchase: true,
      soldOut: false,
      reviews: [
        {
          stars: 5,
          body: 'Awesome website',
          author: 'user1@schimbatot'
        },
        {
          stars: 4,
          body: 'Good!',
          author: 'user2@schimbatot'
        }
      ]
    },

  ];


})();

And module code:

(function() {
  var app = angular.module('store-products', []);
  app.directive('productTitle', function () {
    return {
      restrict: 'E',
      templateUrl: 'product-title.html'
    };
  });
})();

Also, find it's neccesary to add <base href="/"> in my index.

But, where it's neccesary to insert the $locationProvider command? ( $locationProvider.html5Mode(true);)

EDIT, here is my index from page:

    <!doctype html>
    <html ng-app="store">

    <head>
      <title>AngularJS App</title>
      <meta charset="utf-8" />
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
      <link rel="stylesheet" href="application.css" />
      <script src="app.js"></script>
<base href="/">
      </head>
    <body>

      <h1>AngularJS App</h1>

     <div class="container" ng-controller="StoreController as store">

      <h1>AngularJS App</h1>

        <div  ng-repeat="product in store.products">
          <h3>
            <product-title></product-title>
          </h3>

          <section ng-controller="PanelController as panel">
            <ul class="nav nav-pills">
              <li ng-class="{active:panel.isSelected(3)}"><a href="#" ng-click="panel.selectTab(3)">Reviews</a></li>
            </ul>
            <div class="panel" ng-show="panel.isSelected(1)">
              <h4>Description</h4>
              <blockquote>Product description...</blockquote>
            </div>
            <div class="panel" ng-show="panel.isSelected(2)">
              <h4>Specifications</h4>
              <blockquote>None yet</blockquote>
            </div>
            <div class="panel" ng-show="panel.isSelected(3)">
              <h4>Reviews</h4>
              <blockquote ng-repeat="review in product.reviews">
                <b>Stars: {{review.stars}}</b>
                {{review.body}}
                <cite>by: {{review.author}}</cite>
              </blockquote>
              <form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate>
                <blockquote>
                  <b>Stars: {{reviewCtrl.review.stars}}</b>
                  {{reviewCtrl.review.body}}
                  <cite>by: {{reviewCtrl.review.author}}</cite>
                </blockquote>
                <select ng-model="reviewCtrl.review.stars" required>
                  <option value="1">1 star</option>
                  <option value="2">2 star</option>
                  <option value="3">3 star</option>
                  <option value="4">4 star</option>
                  <option value="5">5 star</option>
                </select>
                <textarea ng-model="reviewCtrl.review.body" required></textarea>
                <label>by:</label>
                <input ng-model="reviewCtrl.review.author" type="email" required />

                <input class="btn" type="submit" value="Submit" />
              </form>
            </div>
          </section>
          </div>


      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular.min.js"></script>
      <script src="products.js"></script>
      <script src="app.js"></script>
    </div>



    </body>



    </html>

Thank for help me!

where is your routings has defined?, I don't see that ngRoute is also not included.. — Pankaj Parkar
– Pankaj Parkar, Commented Jul 6, 2016 at 12:23
You are missing a dependency to Angular-route and where are the routes definitions ? — Weedoze
– Weedoze, Commented Jul 6, 2016 at 12:28
Possible duplicate of Removing the fragment identifier from AngularJS urls (# symbol) — Weedoze
– Weedoze, Commented Jul 6, 2016 at 12:33

Srijith · Accepted Answer · 2016-07-07 01:07:36Z

2

You need to specify the html5 mode in the config like in below

var app = angular.module('store', ['store-products'])
 .config(['$locationProvider', function($locationProvider) {
  $locationProvider.html5Mode(true);
}]);

Read more about hashbang mode and html5 mode [here] (https://docs.angularjs.org/guide/$location)

edited Jul 7, 2016 at 1:07

answered Jul 6, 2016 at 12:30

Srijith

1,4449 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS remove the # in url link

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related