从api控制器加载的路由永远不会被调用

Routes loaded from an api - controller never called

本文关键字：调用 永远 路由 api 控制器 加载      更新时间：2023-09-26

我试图通过运行一个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中定义这种路由所困扰，因为等都是数据库中的slugs。几乎剩下硬编码的路由数组，但这也不工作，因为它看起来。

加上我也有其他页面是静态的-例如/about/site/contact -在路由这里有点丢失。

你不能在初始化之后改变路由器的配置，但是你可以使用参数化路由来处理一切。

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

这个模板你可以用一个简单的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'>

Angular的config函数是用来设置配置的，用于初始化服务。这意味着，试图改变配置从run()功能将导致什么都没有发生，因为配置已经被利用。

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

这里有更多的讨论:在app配置中使用$http自定义提供商，angular.js

相关文章：