我可以通过 API 调用在 AngularJS 中动态创建路由吗？答案

【问题标题】：Can I dynamically create routes in AngularJS from an API call?我可以通过 API 调用在 AngularJS 中动态创建路由吗？
【发布时间】：2014-02-02 17:56:41
【问题描述】：

我正在学习 AngularJS，并假设这是可能的，那么根据 API 调用的结果动态创建路由的最佳方法是什么？

我有一个控制器，它返回一个文件夹数组：

controllers.controller('FoldersCtrl', function($scope, $http) { 
  $http.jsonp('https://api....=JSON_CALLBACK').then(function (shaggy){
    $scope.list=shaggy.data;
});

我见过几个$routeProvider 的例子，它们看起来像这样：

app.config(function ($routeProvider) {
  $routeProvider
  .when('/somePath', {controller:"SomePathCtrl", templateUrl: "partials/somePath.html" })
  .otherwise({redirectTo: "/homePath"})
});

但我还没有遇到过这样的例子：'/somePath' 是从 API 调用的结果派生的。我想做这样的事情：

app.config(function ($routeProvider) {
  $routeProvider
  .when({{shaggy.data.folder}}, {controller:"FolderCtrl", templateUrl: "partials/folder.html" })
  .otherwise({redirectTo: "/homePath"})
});

理想情况下，FolderCtrl 和 partials/folder.html 都将填充足够通用的代码以显示每个文件夹中的对象，因此必须知道我传递给路由的 {{shaggy.data.folder}}。有什么想法吗？

提前致谢。

【问题讨论】：

这可能是一个答案？ stackoverflow.com/a/13173667/454252

标签： javascript angularjs

【解决方案1】：

$routeProvider 只能在模块的 config 方法中配置，该方法将在该模块中的任何其他内容（如服务或控制器）之前运行。

实现此目的的一种方法是使用包罗万象的路线：

$routeProvider.when('/:somePath*', ...)

并使用 $routeParams 来模拟行为。

一个松散的（理论上的）例子：

.controller('RouteController', function($routeParams) {
  this.viewPath = $routeParams.showPath + '.html';  // or some way to map routes to views.
});

<div ng-controller="RouteController as routeCtrl">
  <div ng-include="{{routeCtrl.viewPath}}"></div>
</div>

我们有一个（非开源）应用程序，我们在初始服务器页面渲染期间创建一个带有路由信息的 JS 变量，类似于：

<script>var ROUTES = <% routes %>;</script>

其中routes 是来自服务器的地图的 JSON 转储（跳过来自 JS 的 API 调用）。然后，我们简单的设置$routeProvider：

.config(function($routeProvider) {
  angular.forEach(JSON.parse(ROUTES), function(view, route) {
    $routeProvider.when(route, {templateUrl: view});
  });
})

【讨论】：