从 api 加载的路由 - 控制器从未调用

Question

我正在尝试通过运行 ajax 调用并在我的 RouteProvidor 上设置路由来将路由加载到我的 angularJS 应用程序中。以下是我的代码。

var app = angular.module('app', ['ngRoute']);
var appRouteProvider;

app.config(['$routeProvider', '$locationProvider', 
                      function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode({  
    enabled: true,
    requireBase: false
  });
  appRouteProvider = $routeProvider;

  appRouteProvider.when('/', {
    templateUrl : '../../app/templates/home.html',
    controller  : 'IndexController'
  });

}]).run(function($http, $route){

  url = siteApiRoot+'api/routes';

  $http.post(url, jQuery.param([]), {
      method: "POST",
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    }
  ).success(function(data){

    for(i in data){
        appRouteProvider.when(data[i].route, {
            templateUrl : data[i].template,
            controller  : data[i].controller
        });
    }

    console.log($route.routes);

  });
});

console.log 向控制台输出一组正确的路由，这似乎表明路由已正确分配。但是，如果我要打开任何应该由路由处理的 url。什么都没发生。基本资产加载，即导航栏和页脚，它们始终保持不变，但从不调用路线的控制器。我在这里想念什么。

-- 更新

从技术上讲，我的路线遵循以下模式：

条目列表：

/<city>/<category>
/<city>/<subdistrict>-<category>
/<city>/<entry-slug>

我不确定如何很好地定义上述内容 - 基本上前两条路线将调用一个控制器和一个视图，而第三条将调用另一个。但是，我坚持如何在 AngularJS 中定义这种路由，前提是 etc 都是数据库中的 slug。几乎只剩下硬编码一组路线，但这似乎也不起作用。

另外，我还有其他静态页面 - 例如 /about /site/contact - 在此处路由时有点丢失。

Answer 1

初始化后无法更改路由器配置，但可以使用参数化路由来处理一切。

您可以在外部服务中获取路由数据，并使用您需要的任何查找逻辑为当前参数找到合适的条目。我认为这样做的目的是为这些路由提供不同的模板和控制器。

您可以使用简单的 ng-include 解决模板，但您必须手动实例化控制器。查看$injector 而不是此处的 $controller 调用以了解有关此问题的更多详细信息，因为您可能需要为它们进行完全依赖注入。这里的 RouteController 只是将自己的作用域传递给创建的控制器（此时它实际上就像任何通用服务一样），它已经被路由器附加到 container.html。请注意，ng-include 创建了一个子作用域，因此如果要在模板中的作用域上分配新变量，则必须小心。

（如果这是一个问题，您也可以手动获取、构建和附加模板：查看$templateRequest、$templateCache 和 $compile 服务。（您必须创建一个指令将其附加到DOM))

这是准系统示例代码：

var app = angular.module('app', ['ngRoute']);

app.service("getRouteConfig", function($http) { 

  var routeRequest = $http.post(url, jQuery.param([]), {
      method: "POST",
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    }

  return function(params) {
    return routeRequest.then(function(routes) {
      // find route entry in backend data for current city, category/slug
      return routes[params.city][params.slug];
    });
  }
})

app.controller("RouteController", function(route, $scope, $controller) { 
  $controller(route.controller, {$scope: $scope});

})

app.config(function($routeProvider) {

  $routeProvider.when('/', {
    templateUrl : '../../app/templates/home.html',
    controller  : 'IndexController'
  });
  $routeProvider.when('/:city/:url', {
    templateUrl : '../../app/templates/container.html',
    controller  : 'RouteController',
    resolve: {
      route: function(getRouteConfig, $routeParams) {
        return getRouteConfig($routeParams);
    }
   }
  });

});

container.html：

<ng-include src='$resolve.route.template'>

Answer 2

Angular 配置函数用于设置配置，用于初始化服务。这意味着尝试从 run() 函数更改配置将不会导致任何事情发生，因为该配置已被使用。

一种可能的选择是在发送到客户端的实际 js 文件中从服务器提供配置。否则没有简单的方法可以使用 $http 更改配置。

这里有更多讨论：use $http inside custom provider in app config, angular.js