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可以成为解决方案。

所以你会有两个文件

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

在javascript中加载json文件

2 个答案: