javascript - 在 JavaScript 中加载 json 文件

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": "/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可能是这里的解决方案。

所以你会有两个文件

数据.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