在Angular路由中传递变量名

Question

目前，我可以使用以下代码在AngularJs中添加路由机制：

App.config(function($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', {
                templateUrl : '/templates/home.html',
                controller  : 'landing'
            })
        .when('/login', {
                templateUrl : '/templates/login.html',
                controller  : 'login'
            });
});

我需要的是格式为/app/:appname的URL，它应该获取名为/template/:appname.html的模板。我知道可以使用以下代码从控制器中访问appname：

$routeParams.appname;

但是我应该如何根据该参数渲染模板呢？

- georoot

Answer 1

templateUrl可以作为一个返回URL的函数来使用。

App.config(function($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', {
            templateUrl : '/templates/home.html',
            controller  : 'landing'
        })
        .when('/:appname',{
            templateUrl: function(params){
                return "templates/"+params.appname +".html"
            },
            controller: 'Ctrl'
        });
});

- huseyinozcan

---

抱歉，我不能接受超过一个答案作为正确答案。以上两个答案都是可行的。 :) - georoot

Answer 2

你可以这样做：

App.config(function($routeProvider, $locationProvider) {
    $routeProvider
        .when('/app/:appname', {
                templateUrl : '/templates/app-template.html',
                controller  : 'AppCtrl',
                resolve: {
                    appPath: function ($route) {
                        return $route.current.params.appname;
                    }
                }
            })
});

在AppCtrl中，

App.controller('AppCtrl', AppCtrl);

AppCtrl.$inject = [
    '$scope'
    'appPath'
];

function AppCtrl($scope, appPath) {
    $scope.template = appPath + '.html';
}

在app-template.html中，使用ng-include如下所示。

<div ng-include src="template"></div>

希望这能有所帮助。

- Taku