我已经很难找到任何关于通过数据库动态使用ui路由器的文档。 Par为课程，一切都是硬编码。
我的Json：
[
{
"name": "root","url": "/","parent": "","abstract": true,"views": [
{"name": "header","templateUrl": "/app/views/header.html"},{"name" :"footer","templateUrl": "/app/views/footer.html" }
]
},{
"name": "home","url": "","abstract" : false,"parent": "root","views": [
{"name": "container@","templateUrl": "/app/views/content1.html"},{"name" :"left@","templateUrl": "/app/views/left1.html" }
]
},{
"name": "about","url": "/about","abstract": false,"views": [
{"name": "container@","templateUrl": "/app/views/content2.html"},"templateUrl": "/app/views/left2.html" }
]
}
]
我的应用程序：
'use strict';
var $stateProviderRef = null;
var $urlRouterProviderRef = null;
var app = angular.module('app',['ngRoute','ui.router']);
app.factory('menuItems',function ($http) {
return {
all: function () {
return $http({
url: '/app/jsonData/efstates.js',method: 'GET'
});
}
};
});
app.config(function ($locationProvider,$urlRouterProvider,$stateProvider) {
$urlRouterProviderRef = $urlRouterProvider;
$stateProviderRef = $stateProvider;
$locationProvider.html5Mode(false);
$urlRouterProviderRef.otherwise("/");
});
app.run(['$q','$rootScope','$state','menuItems',function ($q,$rootScope,$state,menuItems) {
menuItems.all().success(function (data) {
angular.forEach(data,function (value,key) {
$stateProviderRef.state(name = value.name,{
"url": value.url,"parent" : value.parent,"abstract": value.abstract,"views": {
// do not want the below hard coded,I want to loop
// through the respective json array objects and populate state & views
// I can do this with everything but views.
// first loop
'header': { 'templateUrl': '/app/views/header.html' },'footer': { 'templateUrl': '/app/views/footer.html' },// second loop
'left@': { 'templateUrl': '/app/views/left1.html' },'container@': { 'templateUrl': '/app/views/container1.html' },// third loop
'left@': { 'templateUrl': '/app/views/left2.html' },'container@': { 'templateUrl': '/app/views/container2.html' },}
});
});
$state.go("home");
});
}]);
我动态地配置我的视图。有任何想法吗？
更新：
我为RadimKöhler的答案为任何感兴趣的人做了一个Plunker。我感谢帮助。
我认为ui路由器是角度的事实路由器，通过动态，它将使一个大型的应用程序更容易管理。
有一个
plunker显示如何我们可以动态配置视图。 .run()的更新版本应该是这样的：
app.run(['$q','$http',$http)
{
$http.get("myJson.json")
.success(function(data)
{
angular.forEach(data,key)
{
var state = {
"url": value.url,"views": {}
};
// here we configure the views
angular.forEach(value.views,function (view)
{
state.views[view.name] = {
templateUrl : view.templateUrl,};
});
$stateProviderRef.state(value.name,state);
});
$state.go("home");
});
}]);
检查所有在行动here
