Angularjs 如何在js中从服务器端向客户端要求（'；config'；）文件？

我在myApp/config中有一个config.js文件

我需要将它包含到我的public/js中的一个控制器中

我需要像config.db.url一样访问它

我应该如何包括它

在我的config.js中

'use strict';
var _ = require('lodash');

// Load app configuration

module.exports = _.extend(
    require(__dirname + '/../config/env/all.js'),
    require(__dirname + '/../config/env/' + process.env.NODE_ENV + '.js') || {});

'use strict';

module.exports = {
    db: "mongodb://localhost:27017/schoolio",
    cloudinary: {
        cloud_name: ‘school-app',
        upload_preset : ‘school-images'        
    }
}

paths: {
'config' : '../../config/config'
}

define(['angular-xeditable','./controllers','./states'], function(xeditable,controllers,states) {
  var mod = angular.module("app.admin", ['xeditable', 
            'angularFileUpload','config']);
  mod.controller('controller.app.admin.main', controllers.main);
 return mod;
});


**In my js/app/controllers.js**

define(['./templates'], function(templates) {
    "use strict";

    var MyController = {
        main: function($scope, $rootScope) {

            function _changeLogo($files) {
                console.log("Inside change logo");
                console.log("upload preset");
                console.log(config.db.cloudinary.upload_preset);
                var file = $files[0]; // we're not interested in multiple file uploads here
                $scope.upload = $upload.upload({
                    url: "https://api.cloudinary.com/v1_1/" + config.db.cloudinary.cloud_name + "/image/upload",
                    data: {
                        upload_preset: config.db.cloudinary.upload_preset,
                        tags: 'myphotoalbum',
                        context: 'photo'
                    },
                    file: file
                }).progress(function(e) {
                    $scope.progress = Math.round((e.loaded * 100.0) / e.total);
                    $scope.status = "Uploading... " + $scope.progress + "%";
                    $scope.$apply();
                }).success(function(data, status, headers, config) {
                    $rootScope.photos = $rootScope.photos || [];
                    data.context = {
                        custom: {
                            photo: $scope.title
                        }
                    };
                    $scope.result = data;
                    $rootScope.photos.push(data);
                    $scope.$apply();
                });
            };

            function _init() {
                console.log("In Init of Admin Main");
                $rootScope.hideMasterHead = true;
                $scope.changeLogo = _changeLogo;
                // $('#matchadminmenu').sidebar('attach events', '.toggle.button');
            };

            _init();
        }   

    MyController.main.$inject = ['$scope', '$rootScope'];


    return MyController;

});

在我的config/development.js中

'use strict';
var _ = require('lodash');

// Load app configuration

module.exports = _.extend(
    require(__dirname + '/../config/env/all.js'),
    require(__dirname + '/../config/env/' + process.env.NODE_ENV + '.js') || {});

'use strict';

module.exports = {
    db: "mongodb://localhost:27017/schoolio",
    cloudinary: {
        cloud_name: ‘school-app',
        upload_preset : ‘school-images'        
    }
}

paths: {
'config' : '../../config/config'
}

define(['angular-xeditable','./controllers','./states'], function(xeditable,controllers,states) {
  var mod = angular.module("app.admin", ['xeditable', 
            'angularFileUpload','config']);
  mod.controller('controller.app.admin.main', controllers.main);
 return mod;
});


**In my js/app/controllers.js**

define(['./templates'], function(templates) {
    "use strict";

    var MyController = {
        main: function($scope, $rootScope) {

            function _changeLogo($files) {
                console.log("Inside change logo");
                console.log("upload preset");
                console.log(config.db.cloudinary.upload_preset);
                var file = $files[0]; // we're not interested in multiple file uploads here
                $scope.upload = $upload.upload({
                    url: "https://api.cloudinary.com/v1_1/" + config.db.cloudinary.cloud_name + "/image/upload",
                    data: {
                        upload_preset: config.db.cloudinary.upload_preset,
                        tags: 'myphotoalbum',
                        context: 'photo'
                    },
                    file: file
                }).progress(function(e) {
                    $scope.progress = Math.round((e.loaded * 100.0) / e.total);
                    $scope.status = "Uploading... " + $scope.progress + "%";
                    $scope.$apply();
                }).success(function(data, status, headers, config) {
                    $rootScope.photos = $rootScope.photos || [];
                    data.context = {
                        custom: {
                            photo: $scope.title
                        }
                    };
                    $scope.result = data;
                    $rootScope.photos.push(data);
                    $scope.$apply();
                });
            };

            function _init() {
                console.log("In Init of Admin Main");
                $rootScope.hideMasterHead = true;
                $scope.changeLogo = _changeLogo;
                // $('#matchadminmenu').sidebar('attach events', '.toggle.button');
            };

            _init();
        }   

    MyController.main.$inject = ['$scope', '$rootScope'];


    return MyController;

});

在我的js/main.js中

'use strict';
var _ = require('lodash');

// Load app configuration

module.exports = _.extend(
    require(__dirname + '/../config/env/all.js'),
    require(__dirname + '/../config/env/' + process.env.NODE_ENV + '.js') || {});

'use strict';

module.exports = {
    db: "mongodb://localhost:27017/schoolio",
    cloudinary: {
        cloud_name: ‘school-app',
        upload_preset : ‘school-images'        
    }
}

paths: {
'config' : '../../config/config'
}

define(['angular-xeditable','./controllers','./states'], function(xeditable,controllers,states) {
  var mod = angular.module("app.admin", ['xeditable', 
            'angularFileUpload','config']);
  mod.controller('controller.app.admin.main', controllers.main);
 return mod;
});


**In my js/app/controllers.js**

define(['./templates'], function(templates) {
    "use strict";

    var MyController = {
        main: function($scope, $rootScope) {

            function _changeLogo($files) {
                console.log("Inside change logo");
                console.log("upload preset");
                console.log(config.db.cloudinary.upload_preset);
                var file = $files[0]; // we're not interested in multiple file uploads here
                $scope.upload = $upload.upload({
                    url: "https://api.cloudinary.com/v1_1/" + config.db.cloudinary.cloud_name + "/image/upload",
                    data: {
                        upload_preset: config.db.cloudinary.upload_preset,
                        tags: 'myphotoalbum',
                        context: 'photo'
                    },
                    file: file
                }).progress(function(e) {
                    $scope.progress = Math.round((e.loaded * 100.0) / e.total);
                    $scope.status = "Uploading... " + $scope.progress + "%";
                    $scope.$apply();
                }).success(function(data, status, headers, config) {
                    $rootScope.photos = $rootScope.photos || [];
                    data.context = {
                        custom: {
                            photo: $scope.title
                        }
                    };
                    $scope.result = data;
                    $rootScope.photos.push(data);
                    $scope.$apply();
                });
            };

            function _init() {
                console.log("In Init of Admin Main");
                $rootScope.hideMasterHead = true;
                $scope.changeLogo = _changeLogo;
                // $('#matchadminmenu').sidebar('attach events', '.toggle.button');
            };

            _init();
        }   

    MyController.main.$inject = ['$scope', '$rootScope'];


    return MyController;

});

在我的js/app/main.js中

'use strict';
var _ = require('lodash');

// Load app configuration

module.exports = _.extend(
    require(__dirname + '/../config/env/all.js'),
    require(__dirname + '/../config/env/' + process.env.NODE_ENV + '.js') || {});

'use strict';

module.exports = {
    db: "mongodb://localhost:27017/schoolio",
    cloudinary: {
        cloud_name: ‘school-app',
        upload_preset : ‘school-images'        
    }
}

paths: {
'config' : '../../config/config'
}

define(['angular-xeditable','./controllers','./states'], function(xeditable,controllers,states) {
  var mod = angular.module("app.admin", ['xeditable', 
            'angularFileUpload','config']);
  mod.controller('controller.app.admin.main', controllers.main);
 return mod;
});


**In my js/app/controllers.js**

define(['./templates'], function(templates) {
    "use strict";

    var MyController = {
        main: function($scope, $rootScope) {

            function _changeLogo($files) {
                console.log("Inside change logo");
                console.log("upload preset");
                console.log(config.db.cloudinary.upload_preset);
                var file = $files[0]; // we're not interested in multiple file uploads here
                $scope.upload = $upload.upload({
                    url: "https://api.cloudinary.com/v1_1/" + config.db.cloudinary.cloud_name + "/image/upload",
                    data: {
                        upload_preset: config.db.cloudinary.upload_preset,
                        tags: 'myphotoalbum',
                        context: 'photo'
                    },
                    file: file
                }).progress(function(e) {
                    $scope.progress = Math.round((e.loaded * 100.0) / e.total);
                    $scope.status = "Uploading... " + $scope.progress + "%";
                    $scope.$apply();
                }).success(function(data, status, headers, config) {
                    $rootScope.photos = $rootScope.photos || [];
                    data.context = {
                        custom: {
                            photo: $scope.title
                        }
                    };
                    $scope.result = data;
                    $rootScope.photos.push(data);
                    $scope.$apply();
                });
            };

            function _init() {
                console.log("In Init of Admin Main");
                $rootScope.hideMasterHead = true;
                $scope.changeLogo = _changeLogo;
                // $('#matchadminmenu').sidebar('attach events', '.toggle.button');
            };

            _init();
        }   

    MyController.main.$inject = ['$scope', '$rootScope'];


    return MyController;

});

提供在浏览器中使用require（）的功能。在浏览器中使用它的方式与在节点中使用它的方式相同

var config = require('../../config/config');
console.log(config.db);

注意：这篇文章的其余部分有点固执己见
我以前在angular中使用过RequireJS来提供延迟下载，但最后最好使用纯AngularJS DI和browserify来处理CSS DI并使绑定更容易。您在页面加载上的点击率稍高，但它会被缓存以备以后使用

如果您使用bower，则有一个“debowerify”转换，它允许您执行bower包所需的操作，而无需指定路径

---

您不必为节点项目创建配置/路径/垫片文件。Browserify的工作方式也一样。

也许您已经知道，但不建议将requirejs与angularjs一起使用