AngularJS是否具有动态路由？

Question

AngularJS是否具有动态路由？

4

Angular是否支持动态路由呢？或许可以使用如下方法解决：

$routeProvider.when('/:ctrl/:action', 
                     getRoute($routeParams.ctrl,$routeParams.action))

function getRoute(ctrl, action){
   return {
      templateUrl: ctrl+"-"+action+".html"
      controller: 'myCtrl'
   }
}

请帮我，我需要根据routeParams获取templateUrl

- iLemming

请查看http://stackoverflow.com/questions/17091713/dynamic-routing-angularjs/17094459。 - Ajay Beniwal

2个回答

3

您希望将其降至控制器级别。

在此示例中，我通过子域覆盖整个页面以及部分页面：

app.js

config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider.when('/', {
    template: 'home'
  });
  $routeProvider.when('/contact', {
    template: 'contact'
  });
  $routeProvider.otherwise({redirectTo: '/'});
}])

controllers.js

controller('AppController', ['$scope','Views', function($scope, Views) {    
  $scope.$on("$routeChangeSuccess",function( $currentRoute, $previousRoute ){
    $scope.page = Views.returnView();
  });

  $scope.returnView = function(partial){
    return Views.returnView(partial);
  }    

}])

services.js

factory('Views', function($location,$route,$routeParams,objExistsFilter) {  

  var viewsService = {};
  var views = {
    subdomain1:{
      'home':'/views/subdomain1/home.html'
    },
    subdomain2:{

    },
    'global.header':'/views/global.header.html',
    'global.footer':'/views/global.footer.html',
    'home':'/views/home.html',
    'home.carousel':'/views/home.carousel.html',
    'contact':'/views/contact.html',
  };

  viewsService.returnView = function(partial) {
    var y = (typeof partial === 'undefined')?$route.current.template:partial;
    var x = $location.host().split(".");
    return (x.length>2)?(objExistsFilter(views[x[0]][y]))?views[x[0]][y]:views[y]:views[y];
  };

  viewsService.returnViews = function() {
  return views;
  };

  return viewsService;
}).

filters.js

filter('objExists', function () {
  return function (property) {
    try {
      return property;
    } catch (err) {
      return null
    }
  };
});

index.html

<!doctype html>
<html lang="en" ng-controller="AppController">
<body>
<ng-include src="returnView('global.header')"></ng-include>
<ng-include src="page"></ng-include>
<ng-include src="returnView('global.footer')"></ng-include>
</body>
</html>

- Dan Kanze

这正是我想要做的，即使用WordPress或MODX风格的网站，但将动态路由引入Angular。您能否提供一个可用的zip文件或其他东西，让我可以动手操作？谢谢！ - Zuriel

如果这很有帮助，请点赞，源代码就在那里。 - Dan Kanze

有没有一个起始项目我应该将其插入？单独使用似乎不完整？ - Zuriel

@ZurielAndrusyshyn 理解框架的基本原理就足以直观地了解这些组件如何相互配合。http://docs.angularjs.org/tutorial - Dan Kanze

谢谢，我是新手Angular并尝试过Backbone。我正在解决一些东西，我认为你已经解决了。如果不麻烦的话，你可以给我发电子邮件吗？我的联系信息在我的个人资料页面上。谢谢！ - Zuriel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- caffeinated.tech · Accepted Answer

这是一个晚回答，但我自己遇到了这个问题，但它证明了Dan的解决方案与ngView指令上的ngAnimate类相冲突，视图被显示，但ng-leave动画将立即应用并隐藏使用其动态路由打开的视图。

我在这里找到了完美的解决方案，并且可以在1.1.5+中使用。

在$routeProvider中，templateUrl值可以是函数，并传递路由参数：

app.config(function ($routeProvider) {
$routeProvider
    .when('/:page', {
         templateUrl: function(routeParams){
             return '/partials/'+routeParams.page+'.html';
        }
    })
});

虽然控制器不能作为一个函数给出，所以我的解决方案是像往常一样在模板html中用ng-controller="HomeCtrl"进行指定。

使用这种方法，我们可以按照惯例在Angular中进行路由。希望这可以帮助那些不热衷于手动添加每个路由到routeProvider的人。