将变量从.net MVC4中的配置文件传递到Angular范围的最佳方法

时间:2015-05-28 06:58:35

标签: asp.net-mvc angularjs asp.net-mvc-4

我的web.config文件中有一些配置变量,如服务器URL:

<add key="ServerUrl" value="http://resapi01.com/"/>

我将此变量作为全局传递,因为我想从任何指令和我的Angular范围内的任何控制器访问它。我这样传递: 我在布局中得到了这个变量:

@{
    var serverUrl = @ConfigurationManager.AppSettings["ServerUrl"];
}

在我加入Angular脚本之前,我把它放在全球范围内:

  <script type="text/javascript">
        var serverUrl = '@serverUrl';
    </script>

我觉得这不是一个好方法......将全局变量传递给Angular范围的最佳做法是什么?

1 个答案:

答案 0 :(得分:1)

在主要MVC <script>文件的cshtml标记中放置主模块并添加值或常量,具体取决于您希望何时访问这些值。

<script>

(function (angular) {
   'use strict';

   angular.module('main.app', [
       // examples of external dependencies
       'ui.bootstrap',
       'ui.router',

       // examples of internal dependencies
       'login.module',
       'register.module'
  ])
      .constant('MvcValues', mvcValues());
  // constant allows use in the config and run phase of an angular application lifecycle

  function mvcValues() {
      return {
         'serverUrl': '@serverUrl'
      }
  }
})(angular);

</script>

// in another file
<script>

(function (angular) {
    'use strict';


    angular.module('login.module', [])
           .controller('loginController', ['MvcValues', loginController]);

    function loginController(MvcValues) {
        var vm = this;

        vm.serverUrl = MvcValues.serverUrl;
    }
})(angular);

</script>

有一种“极端”的选择。与你想要达到的目标相似。

如果您自己创建一个JS框架并在_Layout.cshtml之前将其包含在角度中,那么您可以在主.cshtml文件中设置其变量,而角度可以在整个过程中使用它。

框架(在您的_Layout.cs中或作为布局中包含的另一个js文件):

<script>
    (function (context) {

    context.my = {
      serverUrl: "hey"
    };


  })(this);
</script>

在主.cshtml

<script>
    my.serverUrl = '@serverUrl';
</script>

app.js

(function (angular) {
   'use strict';

   angular.module('main.app', [
       // examples of external dependencies
       'ui.bootstrap',
       'ui.router',

       // examples of internal dependencies
       'login.module',
       'register.module'
  ])
      .constant('MvcValues', my); //<-- see here we injected the framework into a constant
  // constant allows use in the config and run phase of an angular application lifecycle
})(angular);