如何在angular js中從服務器端到客戶端要求（'config'）文件？

Question

我在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') || {});

在我的config / development.js中

'use strict';

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

在我的js / main.js中

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

在我的js / app / main.js中

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;

});

Answer 1

http://browserify.org/提供了在瀏覽器中使用require（）的功能。 您最終在瀏覽器中使用的方式與在節點中使用方式相同

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

注意 ：本文的其余部分有些過分固執
我之前在Angular中使用了RequireJS來提供延遲下載，但是最后最好是將純AngularJS DI與browserify結合使用來處理CSS DI並簡化捆綁。 您對頁面加載的影響會稍大一些，但全部都將緩存以備后用。

如果使用Bower，則有一個'debowerify'轉換，可讓您執行Bower程序包所需的操作而不必指定路徑。

您不必為節點項目創建config / paths / shims文件。 Browserify的工作方式相同。