我正在从 .json 文件中为 $stateProvider 加载状态,一切正常,但也许有更好的方法可以在没有 jQuery ajax 调用的情况下做到这一点:
配置.js
var STATES_FILE = '../config/states.json';
var statesObj,
states;
function configState($stateProvider, $urlRouterProvider, $compileProvider) {
function resolveUrl(path){
var loadUrl = { // Any property in resolve should return a promise and is executed before the view is loaded
loadModule: ['$ocLazyLoad', function($ocLazyLoad) {
// you can lazy load files for an existing module
return $ocLazyLoad.load(path);
}]
};
return loadUrl;
}
// Optimize load start with remove binding information inside the DOM element
$compileProvider.debugInfoEnabled(true);
// Set default state
$urlRouterProvider.otherwise("/dashboard");
// Get states from configuration file
states = $.ajax({
type: 'GET',
url: STATES_FILE,
async: false
})
.responseText;
statesObj = eval("(" + states + ")")
// Load states from states configuration
for(var prop in statesObj){
$stateProvider.state(prop, statesObj[prop]);
}
}
angular
.module('homer')
.config(configState)
.run(function($rootScope, $state) {
$rootScope.$state = $state;
});
还有我的 states.json 文件:
{
"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"
}
}
}
根据我的阅读,最好使用 Angular 的 $q 和 $http 函数。所以我试图解决它:
function resolveStates($http, $q) {
var deferred = $q.defer();
$http({
method:'GET',
url: STATES_FILE
}).success(function (data) {
deferred.resolve(data);
});
return deferred.promise;
}
但它给了我这个错误,Uncaught Error: [$injector:modulerr]
get
您可以通过使用$http
角度服务来拨打电话。我建议您制作一个或多或少类似于以下内容的控制器:
并在控制器内部提出您的请求。
有关该服务的更多信息,
$http
您可以查看其文档您可以使用角度工厂,它对我有用。你把它作为一个承诺带入控制器。
例如,从 states.json 文件中获取数据
工厂:
控制器: