Question

我正在学习AngularJS。现在我在使用AngularJS进行路由时感到困惑。实际上我需要在我的主页面创建任务。http://localhost:8080/#/。这个url用于创建任务。如果用户想要编辑任务，那么我以这种方式将id添加到routeParams http://localhost:8080/#/5中。现在，如果用户想要查看allTask，则URL为http://localhost:8080/#/allTask。但它需要allTask作为id并去编辑任务URL。路由为

'use strict';

angular.module("mainApp",['ngRoute','ngResource','ngGrid','ui.codemirror']).
config(['$routeProvider', function($routeProvider) {
    $routeProvider
    .when('/:id', {
    templateUrl: 'component/task/Task.html',
    controller: 'taskController'
    })
    .when('/', {
    templateUrl: 'component/task/Task.html',
    controller: 'taskController'
    })

    .when('/allTask', {
        templateUrl: 'component/allTask/allTask.html',
        controller: 'allTaskController'
    })  
}])

Answer 1

将allTask路线移至:id之前的路线，如下所示：

'use strict';

angular.module("mainApp", ['ngRoute', 'ngResource', 'ngGrid', 'ui.codemirror']).
config(['$routeProvider',
  function($routeProvider) {
    $routeProvider
      .when('/allTask', {
        templateUrl: 'component/allTask/allTask.html',
        controller: 'allTaskController'
      })
      .when('/:id', {
        templateUrl: 'component/task/Task.html',
        controller: 'taskController'
      })
      .when('/', {
        templateUrl: 'component/task/Task.html',
        controller: 'taskController'
      });
  }
])

通过使参数:id可选（带问号?），您也可以使用一条路线而不是后两条路线。这是更新的代码：

'use strict';

angular.module("mainApp", ['ngRoute', 'ngResource', 'ngGrid', 'ui.codemirror']).
config(['$routeProvider',
  function($routeProvider) {
    $routeProvider
      .when('/allTask', {
        templateUrl: 'component/allTask/allTask.html',
        controller: 'allTaskController'
      })
      .when('/:id?', {
        templateUrl: 'component/task/Task.html',
        controller: 'taskController'
      });
  }
])

在AngularJS中使用ID进行路由的正确方法

1 个答案: