Angular-js - 动态创建navi

时间:2016-07-13 08:38:38

标签: angularjs navigation

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

因此,通常教程会显示;

$ routeProvider.when(' /',{             templateUrl:' views / home.html',             controller:' mainController'         })

但如果我事先不知道这些路线会怎样呢?

1 个答案:

答案 0 :(得分:0)

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

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

在有角度的phonecat步骤中,#9是角度路由器的一个很好的例子。

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