Question

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

给定网址：localhost / foo / 456
调用REST服务（fooService）以获取foo的描述符。
根据描述符使用适当的模板。

这是配置部分（有点伪代码）：

.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'）。它似乎是一个Angular约束，在配置部分中，您只能访问“静态”事物。我明白了。

解决此问题的最佳方法（就最佳实践而言）是什么？

模板可能会有很大不同，所以我不想让一个html文件包含很多“如果TemplateId == 1，那么如果TemplateId == 2则显示display_some_markup，然后显示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
};

Angular中的动态路由

1 个答案: