Загрузить json-файл в javascript

Question

Я бы хотел использовать внешний json-файл вместо моего var states. Это возможно? Я пытался с чем-то вроде 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": "https://stackoverflow.com/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; 
    }); 

Answer 1

Метод jQuery getJSON() должен работать нормально. Затем используйте метод each() для перехода по каждому элементу в результирующие данные.

$.getJSON("states.json", function(data) { 
    $.each(data, function(prop, val) { 
    $stateProvider.state(prop, val);  
    }); 
}); 

Answer 2

Я думаю, Browserify может быть решением здесь.

Таким образом, вы бы два файла

data.js

module.exports = = { 
     "dashboard": { 
      "name": "dashboard", 
      "url": "/dashboard", 
      "templateUrl": "./views/dashboard.html", 
      "data": { 
       "pageTitle": "Dashboard", 
      } 
     }, 
     "users": { 
      "name": "users", 
      "url": "/users", 
      "controller": "usersCtrl", 
      "templateUrl": "https://stackoverflow.com/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

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; 
    }); 

Тогда вы можете упаковать все в одном файле с

browserify main.js -o bundle.js