angular ui-router for dynamic page url

Question

I have an angular app where I am using ui-router module. I am storing a "page" in database with URL and content. I also have some other states/URLs that have their own template. For example:

$stateProvider
            .state('landing', {
                url: '/',
                templateUrl: 'landing-page.html'
            })
            .state('admin', {
                url: '/admin',
                templateUrl: 'admin.html'
            })
            .state('user', {
                url: '/user',
                templateUrl: 'user.html'
            })

I want to define a state for the pages using something like

.state('page',{
    url: '??',
    templateUrl: 'page.html'
})

What should be in the url above if my page is dynamically stored in database with a URL/slug and content. How can I add the URL/slug here ? If I try this below:

  .state('page', {
            url: '/{path:.*}',
            templateUrl: 'page.html'
    })

Then it routes every page including the other states to the same template. I can always prefix the URL with something like /page but I don't want to do that. I want to be able to load the page as :

www.mysite.com/page-1
www.mysite.com/whatever-url

etc

codegeek · Accepted Answer · 2015-10-23 21:22:12Z

1

Never mind. I figured this out. The trick was more about using regular expression. Here is my solution

.state('page', {
       url: '/{path:(?!admin|user)[a-z0-9\-]+}',
       templateUrl: 'page.html'
 })

This will ignore routes starting with /admin and /user which we want first. Then, it will check if the url has at least 1 character.

edited Oct 23, 2015 at 21:22

answered Oct 23, 2015 at 21:12

codegeek

33.5k12 gold badges65 silver badges65 bronze badges

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

Collectives™ on Stack Overflow

angular ui-router for dynamic page url

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related