CODEWITHSUNDEEP
javascriptangularjsroutesangular-ui-router
gh0st
gh0st

Reputation: 1722

Why aren't my routes working using UI.Router?

I'm trying to put together some simple routes and I'm having a really hard time. Here is a link to the git repo.

When I navigate to /members my members load perfectly. When I navigate to /members/new the template doesn't load nor does the static template for /members/test.

Here is my client side routes.js

import angular from 'angular';
import 'angular-ui-router';

angular.module('ncps.routes', ['ui.router']).config(($stateProvider, $urlRouterProvider) => {
    $urlRouterProvider.otherwise('/members');

    $stateProvider
    .state('members', {
        url: '/members',
        templateUrl: 'members/members-view.html',
        resolve: {
            membersService: function($http) {
                return $http.get('/members');
            }
        },
        controller: 'MembersController as membersCtrl'
    })
    .state('members.new', {
        url: '/new',
        template: 'I could use a drink right now.'
    })
    .state('members.test', {
        url: '/test',
        template: 'I could use a drink right now.'
    });
});

And then in my index.html I have my usual <div ui-view></div>. So what am I doing wrong?

Upvotes: 0

Views: 39

Answers (1)

George Chen
George Chen

Reputation: 6959

Your configuration is for Nested States & Nested Views. You need to add a 

<div ui-view></div>

in your members-view.html. That is where your nested views go.

Upvotes: 4

Related Questions