角动态路由

Question

我有一个有角度的应用程序，它应该根据资源以下列方式显示不同的页面：

1. 给定url: localhost/foo/456
2. 调用REST服务(fooService)来获取foo的描述符。
3. 根据描述符使用适当的模板。

下面是配置部分(有点伪代码)：

.config(['$routeProvider', '$locationProvider', 'fooService', function ($routeProvider, $locationProvider, fooService) {
    $locationProvider.html5Mode();
    var fooTemplateUrlSelector = function (routeParams) {
            var foo = fooService.getFoo(routeParams.fooId);
            switch (foo.TemplateId) {
            case 1:
                return 'Foo1.html';
            case 2:
                return 'Foo2.html';
            default:
                return 'Unsupported.html';
            }
        };

    $routeProvider.when('/foo/:fooId', { templateUrl: fooTemplateUrlSelector, controller: 'FooController' })

问题在于，在配置阶段，我无法访问任何服务(“未知提供者:fooService”)。在配置部分，您只允许访问“静态”内容，这似乎是一个角度约束。我懂了。

这个问题的最佳解决方案(就最佳实践而言)是什么？

模板可能有很大不同，所以我不希望有一个html文件，其中包含大量的"if TemplateId == 1，display_some_markup display_some_markup if TemplateId == 2 a display_something_else“。

Answer 1

这一定是在app.config()中吗？我主张这样做：

html：

 <div ng-controller="Ctrl" ng-init="init()">
    <div ng-if="foo.templateID == 1">
      // ng-include="foo1.html"
    </div>
    <div ng-if="foo.templateID == 1">
      // ng-include="foo2.html"
    </div>
</div>

主计长：

function Ctrl($scope, fooService) {
    $scope.init = function() {
        $scope.foo = fooService.getFoo(routeParams.fooId);
    };
    // other functions and features
};