Estoy cargando estados para el $stateProvider desde un archivo .json, todo funciona, pero tal vez hay una mejor manera de hacerlo sin la llamada ajax de jQuery:
config.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;
});
Y mi archivo 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"
}
}
}
Por lo que he leído es mejor utilizar las funciones $q y $http de Angular. Así que traté de resolverlo con:
function resolveStates($http, $q) {
var deferred = $q.defer();
$http({
method:'GET',
url: STATES_FILE
}).success(function (data) {
deferred.resolve(data);
});
return deferred.promise;
}
Pero me da este error, Uncaught Error: [$injector:modulerr]