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向控制台输出一组正确的路由，这似乎表明路由已正确分配。但是，如果我要打开任何应由该路线处理的网址。什么都没发生。从不调用基本资产负载，即导航条和页脚，它们始终是恒定的，但是路径的控制器。我在这里想念的是什么。

- 更新

我认为我的路线遵循以下模式：

参赛作品列表：

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

我不确定如何定义上述内容 - 基本上前两个路由将调用一个控制器和一个视图，而第三个woudl调用另一个视图。但是我仍然坚持如何在AngularJS中定义这种路由，前提是等等都是数据库中的slu。几乎没有硬编码一系列路线，但这似乎也不起作用。

另外我还有其他静态页面 - 例如/ 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配置功能用于设置配置，用于初始化服务。这意味着尝试从"manchester_10:2016-09-28 09" "burnley_10:2016-09-28 09"函数更改配置将不会发生任何事情，因为配置已被使用。

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

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

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

2 个答案: