{"id":2575,"date":"2017-06-10T20:16:14","date_gmt":"2017-06-10T14:46:14","guid":{"rendered":"https:\/\/code4developers.com\/?p=2575"},"modified":"2017-06-22T13:51:39","modified_gmt":"2017-06-22T08:21:39","slug":"remove-hash-from-application-url-in-angularjs","status":"publish","type":"post","link":"https:\/\/code4developers.com\/remove-hash-from-application-url-in-angularjs\/","title":{"rendered":"How To Remove Hash From Application URL In AngularJS"},"content":{"rendered":"<p><strong>Introduction<\/strong><\/p>\n<p>Angular is a framework, which is developed and maintained by Google. It has features such as Two-Way binding, Dependency Injection, Testing and Directives. It is widely used to create a Single Page Application(SPA) with Two-Way binding.<!--more--><\/p>\n<p>To find more, refer the URL <em>https:\/\/docs.angularjs.org\/guide<\/em><\/p>\n<p>Going further, I assume that you are aware of how to use Angular routing, if not refer\u00a0<a href=\"https:\/\/www.w3schools.com\/angular\/angular_routing.asp\" target=\"_blank\" rel=\"noopener\">Angular routing tutorial<\/a>.<\/p>\n<p><strong>Why does URL show Hash prefix?<\/strong><\/p>\n<p>If you are using Angular v1.5 or lesser version, the app URL will show \/#\/ and from v1.6; it changes to \/!#\/. When you are using AngularJS routing, it rewrites the URL and shows # in the URL, so by default URL&#8217;s are shown below.<\/p>\n<ul>\n<li><em>http:\/\/localhost:51287\/#\/Home<\/em><\/li>\n<li><em>http:\/\/localhost:51287\/#\/AboutUs<\/em><\/li>\n<li><em>http:\/\/localhost:51287\/#\/ContactUs<\/em><\/li>\n<\/ul>\n<p>Where the path that maps to the folder is removed and # is placed. It is very easy to remove # from the URL.<\/p>\n<p>Only these two things are to be added to make it work.<\/p>\n<ul>\n<li>Configuration if $locationProvider.<\/li>\n<li>Setting base path for relative location of pages.<\/li>\n<\/ul>\n<h4 id=\"location-service\"><strong>$location Service<\/strong><\/h4>\n<p>The $location Service parses the URL in the Browser address bar, which is based on the <a href=\"https:\/\/developer.mozilla.org\/en\/window.location\" target=\"_blank\" rel=\"noopener\">window.location<\/a> and makes the URL available to your Application.<\/p>\n<p>Changes to the the URL in the address bar are reflected into $location service and changes to $location are reflected into the Browser address bar.<\/p>\n<p>I would highly recommend reading through the official <a href=\"https:\/\/docs.angularjs.org\/api\/ng\/service\/$location\" target=\"_blank\" rel=\"noopener\">Angular $location docs<\/a> before moving forward.<\/p>\n<p><strong>Base Tag<\/strong><\/p>\n<p>Base tag specifies a default URL for all the relative URL&#8217;s in the Application. There can be only one &lt;base&gt; tag in a document and it is written in &lt;head&gt; section of an HTML. It is written, as shown below:<\/p>\n<pre class=\"lang:default decode:true\">&lt;base href = \u201c\u201d \/&gt;<\/pre>\n<p><strong>Configuring $locationProvider<\/strong><\/p>\n<p>Let\u2019s start by configuring $locationprovider.<\/p>\n<pre class=\"lang:js decode:true\">DemoApplicationModule.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {  \r\n\r\n    $routeProvider.  \r\n\r\n    when('\/Home', {  \r\n\r\n        templateUrl: ApplicationURL + '\/AngularJs\/Views\/Home.html'  \r\n\r\n    }).when('\/AboutUs', {  \r\n\r\n        templateUrl: ApplicationURL + '\/AngularJs\/Views\/AboutUs.html'  \r\n\r\n    }).when('\/ContactUs', {  \r\n\r\n        templateUrl: ApplicationURL + '\/AngularJs\/Views\/ContactUs.html'  \r\n\r\n    }).otherwise({  \r\n\r\n        redirectTo: '\/Home'  \r\n\r\n    });  \r\n\r\n    \/\/ for enabling html5 mod  \r\n\r\n    $locationProvider.html5Mode(true);  \r\n\r\n}]); \/\/ This is just a sample script. Paste your real code (javascript or HTML) here.<\/pre>\n<p>In the code given above, we have configured html5mode.<\/p>\n<p>What is html5mode? It is a standardized way for the manipulation of the Browser URL, so it helps an Angular to change the URL without refreshing the page.<\/p>\n<p>If you are using newer version of an Angular, then you can directly write<\/p>\n<pre class=\"lang:default decode:true\">$locationProvider.html5Mode(true);<\/pre>\n<p>to enable html5mode.<\/p>\n<p><strong>Enabling Base URL (Relative URLs)<\/strong><\/p>\n<p>To set the base URL in an Application, we must write &lt;base&gt; tag in the head section of an HTML. If the HTML pages, which are to be viewed are in the root path, then we do not have to mention the relative path to the pages and we can simply write &lt;base href=&#8221;\/&#8221;&gt; to map the pages.<\/p>\n<p>If the pages are in different folder like the example, then we should provide the relative path to the folder, as shown below.<\/p>\n<pre class=\"lang:default decode:true\">&lt;base href=\"\/Demo\/Index\/\"&gt;<\/pre>\n<p>This will set the view folder to demo\/index and render the pages from this path.<\/p>\n<p><strong>Layout.cshtml<\/strong><\/p>\n<pre class=\"lang:default decode:true\">&lt;!DOCTYPE html&gt;  \r\n\r\n&lt;html&gt;\r\n\r\n&lt;head&gt;  \r\n\r\n    &lt;meta charset=\"utf-8\" \/&gt;  \r\n\r\n    &lt;meta name=\"viewport\" content=\"width=device-width\" \/&gt;  \r\n\r\n    &lt;title&gt;Routing Demo&lt;\/title&gt;  \r\n\r\n    &lt;script src=\"~\/Scripts\/angular.js\"&gt;&lt;\/script&gt;  \r\n\r\n    &lt;script src=\"~\/Scripts\/angular-route.js\"&gt;&lt;\/script&gt;  \r\n\r\n    &lt;script type=\"text\/javascript\"&gt;  \r\n\r\n        var ApplicationURL = '@WebConfigurationManager.AppSettings[\"ApplicationURL\"]';  \r\n\r\n    &lt;\/script&gt;  \r\n\r\n    &lt;script src=\"~\/AngularJS\/Modules\/DemoModule.js\"&gt;  \r\n\r\n    &lt;!--provide base url for mapping routing in the angular routing--&gt;  \r\n\r\n    &lt;base href=\"\/Demo\/Index\/\"&gt; &lt;\/head&gt; \r\n\r\n&lt;body ng-app=\"DemoApplicationModule\"&gt; &lt;a href=\".\/#\/Home\"&gt;Home&lt;\/a&gt; \r\n\r\n&lt;a href=\".\/#\/AboutUs\"&gt;AboutUs&lt;\/a&gt; &lt;a href=\".\/#\/ContactUs\"&gt;ContactUs&lt;\/a&gt; @RenderBody() &lt;\/body&gt; \r\n\r\n&lt;\/html&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>DemoModule.js<\/strong><\/p>\n<pre class=\"lang:js decode:true\">\/\/ declared module.  \r\n\r\nvar DemoApplicationModule = angular.module(\"DemoApplicationModule\", ['ngRoute']);  \r\n\r\n\/\/for routing of the pages  \r\n\r\nDemoApplicationModule.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {  \r\n\r\n    $routeProvider.  \r\n\r\n    when('\/Home', {  \r\n\r\n        templateUrl: ApplicationURL + '\/AngularJs\/Views\/Home.html'  \r\n\r\n    }).when('\/AboutUs', {  \r\n\r\n        templateUrl: ApplicationURL + '\/AngularJs\/Views\/AboutUs.html'  \r\n\r\n    }).when('\/ContactUs', {  \r\n\r\n        templateUrl: ApplicationURL + '\/AngularJs\/Views\/ContactUs.html'  \r\n\r\n    }).otherwise({  \r\n\r\n        redirectTo: '\/Home'  \r\n\r\n    });  \r\n\r\n    \/\/ for enabling html5 mod  \r\n\r\n    $locationProvider.html5Mode(true);  \r\n\r\n}]);<\/pre>\n<p><strong>Conclusion<\/strong><\/p>\n<p>This is the simplest way to remove Hash (#) from the URL and get a pretty URL.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Angular is a framework, which is developed and maintained by Google. It has features such as Two-Way binding, Dependency Injection, Testing and Directives. It is widely used to create&hellip;<\/p>\n","protected":false},"author":7,"featured_media":2571,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4],"tags":[25],"powerkit_post_featured":[],"class_list":{"0":"post-2575","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-angularjs","8":"tag-angularjs"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angularjs.png?fit=160%2C160&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-Fx","jetpack-related-posts":[{"id":2613,"url":"https:\/\/code4developers.com\/ui-routing-basics\/","url_meta":{"origin":2575,"position":0},"title":"UI-Routing &#8211; Basics","author":"Arif Khoja","date":"June 17, 2017","format":false,"excerpt":"Introduction In the present scenario, AngularJS is the most trusted framework for the creation of Single Page Applications (SPA), and UI-Routing is one of the most important aspects. We want to keep our navigation feeling like a normal site and want to load the pages without refreshing the Browser. For\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3222,"url":"https:\/\/code4developers.com\/improving-the-performance-of-angular-js-code-by-learning-the-basics-of-ng-repeat\/","url_meta":{"origin":2575,"position":1},"title":"How to optimize the performance of ng-repeat in AngularJS?","author":"Arif Khoja","date":"February 7, 2018","format":false,"excerpt":"Today we would focus on improving the performance of Angular JS code by learning the basics of ng-repeat and then how to enhance its capabilities. ng-repeat :-\u00a0 It is directive which create instant of template for each item in the collection. It is identical to looping concept in any language\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"AngularJs LOGO","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3340,"url":"https:\/\/code4developers.com\/top-angularjs-interview-question\/","url_meta":{"origin":2575,"position":2},"title":"Top AngularJS interview questions","author":"Arif Khoja","date":"March 23, 2018","format":false,"excerpt":"Read Angular js interview questions including topic advanced topics like Dependency injection, Two-way binding, scope in angular js and many more. 1.Explain Directive scopes? There are three types of directive scopes available in Angular. Parent Scope: is default scope Child Scope: If the properties and functions you set on the\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"AngularJs LOGO","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3489,"url":"https:\/\/code4developers.com\/automatic-bootstrapping-and-manual-bootstrapping-multiple-modules-in-angularjs\/","url_meta":{"origin":2575,"position":3},"title":"Bootstrapping multiple modules in AngularJS","author":"Arif Khoja","date":"April 26, 2018","format":false,"excerpt":"In this article we will be\u00a0Understanding AngularJS Bootstrap Process talking about automatic\u00a0Bootstrapping and manual Bootstrapping multiple modules in AngularJS. Angular initiates automatically upon [marker color=\"#dbdbdb\" textcolor=\"#1e73be\"]DOMContentLoaded[\/marker] event or when the angular.js script is downloaded to the browser and the [marker color=\"#dbdbdb\" textcolor=\"#1e73be\"]document.readyState[\/marker] is set to [marker color=\"#dbdbdb\" textcolor=\"#1e73be\"]complete[\/marker]. At this\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"AngularJs LOGO","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3544,"url":"https:\/\/code4developers.com\/angular-6-crud-part-1-project-setup-routing-service\/","url_meta":{"origin":2575,"position":4},"title":"Angular 6 CRUD \u2013 Part 1: Project Setup, Routing, Service","author":"Nisarg Dave","date":"May 9, 2018","format":false,"excerpt":"This article is Part 1 Angular 6 CRUD. In this article and upcoming article, we will discuss performing CRUD operations in Angular 6 i.e. Creating, Reading, Updating and Deleting in Angular 6 with simple examples. We will also discuss about the Angular 6 Project setup, apply Routing, create service to\u2026","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/05\/json-server-call-300x297.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3047,"url":"https:\/\/code4developers.com\/apply-mcustomscrollbar-using-angular-directive\/","url_meta":{"origin":2575,"position":5},"title":"Apply mCustomScrollbar using Angular Directive","author":"Pawan Ingale","date":"August 14, 2017","format":false,"excerpt":"ngCustomScrollbar Directives are very well-known in the world of angular developers. Every developer knows the power of a\u00a0Directive. AngularJS has already provided many inbuilt directives which we are using on daily basis. Why custom scroll bars are useful? Browser default scroll bar are not so good to see while adjusting\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"AngularJs LOGO","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2575","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=2575"}],"version-history":[{"count":5,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2575\/revisions"}],"predecessor-version":[{"id":2648,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2575\/revisions\/2648"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/2571"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=2575"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=2575"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=2575"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=2575"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}