cannot understand ui-router behaviour with Angular JS

Question

I'm new to angular and trying to work out how to use ui-router.

I have the following setup

angular.module('formApp', ['ngAnimate', 'ui.router', 'ui.bootstrap', 'ui.bootstrap.datetimepicker', 'ngResource'])

// configuring our routes 
// =============================================================================
.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider
        // route to show our basic form (/form)
        .state('form', {
            url: '/',
            templateUrl: 'views/home.html',
            controller: 'formController'
        })
        // nested states 
        // each of these sections will have their own view
        // url will be nested (/form/profile)
       .state('form.date', {
            url: 'date',
            templateUrl: 'views/form-date.html'
        })
        // url will be /form/interests
        .state('form.address', {
            url: 'address',
            templateUrl: 'views/form-interests.html'
        })
        // url will be /form/payment
        .state('form.payment', {
            url: 'payment',
            templateUrl: 'views/form-payment.html'

        }).state('create', {
            url:'create',
            templateUrl: 'views/create.html',
            controller:'formController'
        });

    // catch all route
    // send users to the form page 
    $urlRouterProvider.otherwise('/');
})

This works fine when I load the page initially, but if I type one of the routes e.g. localhost:3000/date I do not the correct view. It also doesn't work when I get to localhost:3000/form/date

I get the following error: Cannot GET /date and a 404 Not Found error in developer's console.

Could anyone help me out?

Here are my html pages:

home.html

<div class="page-header text-center">

      <!-- the links to our nested states using relative paths -->
      <!-- add the active class if the state matches our ui-sref -->
         <div id="status-buttons" class="text-center">
            <a ui-sref-active="active" ui-sref=".date"><span>1</span> Date</a>
            <a ui-sref-active="active" ui-sref=".address"><span>2</span> Address</a>
            <a ui-sref-active="active" ui-sref=".payment"><span>3</span> Payment</a>
           </div>
 </div>            
   <form name="myform" id="signup-form" stripe:form="saveCustomer" novalidate>
       <!-- our nested state views will be injected here -->
       <div id="form-views" ui-view></div>
    </form>

Can anyone please clarify what's going on here?

One thing is that `ui-sref`s should have the full name of the state like `ui-sref="form.date"`. — sbolel, Mar 22 '15 at 02:46

score 1 · Accepted Answer · edited May 23 '17 at 12:06

1

Try localhost:3000/#/date and localhost:3000/#/form/date.

Unless you specify $locationProvider.html5Mode(true); you should be using # root for angular application. However, there are some restrictions for Html5Mode, for example, you won't be able to use $urlRouterProvider.otherwise(...);. Check this post. If you are new to Angular I wouldn't recommend using Html5Mode

edited May 23 '17 at 12:06

Community

1
1

answered Mar 22 '15 at 02:42

Kirill Slatin

6,085
3
18
38

thanks for that - I hate that # symbol - if i redirect the routes on the node server will that redirect it? – Mobaz Mar 22 '15 at 02:57
If you have a reason to get rid of `#` use Html5Mode and read the post referenced in answer. It gives the idea how to handle serverside – Kirill Slatin Mar 22 '15 at 02:59

cannot understand ui-router behaviour with Angular JS

1 Answers1