Remove hash from AngularJs Routing Url

Remove hash from AngularJs Routing Url

In this Post We Will Explain About is Remove hash from AngularJs Routing Url With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Removing Hashbang from URL in AngularJs RouteExample

In this post we will show you Best way to implement How To Remove Hash From Application URL In AngularJS, hear for Remove Hashtag From The Routing URL – $locationProviderwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Also Read :   Create Simple Accordion Menu using Angularjs

You can download source code and Demo from below link.




For example:

We are having a site as

http://live24u.com/
http://live24u.com/#/about
http://live24u.com/#/contact

Step 1 : Base href Setting

First of all Set the simple base href url in HTML fileLike as a…

<html>
  <head>
	<title>Remove hash from AngularJs url Created By live24u.com</title>
    <base href="/">
  </head>
  <body>
	.....
	...
	..
	.
	//some code here
  </body>
</html>

Step 2 : Base href Setting

Add html5Mode function must add inside your web app’sangularjs config file.

app.config(function ($routeProvider,$locationProvider) {
$routeProvider
      .when('/', {
        title: 'live24u Web Tutorials',
        templateUrl: 'partials/index.html',
        controller: 'CarouselDemoCtrl'
      })
      .when('/about-us', {
        title: 'about-us',
        templateUrl: 'partials/about-us.html',
        controller: 'aboutusCtrl'
      })
	   .when('/services', {
        title: 'services',
        templateUrl: 'partials/services.html',
        controller: 'servicesCtrl'
      })
	   .when('/portfolio', {
        title: 'portfolio',
        templateUrl: 'partials/portfolio.html',
        controller: 'portfolioCtrl'
      })
	   .when('/products', {
        title: 'products',
        templateUrl: 'partials/products.html',
        controller: 'productCtrl'
      })
	   .when('/career', {
        title: 'career',
        templateUrl: 'partials/career.html',
        controller: 'careerCtrl'
      })
	  .when('/contact_us', {
        title: 'contact_us',
        templateUrl: 'partials/contact_us.html',
        controller: 'contactCtrl'
      })
	   .when('/form_career/:customerID', {
        title: 'Edit Customers',
        templateUrl: 'partials/form_career.html',
        controller: 'careerformCtrl',
        resolve: {
          customer: function(services, $route){
            var customerID = $route.current.params.customerID;
            return services.gettypedtlist(customerID);
          }
        }
      })
      .otherwise({
        redirectTo: '/'
      });
	  $locationProvider.html5Mode(true);
});	

Step 3 : .htaccess url rewrite

And then last way or Best Solution of the .htaccessPut this simple inside your .htaccess file.

Also Read :   VueJs Smart Table with Add Edit Delete Records - Dynamic Table

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]

You can download source code and Demo from below link.





Example

I hope you have Got What is Remove Hashtag From The Routing URL – $locationProvider And how it works.I would Like to have FeadBack From My Blog(live24u.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(live24u.com) Are Most Always Welcome.

   

Add a Comment

Your email address will not be published.