AngularJS动态路由 [英] AngularJS dynamic routing

问题描述

我现在有内置的路由的AngularJS应用。
它的工作原理，一切都ok了。

我的app.js文件看起来像这样：

  angular.module（'MyApp的'，['myapp.filters'，'myapp.services'，'myapp.directives']）。
  配置（['$ routeProvider'，函数（$ routeProvider）{
      $ routeProvider.when（'/'，{templateUrl：/pages/home.html'，控制器：HomeController中}）;
      $ routeProvider.when（'/约'，{templateUrl：/pages/about.html'，控制器：AboutController}）;
      $ routeProvider.when（'/隐私'，{templateUrl：/pages/privacy.html'，控制器：AboutController}）;
      $ routeProvider.when（'/条款'，{templateUrl：/pages/terms.html'，控制器：AboutController}）;
      $ routeProvider.otherwise（{redirectTo：'/'}）;
  }]）;
 

我的应用程序有一个内置的CMS在您可以复制并在 /页面内添加新的HTML文件目录。

我想还是去通过路由提供商但即使新动态添加的文件。

在一个理想的世界路由模式将是：

$ routeProvider.when（'/ 页面名称'，{templateUrl：/pages/pagename.html'，控制器：CMSController}）;

所以，如果我的新页面的名称是contact.html我想角拿起/接触，并重定向到/pages/contact.html。

这甚至可能？如果又如何？！

更新

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

  $ routeProvider.when（'/页/：名称'，{templateUrl：/pages/home.html'，控制器：CMSController}）
 

在我CMSController：

 函数CMSController（$范围，$路径，$ routeParams）{
    $ route.current.templateUrl ='/页/+ $ routeParams.name +。html的;
    警报（$ route.current.templateUrl）;
}
。CMSController $注射='$范围，$路线'，'$ routeParams'];
 

这将当前templateUrl以正确的价值。

的然而的现在我想改变的 NG-视图的新templateUrl值。这是如何实现的？

解决方案

  angular.module（'MyApp的'，['myapp.filters'，'myapp.services'，'MyApp的。指令']）。
        配置（['$ routeProvider'，函数（$ routeProvider）{
        $ routeProvider.when（'/页/：姓名*'，{
            templateUrl：功能（urlattr）{
                回报/页/+ urlattr.name +'的.html';
            }，
            控制器：'CMSController
        }）;
    }
]）;
 

• 添加*让你的 多级目录工作的动态。
  例如：的 /页/汽车/销售/列表的将风风火火此提供程序

从文档（1.3.0）：

  

如果templateUrl是一个函数，它会与下面的被称为
  参数：

  
  

{阵列。} - 从当前的提取路由参数
  $ location.path（）通过施加电流路径

此外

  

当（道路，路线）：方法

  
  

  
• 路径可以包含开始一个冒号和一个明星结尾命名组：e.g.:name*。所有字符都急切地存储在$ routeParams路线相匹配时，以给定名字。

  

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

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: '/' });
  }]);

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 });

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?!

Update

I now have this in my routing config:

$routeProvider.when('/page/:name', { templateUrl: '/pages/home.html', controller: 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'];

This sets the current templateUrl to the right value.

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'
        });
    }
]);

• Adding * let you work with multiple levels of directories dynamically. Example: /page/cars/selling/list will be catch on this provider

From the docs (1.3.0):

"If templateUrl is a function, it will be called with the following parameters:

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

Also

when(path, route) : Method

• path can contain named groups starting with a colon and ending with a star: e.g.:name*. All characters are eagerly stored in $routeParams under the given name when the route matches.

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