Javascript 如何使用AngularJS 1.5创建具有动态路由的动态页面

我有一个sidenav，我正在创建动态菜单并将其附加到sidenav中。我还必须动态创建附加菜单项的HTML页面和控制器。我的sidenav页面是一个单独的页面，有一个指令。 我也附上图像作为参考

以下是路由配置：

$stateProvider

.state('dashboards', {
url: "/dashboards",
templateUrl: "views/dashboard.html",
controller: 'dashboardCtrl',
data: { pageTitle: 'Dashboard' },
resolve: {
loadPlugin: function ($ocLazyLoad) {
return $ocLazyLoad.load([
{
name: 'angles',
files: ['js/plugins/chartJs/angles.js', 'js/plugins/chartJs/Chart.min.js']
},
{
name: 'angular-peity',
files: ['js/plugins/peity/jquery.peity.min.js', 'js/plugins/peity/angular-peity.js']
},
{
serie: true,
name: 'angular-flot',
files: [ 'js/plugins/flot/jquery.flot.js', 'js/plugins/flot/jquery.flot.time.js', 'js/plugins/flot/jquery.flot.tooltip.min.js', 'js/plugins/flot/jquery.flot.spline.js', 'js/plugins/flot/jquery.flot.resize.js', 'js/plugins/flot/jquery.flot.pie.js', 'js/plugins/flot/curvedLines.js', 'js/plugins/flot/angular-flot.js', ]
}
]);
}
}
})

.state('workspaceCreate', {
// abstract: true,
url: "/workspace",
templateUrl: "views/common/content.html",
})
.state('workspaceCreate.file', {
url: "/file",
controller : 'DynamicRoutes',
templateUrl : function (params) {
console.log(params); // check the console to see what are passed in here

//return a valid Url to the template, and angular will load it for you
}
})
.state('layouts', {
url: "/layouts",
templateUrl: "views/layouts.html",
data: { pageTitle: 'Layouts' },
})
.state('charts', {
abstract: true,
url: "/charts",
templateUrl: "views/common/content.html",
})
.state('charts.subworkspace', {
url: "/subworkspace",
templateUrl: "views/subworkspace.html",
data: { pageTitle: 'Flot chart' },
resolve: {
loadPlugin: function ($ocLazyLoad) {
return $ocLazyLoad.load([
{
serie: true,
name: 'angular-flot',
files: [ 'js/plugins/flot/jquery.flot.js', 'js/plugins/flot/jquery.flot.time.js', 'js/plugins/flot/jquery.flot.tooltip.min.js', 'js/plugins/flot/jquery.flot.spline.js', 'js/plugins/flot/jquery.flot.resize.js', 'js/plugins/flot/jquery.flot.pie.js', 'js/plugins/flot/curvedLines.js', 'js/plugins/flot/angular-flot.js', ]
}
]);
}
}
})

这是my sideNave.html，看起来像：

<li ng-class="{active: $state.includes('charts')}">
<a href="#"><i class="fa fa-bar-chart-o"></i> <span class="nav-label">{{ 'Sample' | translate }}</span><span class="fa arrow"></span></a>
<ul class="nav nav-second-level collapse" ng-class="{in: $state.includes('charts')}">
<li ui-sref-active="active"><a ui-sref="charts.subworkspace">Sub-workspace</a></li>
<li ui-sref-active="active"><a ui-sref="charts.emptyworkspace">Empty Workspace</a></li>
<li ui-sref-active="active"><a ui-sref="charts.c3charts">c3 charts</a></li>
<li ui-sref-active="active"><a ui-sref="charts.chartjs_chart">Chart.js</a></li>
<li ui-sref-active="active"><a ui-sref="charts.chartist_chart">Chartist</a></li>
<li ui-sref-active="active"><a ui-sref="charts.peity_chart">Peity Charts</a></li>
<li ui-sref-active="active"><a ui-sref="charts.sparkline_chart">Sparkline Charts</a></li>
</ul>
</li>

子工作区
空工作区
c3图表
Chart.js
图表列表
Peity图表
迷你图

---

提前感谢，我被这个问题困扰了两天。

您可以按照以下代码片段操作：

app.js

var mainApp =angular.module('mainApp ', ['mainApp .filters', 'mainApp .services', 'mainApp .directives']);

mainApp.config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/page/:name*', {
            templateUrl: function(url){
                return '/pages/' + url.name + '.html';
            },
            controller: 'AppController'
       });
    }
]);

URL

---

home.html将被模板化

您可以按照以下代码片段操作：

app.js

var mainApp =angular.module('mainApp ', ['mainApp .filters', 'mainApp .services', 'mainApp .directives']);

mainApp.config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/page/:name*', {
            templateUrl: function(url){
                return '/pages/' + url.name + '.html';
            },
            controller: 'AppController'
       });
    }
]);

URL

---

home.html将被模板化

感谢您的快速响应。当“abstract:true”时，我将能够创建下拉菜单。您提供的解决方案是针对父菜单以及如何编辑生成页面的内容。当然，我会修复它。但是如果可能的话，你能提出解决方案吗？谢谢你的快速回复。当“abstract:true”时，我将能够创建下拉菜单。您提供的解决方案是针对父菜单以及如何编辑生成页面的内容。当然，我会修复它。但如果可能的话，你能提出解决方案吗？