How to remove any custom html file from url on website based on angularjs

Question

I'm using AngularJS and Apache. For routing I'm using ui router module.

I have a site http://example.com I have a rule in .htaccess => DirectoryIndex index.html

So when user goes to http://example.com it renders index.html but not shows it on URL

On Index.html there is a button which you click and send you to userwelcome page

This is the url => http://example.com/userwelcome.html#/welcome

The userwelcome page has 3 states. Login, Signup and Welcome

The code from userwelcome.js

.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {

                $urlRouterProvider.otherwise('/welcome');
                $stateProvider
                        .state('login', {
                            url: '/login',
                            templateUrl: 'login/vw_login.html',
                        })
                        .state('welcome', {
                            url: '/welcome',
                            templateUrl: 'userWelcome/vw_welcome.html',
                        })
                        .state('signup', {
                            url: '/signup',
                            templateUrl: 'signup/vw_signup.html'
                        });

            }]);

When the user logins, the site redirects to home.html page and the URL is => http://example.com/home.html#/home

What I want is that URLs like the following:

for userWelcome.html welcome state http://example.com/welcome

for userWelcome.html login state http://example.com/login

for home.html home state http://example.com/home

With this structure is possible? or I have to have all states (login, signup, home, userwelcome) in one single page?

With ngroute I read that you can use html5mode with $location. In my case I m using ui router, so can I mix both of them?

In Apache I have to create more rules for rewrite?

I find a lot of post, articles talking about pretty URLs but each one has different solutions and I can't make it work.

Abdelrahman M. Allam · Accepted Answer · 2015-12-22 23:25:06Z

0

Since angularjs target SPA every thing actually run from one page and it # sign trigger routing (ui-route) to load view associated with it and using # will prevent browser from go to another page.

so you can not run your site to URL like example.com/user then example.com/home because it is different navigation URL for the browser

edited Dec 22, 2015 at 23:25

answered Dec 22, 2015 at 23:19

Abdelrahman M. Allam

92210 silver badges17 bronze badges

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

3 Comments

emmanuel sio Over a year ago

but when you see apps like twitter, facebook, about me, and others that they have urls like app.com/username , I dont think they use only a single page pattern, and have all views on index.html

Abdelrahman M. Allam Over a year ago

I thought you develop a SPA using angularJS, and I think facebook and twitter not a SPA

emmanuel sio Over a year ago

I m using Angular. At first, twitter was SPA [link] (quora.com/…)

Collectives™ on Stack Overflow

How to remove any custom html file from url on website based on angularjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related