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

【问题标题】：Best way to pass variable from config file in .net MVC4 to Angular scope将变量从 .net MVC4 中的配置文件传递到 Angular 范围的最佳方法
【发布时间】：2015-05-28 06:58:34
【问题描述】：

我的 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 范围的最佳做法是什么？

【问题讨论】：

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

【解决方案1】：

在主 MVC cshtml 文件的 <script> 标记中，放置主模块并根据您想要访问这些值的时间添加值或常量。

<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 中的 angular 之前，那么您可以在主 .cshtml 文件中设置其变量，并且 angular 可以在整个过程中使用它。

框架（在您的 _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);

【讨论】：

嗨，卡勒姆·林宁顿。谢谢您的回复。我不能在角度文件中使用 Razor 语法。我的角度控制器和指令是单独的 .js 文件。它们包含在 Layout.cshtml 中并由 razor 呈现，但 Razor 语法如“@serverUrl”仅在 .cshtml 视图中工作......
这就是为什么我说将 Angular 应用程序初始化放入主 cshtml 中。另一种选择是从主 cshtml 中提升角度。
@OlegYudovich 我已经提出了另一个替代解决方案