AngularJS - 动态$ StateProvider随着UI的路由器视图和$ ocLazyLoad Resolves决定语法 [英] AngularJS - Dynamic $StateProvider With UI-Router Views and $ocLazyLoad Resolves Syntax
问题描述
我目前已经被问我的问题的一个良好的工作静态版本。问题是，我似乎不能正确格式化JSON试图用$ StateProvider在一个循环的时候。我不知道的部分没有被格式化正是正确引起未定义是不是一个函数的错误。但是，下面是我的工作静态定义视图和使用$ ocLazyLoad解决。这工作，真的不知道为什么在一个循环我的JSON版本的版本不？
I currently have a good working static version of my question being asked. The issue is that I can't seem to format the JSON properly when trying to use $StateProvider in a loop. I'm not sure exactly what part isn't being formatted properly causing an "undefined is not a function" error. But below is my working static State definition with views and resolved using $ocLazyLoad. This works, really not sure why my JSON version version in a loop does not?
工作静态版本 - 这肯定对我的作品
// ABSTRACT APP LAYOUT - VIEW THAT DEFINES ENTIRE LAYOUT STRUCTURE
$stateProvider
.state('app', {
abstract: true,
controller: 'LayoutCtrl',
templateUrl: 'app/components/core/layout/layout.html'
});
// VIEWS
// CURRENT LAZY LOADING WAS REFERENCED FROM HERE - https://egghead.io/lessons/angularjs-lazy-loading-modules-with-ui-router-and-oclazyload
$stateProvider
.state('app.dashboard', {
views: {
'feature': {
templateUrl: 'lazyload/components/core/features/dashboard/dashboard.html',
controller: "DashboardCtrl as dashboard",
resolve: {
dashboard: function ($ocLazyLoad) {
return $ocLazyLoad.load(
{
name: "dashboard",
files: ["lazyload/components/core/features/dashboard/dashboard-controller.js"]
}
)
}
}
}
}
})
.state('app.other-feature', {
views: {
'feature': {
templateUrl: 'lazyload/components/core/features/other-feature/other-feature.html',
controller: "OtherFeatureCtrl as otherFeature",
resolve: {
otherFeature: function ($ocLazyLoad) {
return $ocLazyLoad.load(
{
name: "otherFeature",
files: ["lazyload/components/core/features/other-feature/other-feature.js"]
}
)
}
}
}
}
});
我想清楚，静态版本不工作，这是环形的版本，我似乎无法获得工作。也许我没有做某种数组符号为正常工作还是什么？任何帮助是极大AP preciated！
I'd like to be clear, the static version does work, it's the looped version I can't seem to get working. Perhaps I'm not doing some kind of array notation for the function properly or something? Any help is greatly appreciated!
推荐答案
其实，我得到了这个工作，并希望分享的情况下，任何人的答案，code格式有兴趣看到一个循环，增加一个工作独立阵列抽象状态和儿童状态与使用视图解决了延迟加载控制器和文件之前动态路由是通过$ ocLazyLoad模块加载。
I actually got this working and wanted to share the answer and code formatting in case anyone was interested in seeing a working standalone array with a loop that adds an Abstract state and child states with views that use resolves that lazy load controllers and files dynamically before the route is loaded via the $ocLazyLoad module.
我想通了$ C $单独的C可以帮助人在那里奋斗不到我做到了。
I figured the code alone might help someone out there struggle less than I did.
var states = [
{ "name": "app", "abstract": true, "url": "", "templateUrl": "app/components/core/layout/layout.html", "controller": "LayoutCtrl" },
{
"name": "app.dashboard",
"views": {
"feature": {
"templateUrl": "lazyload/components/core/features/dashboard/dashboard.html",
"controller": "DashboardCtrl as dashboard",
"resolve": {
"dashboard": function ($ocLazyLoad) {
return $ocLazyLoad.load(
{
"name": "dashboard",
"files": ["lazyload/components/core/features/dashboard/dashboard-controller.js"]
}
)
}
}
}
}
},
{
"name": "app.associations_hospital-surgeon",
"views": {
"feature": {
"templateUrl": "lazyload/components/core/features/other-feature/other-feature.html",
"controller": "OtherFeatureCtrl as otherFeature",
"resolve": {
"otherFeature": function ($ocLazyLoad) {
return $ocLazyLoad.load(
{
"name": "otherFeature",
"files": ["lazyload/components/core/features/other-feature/other-feature.js"]
}
)
}
}
}
}
}
];
angular.forEach(states, function (state) {
console.log('state --------------------------------------------------------------------------');
console.log(state);
$stateProvider.state(state.name, state);
});
在这里，我装点JSON，因此它可以从服务器加载，但由于功能是无效的JSON文件这似乎用用来定义使用时连接功能的自定义数据属性为我工作。这让我从外部加载的文件或从服务器仍然可以通过$ ocLazyLoad使用惰性加载在需要时的功能。
And here I decorate the JSON so it can be loaded from a server, but since functions aren't valid in JSON files this seemed to work for me using custom data properties used to define the function attached when used. This allowed me to load the file externally or from a server and still use the lazyloading via $ocLazyLoad as a function when needed.
var states = [
{ "name": "app", "abstract": true, "url": "", "templateUrl": "app/components/core/layout/layout.html", "controller": "LayoutCtrl" },
{
"name": "app.dashboard",
"views": {
"feature": {
"templateUrl": "lazyload/components/core/features/other-feature/other-feature.html",
"controller": "DashboardCtrl as dashboard",
"resolve": {},
"data": {
"controllerAlias": "dashboard",
"controllerFiles": ["lazyload/components/core/features/other-feature/other-feature.js"]
}
}
}
},
{
"name": "app.associations_hospital-surgeon",
"views": {
"feature": {
"templateUrl": "lazyload/components/core/features/associations/other-feature.html",
"controller": "OtherFeatureCtrl as otherFeature",
"resolve": {},
"data": {
"controllerAlias": "otherFeature",
"controllerFiles": ["lazyload/components/core/features/other-feature/other-feature.js"]
}
}
}
}
];
angular.forEach(states, function (state) {
console.log('state --------------------------------------------------------------------------');
try{
console.log(state.views.feature.resolve);
state.views.feature.resolve[state.views.feature.data.controllerAlias] = function($ocLazyLoad){return $ocLazyLoad.load({"name": state.views.feature.data.controllerAlias,"files": state.views.feature.data.controllerFiles})};
}catch(e){
}
$stateProvider.state(state.name, state);
});
这篇关于AngularJS - 动态$ StateProvider随着UI的路由器视图和$ ocLazyLoad Resolves决定语法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
