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

Question

我有一个侧导航，我正在创建动态菜单并将其附加到侧导航中。我还必须动态创建附加菜单项的 HTML 页面和 Controller 。我的侧导航页面是一个单独的页面并且有一个指令。 我还附上了图片以供引用。

下面是路由配置:

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

这是我的 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>

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

Answer 1

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

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

网址 http://localhost:53368/#/page/home

home.html 将被模板化