Question

我首次使用现有应用程序首次进入Angular 1。我想要改变的这个应用程序的一个方面是如何为我们的应用程序中的每个实体提供单独的服务和其他东西。

我已将其抽象出来，以便所有实体只有一项服务，但现在我正在尝试加载模板，其中文件名等于特定的州参数。

以下是如何完成每个实体的路由：

namespace App.Employee {
    'use strict';

    angular
        .module('app.employee')
        .run(appRun);

    appRun.$inject = ['routerHelper'];
    function appRun(routerHelper: Common.Router.IRouterHelperService) {
        routerHelper.configureStates(getStates());
    }

    function getStates() {
        return [{
            name: 'employee',
            url: '/employee/{employeeId}',
            templateUrl: 'app/employee/employee.html',
            controller: 'employeeCtrl',
            controllerAs: 'vm',
            data: {
                title: 'Employee'
            }
        }];
    }
}

这是我要将其更改为：

namespace App.Entity {
    'use strict';

    angular
        .module('app.entity')
        .run(appRun);

    appRun.$inject = ['routerHelper'];

    function appRun(routerHelper: Common.Router.IRouterHelperService) {
        routerHelper.configureStates(getStates());
    }

    function getStates() {
        return [{
            name: '||entityTypeName||',
            url: '/{entityTypeName}/{entityId}',
            templateUrl: 'app/entity/||entityTypeName||.html',
            controller: 'entityCtrl',
            controllerAs: 'vm',
            data: {
                title: '||entityTypeName||'
            }
        }];
    }
}

注意我是如何在网址中引入{entityTypeName}的。这成功指向适当的Web API服务并撤回实体。不过，我想将||entityTypeName||占位符标记为{entityTypeName}匹配的内容。这至少就是一般的想法。

我在这一点上对Angular知之甚少，并且随着我的进展而学习，所以如果需要其他代码，请告诉我。

Answer 1

templateUrl属性可以赋予函数而不是字符串，并且它将传递当前的状态参数。像这样：

templateUrl: function(params) {
    return 'app/entity/' + params.entityTypeName + '.html';
}

params参数由ui-router框架提供。

Answer 2

我也使用带有视图和视图参数的动态路由做类似的事情，如下所示：

        /**
        * url: "/view?a"
        * Will match to url of "/view?a=value"
        */
        .state('root.view', {
            url: '/view?a',
            views: {
                  'main-content@': { templateUrl: function(params) {console.log(params.a); return 'app/views/ + params.path + ".php"} }
            }
        })

或者以下内容：

        /**
        * Dynamic Routing
        */
        .state('root.catpath', {
            url: '/{path:.*}',
            views: {
                'main-content@': { templateUrl: function(params) {console.log(params); return 'app/views/' + params.path + ".php"} }
            }
        });

动态模板URL

2 个答案: