AngularJS动态路由(AngularJS dynamic routing)

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

我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文件。

我想还是要经过但即使新动态添加文件的路由平台提供商。

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

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

所以，如果我的新的一页的名字是“contact.html”我想角回暖“/接触”，并重定向到“/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以正确的价值。

不过，我现在想改变NG-视图与新templateUrl值。 这是如何实现的呢？

Answer 1:

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

• 添加*让你使用目录的多层次的工作动态。 例如：/页/汽车/销售/名单将捉对这个供应商

从文档（1.3.0）：

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

{阵列。} - ）从当前$ location.path（提取路由参数通过将当前路线”

也

时（路径，路由）：方法

• 路径可以包含开始一个冒号和一个明星结尾命名组：如：名称*。 所有字符都急切地存储在$ routeParams给定的名称下的路由匹配时。

Answer 2:

好的解决了这个问题。

新增解决GitHub的 - http://gregorypratt.github.com/AngularDynamicRouting

在我的app.js路由配置：

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

然后在我的CMS控制器：

function CMSController($scope, $route, $routeParams) {

    $route.current.templateUrl = '/pages/' + $routeParams.name + ".html";

    $.get($route.current.templateUrl, function (data) {
        $scope.$apply(function () {
            $('#views').html($compile(data)($scope));
        });
    });
    ...
}
CMSController.$inject = ['$scope', '$route', '$routeParams'];

与#views是我<div id="views" ng-view></div>

所以，现在它的工作原理与标准的路由和动态路由。

为了测试我复制about.html称之为portfolio.html，改变了它的一些内容，并进入/#/pages/portfolio成我的浏览器，嘿被显示似的portfolio.html ....

更新 $新增申请和$编译到HTML，以便动态内容可以注入。

Answer 3:

我认为做这样的事情最简单的方法是以后解决途径，你可以通过JSON问路由，例如。 看看我做一个工厂出来的$ routeProvider期间配置阶段，通过$提供，这样我就可以继续使用$ routeProvider对象在运行阶段，甚至在控制器。

'use strict';

angular.module('myapp', []).config(function($provide, $routeProvider) {
    $provide.factory('$routeProvider', function () {
        return $routeProvider;
    });
}).run(function($routeProvider, $http) {
    $routeProvider.when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
    }).otherwise({
        redirectTo: '/'
    });

    $http.get('/dynamic-routes.json').success(function(data) {
        $routeProvider.when('/', {
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
        });
        // you might need to call $route.reload() if the route changed
        $route.reload();
    });
});

Answer 4:

在$ routeProvider URI patters，您可以指定变量参数，就像这样： $routeProvider.when('/page/:pageNumber' ... ，和访问它通过$ routeParams控制器。

有一个在$路线页面的最后一个很好的例子： http://docs.angularjs.org/api/ng.$ro​​ute

编辑（用于编辑的问题）：

路由系统是不幸的是非常有限的 - 有关于这个话题的讨论很多，而一些解决方案已被提出，即通过创建多个命名视图等。但眼下，ngView指令提供每路只有一个视图，上一到一的基础。 你可以去了解这个以多种方式-简单的一个办法是使用视图的模板作为装载机，具有<ng-include src="myTemplateUrl"></ng-include>在它（$ scope.myTemplateUrl标签将在控制器中创建）。

我使用更复杂的（但清洁剂，对于大型和更复杂的问题）的解决方案，基本上跳过$航线的干脆，那就是这里详细：

http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

Answer 5:

不知道为什么（如果你喜欢或通配符）这个工作，但动态路由的角度1.2.0-rc.2是可能的...

http://code.angularjs.org/1.2.0-rc.2/angular.min.js
http://code.angularjs.org/1.2.0-rc.2/angular-route.min.js

angular.module('yadda', [
  'ngRoute'
]).

config(function ($routeProvider, $locationProvider) {
  $routeProvider.
    when('/:a', {
  template: '<div ng-include="templateUrl">Loading...</div>',
  controller: 'DynamicController'
}).


controller('DynamicController', function ($scope, $routeParams) {
console.log($routeParams);
$scope.templateUrl = 'partials/' + $routeParams.a;
}).

example.com/foo - >载荷 “foo” 的部分

example.com/bar->负载“栏中的”部分

无需在NG-视图任何调整。 在“/ A”的情况下是唯一的变量我发现，将达致这..“/：富”不工作，除非你的泛音都foo1，foo2的，等...“/ A”可以与任何部分名称。

所有数值火动态控制器 - 所以不存在“否则”但是，我认为这是你在动态或通配符的路由方案找什么..

Answer 6:

作为AngularJS 1.1.3，你现在可以做的正是你想要使用什么新的包罗万象的参数。

https://github.com/angular/angular.js/commit/7eafbb98c64c0dc079d7d3ec589f1270b7f6fea5

从提交：

这使得routeProvider接受匹配，即使它们包含斜线，如果他们都用星号代替冒号前缀字符串参数。 例如，像路线edit/color/:color/largecode/*largecode将匹配这样的事情http://appdomain.com/edit/color/brown/largecode/code/with/slashs 。

我已经测试了它自己（使用1.1.5）和它的伟大工程。 请记住，每个新的URL会重新载入您的控制器，所以要保持任何一种状态，你可能需要使用的定制服务。

Answer 7:

这里是一个很好的工作另一种解决方案。

(function() {
    'use strict';

    angular.module('cms').config(route);
    route.$inject = ['$routeProvider'];

    function route($routeProvider) {

        $routeProvider
            .when('/:section', {
                templateUrl: buildPath
            })
            .when('/:section/:page', {
                templateUrl: buildPath
            })
            .when('/:section/:page/:task', {
                templateUrl: buildPath
            });



    }

    function buildPath(path) {

        var layout = 'layout';

        angular.forEach(path, function(value) {

            value = value.charAt(0).toUpperCase() + value.substring(1);
            layout += value;

        });

        layout += '.tpl';

        return 'client/app/layouts/' + layout;

    }

})();

文章来源: AngularJS dynamic routing