Angular-js - 动态创建导航

Question

我是 Angularjs 的新手，并且已经学习了许多教程来提高我的知识。所有教程都向我展示了如何使用 $routeProvider 将模板加载到视图中。然而，他们只向我展示了假设路由已知的示例，我想学习如何动态创建这些路由，以便我可以从数据库中提取未知导航项的列表并在循环中创建这些路由。

所以，通常会显示一个教程；

$routeProvider.when('/', { templateUrl : 'views/home.html', 控制器：“主控制器” })

但是如果我事先不知道这些路线会是什么？

Answer 1

很遗憾，您无法动态创建路线。你只能在 module.config() 中配置你的路由。我认为您搜索带有休息参数的路线。

这里有一个快速示例，其中包含一个列表视图和一个显示列表一项的详细视图。假设要定义 backendService。列表的结果 url 是 .../#/list，对于 id 为 12345 的项目的详细视图，url 是 .../#/list/12345。请注意，所有路由参数都被解释为字符串。所以 routeParams 将是{id: "12345"}。

在 angular phonecat 步骤中#9 是 angular 路由器的一个很好的例子。

angular.module('app').config( function($routeProvider) {
  $routeProvider.when('/list', 
    {
       templateUrl: 'views/list.html', 
       controller:'listCtrl'
    }
  ).when('/list/:id', 
    {
      templateUrl: 'views/detail.html',
      controller: 'detailCtrl'
    })
});
angular.module('app').controller('detailCtrl', 
    function($scope, $routeParams, backendService) {
      $scope.items = backendService.getItemById($routeParams.id);
    }
);