在JavaScript中加載json文件

Question

我想使用外部json文件而不是我的var states 。 這可能嗎？ 我嘗試使用類似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;
    });

Answer 1

我認為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": "/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

Answer 2

jQUery的getJSON()方法應該可以正常工作。 然后使用each()方法遍歷結果數據中的每個項目。

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