Best way to pass variable from config file in .net MVC4 to Angular scope

Question

I have some config variables in my web.config file, like server url:

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

And i pass this variable as global, because i want access this from any directive and any controller in my Angular scope. And i pass this like that: I get this variable in my layout:

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

And i put it on global scope, before including my Angular scripts:

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

I feel is not a good way to do that... What the best practice to pass global variables to Angular scope?

Callum Linington · Accepted Answer · 2015-05-28 07:53:47Z

1

In the <script> tag of the main MVC cshtml file put the main module and add a values or constant depending on when you want access to these values.

<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>

There is an "extreme" alternative. Similar to what you were trying to achieve.

If you create yourself a JS framework and include it before angular in your _Layout.cshtml then you can set its variable in the main .cshtml file and angular can use it throughout.

Framework (in your _Layout.cs or as another js file included in the layout):

<script>
    (function (context) {

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


  })(this);
</script>

In main .cshtml:

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

In your 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);

edited May 28, 2015 at 7:53

answered May 28, 2015 at 7:04

Callum Linington

14.4k14 gold badges80 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

freethinker Over a year ago

Hi Callum Linington. Thanks for reply. I can't use Razor syntax inside angular files. My angular controllers and directives is separate .js files. They included in Layout.cshtml and rendered by razor, but Razor syntax such '@serverUrl' working only in .cshtml views...

Callum Linington Over a year ago

Thats why I said put the angular app initialisation into the main cshtml. The other alternative is to boostrap angular from the main cshtml.

Callum Linington Over a year ago

@OlegYudovich I have put another alternate solution

Collectives™ on Stack Overflow

Best way to pass variable from config file in .net MVC4 to Angular scope

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related