How to require('config') file from server side to client in angular js?

Question

I have a config.js file inside myApp/config

I need to include it to one of my controllers in my public/js

I need to access it like config.db.url

How should I include it?

In my 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') || {});

In my config/development.js

'use strict';

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

In my js/main.js

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

In my 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/ provides the ability to use require() in the browser. You end up using it the same way in the browser as you do in node

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

Note: The rest of this post is slightly opinionated
I have used RequireJS before with angular to provide lazy-downloading, but in the end it was better to use pure AngularJS DI with browserify to handle CSS DI and to make bundling easier. You take a slightly bigger hit on page load, but it is all cached for later on.

If you use bower, there is a 'debowerify' transform that lets you do bower package requires without having to specify paths.

You don't have to create a config/paths/shims file for your node project. Browserify works the same way.