6

I have an AngularJS app that uses $routeProvider and a $stateProvider. I can get all my routes/states to work apart from /.

Here's my app.js file

var MailStash = angular.module("MailStash", ['ui.compat', 'ngResource', 'ngSanitize', 'ui.directives']).
    config(function($stateProvider,   $routeProvider,   $urlRouterProvider) {
        $routeProvider
            .when('/', { controller: ListCtrl, templateUrl: '/js/partials/list.html' });

        $stateProvider
            .state('templates', {
                  url: '/templates',
                  abstract: true,
                  templateUrl: '/js/partials/list.html',
                  controller: ListCtrl,
            })
            .state('templates.list', {
              // parent: 'templates',
              url: '',
              views: {
                'main_content': {
                templateUrl: '/js/partials/templates.new.html',
                controller:CreateCtrl,
                },
              }
            })
            .state('templates.view', {
              parent: 'templates',
              url: '/{templateId}',
              views: {
                'main_content': {
                  templateUrl: '/js/partials/templates.view.html',
                  controller: ViewCtrl,
                },
              },
            })
            .state('templates.new', {
              url: '/new',
              views: {
                'main_content': {
                  templateUrl: '/js/partials/templates.new.html',
                  controller: CreateCtrl,
                },
              },
            })
            .state('templates.edit', {
              parent: 'templates',
              url: '/edit/{templateId}',
              views: {
                'main_content': {
                  templateUrl: '/js/partials/templates.edit.html',
                  controller: EditCtrl,
                },
              },
            })
    }
    )
    .run(
        [        '$rootScope', '$state', '$stateParams',
        function ($rootScope,   $state,   $stateParams) {
            $rootScope.$state = $state;
            $rootScope.$stateParams = $stateParams;
        }]
    );
...

Nothing happens when I go to / but when I go to /#templates the appropriate views and controllers kick in.

Can anyone see what is wrong with my $routeProvider and why going to / is not doing anything?

1

You can specify the default route like this

$routeProvider
        .when('/templates', { controller: ListCtrl, templateUrl: '/js/partials/list.html' })
        .otherwise({ redirectTo: '/templates' });

Hope this will help!

|improve this answer|||||
1

Otherwise is more useful to redirect to an error page, if the url is bad. But you can try to add <base href="/" /> to refer the base location in your index and add $locationProvider.html5Mode(true); after the declaration of routes in your config function to enabled, otherwise you need to add # to the url.

I hope this will help you.

|improve this answer|||||
5

Why not simply use $urlRouterProvider and route to / ?

$urlRouterProvider.otherwise('/'); 

Then set a new state for /

$stateProvider.state({
  name: 'home',
  url: '/',
  controller: 'HomeCtrl',
  templateURL: 'home.html'
});
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.