AngularJS动态路由

  • Z时代
  • 2024-01-10
  • 分类：问答

我目前有一个内置路由的AngularJS应用程序。它可以正常工作，并且一切正常。

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

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，您可以在其中复制 目录中的新html文件并添加新的html文件。

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

在理想的情况下，路由模式为：

$ routeProvider.when（’/ ‘，{templateUrl：’/ pages /

.html’，控制器：CMSController}）;

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

/pages/contact.html”。

这有可能吗？如果是这样怎么办？

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

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

在我的CMSController中：

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

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

但是， 我现在想用新的templateUrl值更改 ng-view 。这是如何完成的？

回答：

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 / selling / list* 将被该提供程序捕获

从文档（1.3.0）：

“如果templateUrl是一个函数，则将使用以下参数调用它：

{Array。}-通过应用当前路线从当前$ location.path（）中提取的路线参数”

也

when（path，route）：方法

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

以上是 AngularJS动态路由 的全部内容， 来源链接： utcz.com/qa/409823.html

回到顶部