Angular-ui routing issue

Question

I have an AngularJS application that has two main sections and I have created routes for each section.

Everything was fine until after I added the second section and the additional routes to the config section of the app. I am getting the error:

Error: No reference point given for path '.blog'

Here is the Angular app config.

    .config(function ($stateProvider, $urlRouterProvider, embedlyServiceProvider, $httpProvider, $locationProvider) {

        $stateProvider

 // SECTION 1
.state('blog', {
    abstract:true,
    url: '/blog',
    templateUrl: '../../../../views/projects/templates/blog.html',
    controller: 'projectController'
})


// nested states 
// each of these sections will have their own view
// url will be nested (/blog/updates)
.state('blog.updates', {
    url: '/updates',
    templateUrl: '../../../../views/projects/templates/updates.html',
})

.state('blog.comments', {
    url: '/comments',
    templateUrl: '../../../../views/projects/templates/comments.html',
})



   // SECTION 2
    .state('build', {
        url: '/build',
        templateUrl: '../../views/forms/build.html',
        controller: 'BuilderController'
    })

    // nested states 
    .state('build.basics', {
        url: '/basics',
        templateUrl: '../../views/forms/basics.html'
    })

    // url will be /build/products
    .state('build.products', {
        url: '/products',
        templateUrl: '../../views/forms/products.html'
    })
    .state('build.blog', {
        url: '/blog',
        templateUrl: '../../views/forms/blog.html'
    })
    .state('build.profile', {
        url: '/profile',
        templateUrl: '../../views/forms/profile.html'
    })

    .state('build.payment', {
        url: '/payment',
        templateUrl: '../../views/forms/payment.html'
    })
    .state('build.team', {
        url: '/team',
        templateUrl: '../../views/projectbuilder/forms/team.html'
    });

// catch all route
$urlRouterProvider.otherwise('/');

Here are the ui-srefs for the first section:

      <div class="row">
        <ul class="inline-list">
            <li><a ui-sref-active="active" ui-sref=".blog">Blog</a></li>
            <li><a ui-sref-active="active" ui-sref=".updates">Updates ({{formData.updatesCount}})</a></li>
            <li><a ui-sref-active="active" ui-sref=".comments">Comments ({{formData.commentsCount}})</a></li>
        </ul>
    </div>

Here are the ui-srefs for the second section. This section is still working fine.

    <ul class="side-nav">
        <li><a ui-sref-active="active" ui-sref=".basics"><span>1</span> Basics</a></li>
        <li><a ui-sref-active="active" ui-sref=".blog"><span>3</span> Blog</a></li>
        <li><a ui-sref-active="active" ui-sref=".profile"><span>4</span> Profile</a></li>
        <li><a ui-sref-active="active" ui-sref=".payment"><span>5</span> Payments</a></li>
        <li><a ui-sref-active="active" ui-sref=".team"><span>6</span> Team</a></li>
    </ul>

Thanks for any insight into this. I am fairly new at Angular and still getting my head around it.

Or Guz · Accepted Answer · 2015-02-17 05:37:36Z

3

According to angular-ui documentation:

ui-sref = 'stateName' can be any valid absolute or relative state

Remove the dots and use the unique state names as configured in the state router.

Don't forget blog state is abstract.

An abstract state can have child states but can not get activated itself. An 'abstract' state is simply a state that can't be transitioned to. It is activated implicitly when one of its descendants are activated.

Angular-UI documentation on nested states (including abstract usages)

<div class="row">
        <ul class="inline-list">
            <li><a ui-sref-active="active" ui-sref="blog.updates">Updates ({{formData.updatesCount}})</a></li>
            <li><a ui-sref-active="active" ui-sref="blog.comments">Comments ({{formData.commentsCount}})</a></li>
        </ul>
    </div>

edited Feb 17, 2015 at 5:37

answered Feb 17, 2015 at 5:31

Or Guz

1,0186 silver badges13 bronze badges

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

4 Comments

brianc Over a year ago

Thanks Or Guz but it is not solving the issue. I removes the dots as suggested and it produces same error. Adding state name to ui-sref gave a new error Error: Could not resolve 'updates' from state ''. If I remove SECTION 1 the SECTION 2 and corresponding ui-srefs work.

Or Guz Over a year ago

You used the full state name as written in my code? blog.updates?

brianc Over a year ago

Yes.. I got the javascript error to stop but now the templates are not switching now with no error given. Any ideas on that? I will mark your answer for sure as it did solve the original problem. Thanks.

Or Guz Over a year ago

jsfiddle.net/5qb6kose This will help you, enjoy. I wrote a working jsfiddle to make an example for your need, didn't find any good one online

Collectives™ on Stack Overflow

Angular-ui routing issue

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related