AngularJS routing appending an errant directory name

Question

I was put onto this AngularJS project (I'm usually a python/Java dev) when one of our devs left and it's slowly moving on.

I'm using AngularJS v1.0.8. Yes, I know it's old and I plan and transitioning it over to the newest stable version once I can get a fully working version now.

I'm at this part where the navigations is behaving oddly. I have these two forms with their respectful controllers that should be linked from the index page.

The weird thing is, this code works perfectly fine on the older system which, AFAIK nothing changed in the backend or frontend.

Here's the section of the index.html page that links/loads up the other pages.

<div id="nav" ng-controller="navController" class="wrap">
    <div class="container">
    <ul>
      <li><a ui-sref="form.choose" ui-sref-active="active">Available Courses</a></li>
      <li><a ui-sref="form.review" ui-sref-active="active">My Submissions</a></li>
      <!-- <li><a href="#">Approve Submissions</a></li> -->
      <!-- <li ng-show="session.isAdmin()"><a href="#">Admin</a></li> -->
      <li ng-show="session.isAdmin()"><a ui-sref="reports" ui-sref-active="active">Reports</a></li>
    </ul>
  </div>
  </div>

and this is the main directory structure for the views...

└── views
    ├── form
    │   ├── form.choose.tpl.html
    │   ├── form.done.tpl.html
    │   ├── form.edit.tpl.html
    │   ├── form.review.tpl.html
    │   ├── form.tpl.html
    │   └── rubric.directive.tpl.html
    ├── home
    │   └── home.tpl.html
    └── reports
        └── reports.tpl.html

What's happening when I try the hyperlink is that it appends an extra /form to the beginning of the link.

404 error for forms/view/form link

So at this point, I'm just trying to figure out where the error is happening.

Wrong HTML code for 'ref'
Bad AngularJS routing code
Bad directory structure

Old angular + ui-router. You are crazy :D

Paweł Smołka
– Paweł Smołka

2015-07-10 19:58:30 +00:00
Commented Jul 10, 2015 at 19:58 — Paweł Smołka
– Paweł Smołka, Commented Jul 10, 2015 at 19:58

Brandon · Accepted Answer · 2015-07-10 20:09:46Z

1

It could be the effect of nesting states and not setting the state.url correctly. For example say you had defined states as:

.config(function config($stateProvider) {
  $stateProvider.state('form', {
    url: '/form'
  })
  .state('form.choose', {
    url: '/form/choose'
  })
  .state('form.review', {
    url: '/review'
  });
})

Ui-router would see choose and review as child states of form. This would automatically append it's url as a prefix to its children. Then the sref for the form.choose state would be '/form/form/choose', where as for form.review state would be '/form/review'.

Hope this helps!

Edit: Also make sure that ui-router's version is consistent between your system and the old one. It could be that the old version uses a version before child states were implemented which is why it's functioning.

answered Jul 10, 2015 at 20:09

Brandon

2941 silver badge3 bronze badges

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

Collectives™ on Stack Overflow

AngularJS routing appending an errant directory name

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related