Url rewriting example in angular js

angular-js-url-rewriting

Hi Geeks,

I am sharing  Url rewriting example in angular js with complete steps to achieve it . If you are beginner with angular js then you might faced some issues with hash(#) in angular. So i am proving you the complete snippet and steps for making your url clean/pretty to make your angular js website seo friendly.

you can download full source code from here or you can follow the steps, leave comments in comment box  if you face any problem to achieve this

Step 1 . for your index.html file write following code in your htaccess file.

Step 2.  In index.html head section please put following lines :

Note : in base href you need to provide your project url if on local, and for server you can set it only slash (/) .

Step 3. Now according to the uri we need to load the page content , So we need to create a dynamic view and it will load the content as per the uri component :

Step 4: write the Routing for load different different html views as per the uri component, in index.html

So wee need to initialize and use this code for configure and defining route provider and need to enable the html5 mode to true.

Here locationprovider and routeprovider and http angular predefined directves wil be use here

define app name in body using  ng-app directive using as follow:

and include the angular and routing libraries as follow :

Now we initialize and define configuration for the MyApp as follow with injecting the ngRoute Directive:

Note: I specify the url slugs and assign the template url according to the uri . you need to make each page to load the content as per the url.

You have sucessfully done the url rewriting in angular js . Now full code of your index.html

Download full source code here

 

You May Also Like

About the Author: Admin

We are the Web Developer, technical writer and a blogger from jaipur and worked with PHP,Mysql,JavaScript,Node Js,Angular Js,Jquery,JQuery Mobile,.Net,Sql Server etc., but his language of choice is PHP & JAVASCRIPT. You can learn more and discussion with us at w3school