AngularJS动态路由

2018-06-27 18:27:46

我目前有一个内置路由的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，您可以在/ pages目录中复制和添加新的html文件。

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

在理想的世界中，路由模式将是：

$ routeProvider.when（'/ pagename '，{templateUrl：'/ pages / pagename .html'，controller：CMSController}）;

因此，如果我的新页面名称是“contact.html”，我希望角色选择“/ 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（）提取路由参数“

也

何时（路径，路线）：方法

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

好的解决了它。

将解决方案添加到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到我的浏览器中，然后嗨presto portfolio.html被显示出来....

更新已添加的$ apply和$ compile到html中，以便可以注入动态内容。

我认为做这种事最简单的方法是稍后解决路线问题，例如，您可以通过json询问路线。看看我在$ configProvider期间通过$ provide创建了一个工厂，这样我就可以在运行阶段继续使用$ 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();
    });
});

链接地址: http://www.djcxy.com/p/77615.html

上一篇: AngularJS dynamic routing

下一篇: AngularJS Dynamically Load Controller and Template based on Route