Question

我有一个使用$routeProvider和$stateProvider的AngularJS应用。我可以让所有路线/状态与/分开。

这是我的app.js文件

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;
        }]
    );
...

当我转到/时，没有任何事情发生，但当我转到/#templates时，相应的视图和控制器就会启动。

任何人都可以看到我的$routeProvider出现了什么问题以及为什么要/没有做任何事情？

Answer 1

为什么不简单地使用$urlRouterProvider并路由到/？

$urlRouterProvider.otherwise('/');

然后为/

设置新状态

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

Answer 2

您可以像这样指定默认路线

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

希望这会有所帮助！

Answer 3

如果网址错误，则重定向到错误页面会更有用。但您可以尝试添加<base href="/" />来引用索引中的基本位置并添加$ locationProvider.html5Mode（true）;在您的配置功能中声明路由后启用，否则您需要将＃添加到URL。

我希望这会对你有所帮助。

AngularJS：路由提供程序在root时不起作用

3 个答案: