AngularJS - 带有 UI-Router 视图和 $ocLazyLoad 解析语法的动态 $StateProvider [英] AngularJS - Dynamic $StateProvider With UI-Router Views and $ocLazyLoad Resolves Syntax
问题描述
我目前有一个很好的静态版本可以解决我的问题.问题是当我尝试在循环中使用 $StateProvider 时，我似乎无法正确格式化 JSON.我不确定到底是哪个部分没有正确格式化导致未定义不是函数"错误.但下面是我的工作静态状态定义，带有视图并使用 $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"]
}
)
}
}
}
}
});
我想说清楚，静态版本确实有效，它是循环版本，我似乎无法正常工作.也许我没有正确地为函数做某种数组表示法之类的?非常感谢任何帮助！
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!
推荐答案
我实际上得到了这个工作，并想分享答案和代码格式，以防有人有兴趣看到一个工作的独立数组，其中包含一个添加抽象状态的循环和视图的子状态在通过 $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.
我认为单独的代码可能会帮助那些比我更努力的人.
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 - 带有 UI-Router 视图和 $ocLazyLoad 解析语法的动态 $StateProvider的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
