如何在角度js中要求(' config')文件从服务器端到客户端?

时间:2014-09-16 15:04:58

标签: angularjs variables 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') || {});

在我的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;

});

1 个答案:

答案 0 :(得分:0)

http://browserify.org/提供了在浏览器中使用require()的功能。您最终在浏览器中以与节点

中相同的方式使用它
var config = require('../../config/config');
console.log(config.db);

注意:这篇文章的其余部分略微自以为是 我之前使用了RequireJS和angular来提供懒惰下载,但最后使用纯粹的AngularJS DI和browserify来处理CSS DI并使捆绑变得更容易。你在页面加载时会受到更大的打击,但它会在以后缓存。

如果您使用bower,则会有一个'debowerify'变换,可让您无需指定路径即可满足bower包的要求。

您不必为节点项目创建config / paths / shims文件。 Browserify的工作方式相同。