[英]Load json file in javascript
I would like to use a external json file instead of my var states
. 我想使用外部json文件而不是我的
var states
。 Is this possible? 这可能吗? I tried with something like
var states = require('../config/states.json')
but it does not work, neither with $.getJSON(). 我尝试使用类似
var states = require('../config/states.json')
但var states = require('../config/states.json')
都无法使用$ .getJSON()。
function configState($stateProvider, $urlRouterProvider, $compileProvider) {
function resolveUrl(path){
var loadUrl = {
loadModule: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load(path);
}]
};
return loadUrl;
}
$compileProvider.debugInfoEnabled(true);
$urlRouterProvider.otherwise("/dashboard");
var states = {
"dashboard": {
"name": "dashboard",
"url": "/dashboard",
"templateUrl": "./views/dashboard.html",
"data": {
"pageTitle": "Dashboard",
}
},
"users": {
"name": "users",
"url": "/users",
"controller": "usersCtrl",
"templateUrl": "/users/views/users.html",
"resolve": "resolveUrl('/users/app/js/compiled/users_app.js')"
},
"invoices": {
"name": "invoices",
"url": "/invoices",
"controller": "invoicesCtrl",
"templateUrl": "/invoices/views/invoices.html",
"resolve": "resolveUrl('/invoices/app/js/compiled/invoices_app.js')"
},
"invoices.upload": {
"name": "invoices.upload",
"url": "/upload",
"controller": "invoicesCtrl",
"templateUrl": "/invoices/views/invoices.html",
"resolve": "resolveUrl('/invoices/app/js/compiled/invoices_app.js')"
},
"reports": {
"name": "reports",
"url": "/reports",
"templateUrl": "./views/reports.html",
"data": {
"pageTitle": "Reports",
}
}
};
for(var prop in states){
$stateProvider.state(prop, states[prop]);
}
}
angular
.module('homer')
.config(configState)
.run(function($rootScope, $state) {
$rootScope.$state = $state;
});
I think Browserify could be the solution here. 我认为Browserify可能是这里的解决方案。
So you would have two files 所以你会有两个文件
data.js data.js
module.exports = = {
"dashboard": {
"name": "dashboard",
"url": "/dashboard",
"templateUrl": "./views/dashboard.html",
"data": {
"pageTitle": "Dashboard",
}
},
"users": {
"name": "users",
"url": "/users",
"controller": "usersCtrl",
"templateUrl": "/users/views/users.html",
"resolve": "resolveUrl('/users/app/js/compiled/users_app.js')"
},
"invoices": {
"name": "invoices",
"url": "/invoices",
"controller": "invoicesCtrl",
"templateUrl": "/invoices/views/invoices.html",
"resolve": "resolveUrl('/invoices/app/js/compiled/invoices_app.js')"
},
"invoices.upload": {
"name": "invoices.upload",
"url": "/upload",
"controller": "invoicesCtrl",
"templateUrl": "/invoices/views/invoices.html",
"resolve": "resolveUrl('/invoices/app/js/compiled/invoices_app.js')"
},
"reports": {
"name": "reports",
"url": "/reports",
"templateUrl": "./views/reports.html",
"data": {
"pageTitle": "Reports",
}
}
};
main.js main.js
function configState($stateProvider, $urlRouterProvider, $compileProvider) {
function resolveUrl(path){
var loadUrl = {
loadModule: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load(path);
}]
};
return loadUrl;
}
$compileProvider.debugInfoEnabled(true);
$urlRouterProvider.otherwise("/dashboard");
var states = require('data.js');
for(var prop in states){
$stateProvider.state(prop, states[prop]);
}
}
angular
.module('homer')
.config(configState)
.run(function($rootScope, $state) {
$rootScope.$state = $state;
});
Then you can bundle everything in a single file with 然后,您可以将所有内容捆绑到一个文件中
browserify main.js -o bundle.js
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.