CODEWITHSUNDEEP
angularjsangular-ui-router
codegeek
codegeek

Reputation: 33319

angular ui-router for dynamic page url

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

Upvotes: 0

Views: 365

Answers (1)

codegeek
codegeek

Reputation: 33319

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.

Upvotes: 1

Related Questions