我正在尝试向我的应用程序动态添加状态,并尝试使用ui路由器。我试着顺着这个线索走。AngularJS-UI路由器-如何配置动态视图
在我的例子中,已经有一些存在的状态,我需要将从json 读取的动态状态附加到该列表中
出于某种原因,我在尝试使用deferrIntercept()方法时,在$urlRouterProvider上遇到了注入器错误。在我的情况下,我使用的是angular 1.3,ui路由器版本是0.2.10。我看到你可以用犹太的方式创造状态。但是,我们可以将添加到已经静态配置的现有状态列表中吗
这是我的代码,感谢任何帮助,
MY模块.json,
[{
"name": "applications1",
"url": "^/templates/applications1",
"parent": "authenticated",
"abstract": false,
"views": [{
"name": "",
"templateUrl": "html/templates/basicLayout.html"
}, {
"name": "header@applications1",
"templateUrl": "html/templates/header.html"
}],
{
"name": "login",
"url": "/login",
"abstract": false,
"views": [{
"name": "",
"templateUrl": "html/admin/loginForm.html"
}]
}]
我的app.js
var $stateProviderRef = null;
var $urlRouterProviderRef = null;
var aModule = angular.module('App', [
'ui.bootstrap','ui.router'
]);
adminModule.run(['$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}])
adminModule.run(['$q', '$rootScope','$http', '$urlRouter',
function ($q, $rootScope, $http, $urlRouter)
{
$http
.get("modules.json")
.success(function(data)
{
angular.forEach(data, function (value, key)
{
var state = {
"url": value.url,
"parent" : value.parent,
"abstract": value.abstract,
"views": {}
};
angular.forEach(value.views, function (view)
{
state.views[view.name] = {
templateUrl : view.templateUrl,
};
});
$stateProviderRef.state(value.name, state);
});
// Configures $urlRouter's listener *after* your custom listener
$urlRouter.sync();
$urlRouter.listen();
});
}]);
aModule.config(['$locationProvider', '$stateProvider', '$urlRouterProvider', '$httpProvider', function ($locationProvider, $stateProvider, $urlRouterProvider, $httpProvider) {
// XSRF token naming
$httpProvider.defaults.xsrfHeaderName = 'x-dt-csrf-header';
$httpProvider.defaults.xsrfCookieName = 'X-CSRF-TOKEN';
$httpProvider.interceptors.push('httpInterceptor');
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'html/XXX/loginForm.html',
controller: 'AController'
})
.state('sAgree', {
url: '/serviceAgreement',
templateUrl: 'html/xxx/s.html',
controller: 'SController'
});
$urlRouterProvider.deferIntercept();
$urlRouterProvider.otherwise('/login');
$locationProvider.html5Mode({enabled: false});
$stateProviderRef = $stateProvider;
$urlRouterProviderRef = $urlRouterProvider;
}]);
有一个工作的plunker,上面有所有的片段。
如果我们想添加一些不存在的状态,我们应该检查$state.get('stateName')
$http
.get("modules.json")
.success(function(data) {
angular.forEach(data, function(value, key) {
// here we ask if there is a state with the same name
var getExistingState = $state.get(value.name)
// no need to continue, there is state (e.g. login) already
if(getExistingState !== null){
return;
}
var state = {
"url": value.url,
"parent": value.parent,
"abstract": value.abstract,
"views": {}
};
angular.forEach(value.views, function(view) {
state.views[view.name] = {
templateUrl: view.templateUrl,
};
});
$stateProviderRef.state(value.name, state);
});
// Configures $urlRouter's listener *after* your custom listener
$urlRouter.sync();
$urlRouter.listen();
});
请检查此处的操作