AngularJS 动态路由

问题描述

我目前有一个内置路由的 AngularJS 应用程序.它工作正常，一切正常.

I currently have an AngularJS application with routing built in.It works and everything is ok.

我的 app.js 文件如下所示:

My app.js file looks like this:

angular.module('myapp', ['myapp.filters', 'myapp.services', 'myapp.directives']).
  config(['$routeProvider', function ($routeProvider) {
      $routeProvider.when('/', { templateUrl: '/pages/home.html', controller: HomeController });
      $routeProvider.when('/about', { templateUrl: '/pages/about.html', controller: AboutController });
      $routeProvider.when('/privacy', { templateUrl: '/pages/privacy.html', controller: AboutController });
      $routeProvider.when('/terms', { templateUrl: '/pages/terms.html', controller: AboutController });
      $routeProvider.otherwise({ redirectTo: '/' });
  }]);

我的应用程序内置了 CMS，您可以在其中复制和添加 /pages 目录中的新 html 文件.

My app has a CMS built in where you can copy and add new html files within the /pages directory.

即使对于动态添加的新文件，我仍然希望通过路由提供程序.

I would like to still go through the routing provider though even for the new dynamically added files.

在理想的世界中，路由模式应该是:

In an ideal world the routing pattern would be:

$routeProvider.when('/pagename', { templateUrl: '/pages/pagename.html', controller: CMSController });

$routeProvider.when('/pagename', { templateUrl: '/pages/pagename.html', controller: CMSController });

因此，如果我的新页面名称是contact.html"，我希望 angular 选择/contact"并重定向到/pages/contact.html".

So if my new page name was "contact.html" I would like angular to pick up "/contact" and redirect to "/pages/contact.html".

这甚至可能吗?！如果是这样怎么办?！

Is this even possible?! and if so how?!

更新

我现在在我的路由配置中有这个:

I now have this in my routing config:

$routeProvider.when('/page/:name', { templateUrl: '/pages/home.html', controller: CMSController })

在我的 CMSController 中:

and in my CMSController:

function CMSController($scope, $route, $routeParams) {
    $route.current.templateUrl = '/pages/' + $routeParams.name + ".html";
    alert($route.current.templateUrl);
}
CMSController.$inject = ['$scope', '$route', '$routeParams'];

这会将当前的 templateUrl 设置为正确的值.

This sets the current templateUrl to the right value.

但是我现在想用新的 templateUrl 值更改 ng-view.这是如何实现的?

However I would now like to change the ng-view with the new templateUrl value. How is this accomplished?

推荐答案

angular.module('myapp', ['myapp.filters', 'myapp.services', 'myapp.directives']).
        config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/page/:name*', {
            templateUrl: function(urlattr){
                return '/pages/' + urlattr.name + '.html';
            },
            controller: 'CMSController'
        });
    }
]);

• 添加 * 可让您动态处理多级目录.示例:/page/cars/sales/list 将被该提供商捕获

来自文档(1.3.0):

From the docs (1.3.0):

"如果 templateUrl 是一个函数，它会被调用如下参数:

{Array.} - 从当前提取的路由参数$location.path() 通过应用当前路线"

{Array.} - route parameters extracted from the current $location.path() by applying the current route"

还有

when(path, route):方法

• path 可以包含以冒号开头并以星号结尾的命名组:例如:name*.当路由匹配时，所有字符都急切地存储在给定名称下的 $routeParams 中.

这篇关于AngularJS 动态路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！