从C#MVC模型中设置AngularJS$provide.constant值的最佳方法是什么？_C#_Asp.net Mvc_Angularjs_Asp.net Web Api

从C#MVC模型中设置AngularJS$provide.constant值的最佳方法是什么？

c# asp.net-mvc angularjs asp.net-web-api

从C#MVC模型中设置AngularJS$provide.constant值的最佳方法是什么？,c#,asp.net-mvc,angularjs,asp.net-web-api,C#,Asp.net Mvc,Angularjs,Asp.net Web Api,我有一个带有.NETMVC/WebAPI后端的AngularJS应用程序。我有一个MVC动作，它提供了加载AngularJS应用程序的主HTML页面。此MVC操作从Web.config和数据库加载多个应用程序设置，并将它们作为模型返回到视图。我正在寻找一种好方法，在我的AngularJS.config方法中将那些MVCModel值设置为$provide.constant值 MVC控制器方法： public ActionResult Index() { var model = new In

我有一个带有.NETMVC/WebAPI后端的AngularJS应用程序。我有一个MVC动作，它提供了加载AngularJS应用程序的主HTML页面。此MVC操作从Web.config和数据库加载多个应用程序设置，并将它们作为模型返回到视图。我正在寻找一种好方法，在我的AngularJS

.config

方法中将那些MVC

Model

值设置为

$provide.constant

值

MVC控制器方法：

public ActionResult Index() {
    var model = new IndexViewModel {
        Uri1 = GetUri1(),
        Uri2 = GetUri2()
        //...etc
    };
    return View(model);
}

My MVC\u Layout.cshtml：

@model IndexViewModel
<!doctype html>
<html data-ng-app='myApp'>
<head>
    @Styles.Render("~/content/css")
    <script type='text/javascript'>
        @if (Model != null)    //May be null on error page
        {
            <text>
                var modelExists = true;
                var uri1 = '@Model.Uri1';
                var uri2 = '@Model.Uri2';
            </text>
        }
        else
        {
            <text>
                var modelExists = false;
            </text>
        }
    </script>
</head>
<body>
    <!-- Body omitted -->
    @Scripts.Render("~/bundles/angular", "~/bundles/app") //Loads angular library and my application
</body>

这是我的代码的一个大大简化的版本，但我认为它说明了我的担忧。有没有更好的或标准的方法，我忽略了？我不喜欢我的

\u Layout.cshtml

中的代码，因为我有更多的配置值。

如果你有一堆配置值，并且你不介意额外的网络调用，一种方法是创建一个MVC视图，将设置作为角度常数返回

using System.Web.Script.Serialization;

// ...

public ActionResult Settings(string angularModuleName = "myApp")
{
    var settings = new 
    {
        uri1 = GetUri1(),
        uri2 = GetUri1()
        // ...
    };

    var serializer = new JavaScriptSerializer();
    var json = serializer.Serialize(settings);

    var settingsVm = new SettingsViewModel
    {
        SettingsJson = json,
        AngularModuleName = angularModuleName
    };

    Response.ContentType = "text/javascript";
    return View(settingsVm);
}

在剃须刀看来

@model MyApp.SettingsViewModel
@{
    Layout = null;
}

(function (app) {
    app.constant('settings', @Html.Raw(Model.SettingsJson));
})(angular.module('@Model.AngularModuleName'));

在需要文件的页面中，只需添加一个脚本标记以引入常量

@Scripts.Render("~/bundles/angular", "~/bundles/app") //Loads angular library and my application
<script src="/home/settings?appname=foo"></scripts>

现在，您可以将

设置

服务注入角代码中的任何位置。没有任何东西泄漏到全局范围内

您也可以使用此技术将设置直接注入到特定的HTML视图中，但我通常更喜欢将其拆分，以便仅在需要时包含它。

将带有这些变量的对象作为属性传递，而不是单个变量。那么，您所需要的只是应用程序中的对象引用，您的意思是将常量设置为具有属性的对象吗？据我所知，AngularJS$provide.constant值不能有属性。我的意思是类似于

var-appConfig={modeleexists:true，ur1:'@Model.Uri1'..}

。常量也可以是一个对象，但由于全局命名空间的原因，您也可以在任何地方访问该数据。对于常量可以是对象，alsoi可能是错误的，但有许多其他方法可以将我建议的配置对象传递到应用程序中…

value

，通过服务，创建提供者等等，我现在通过$window.uri1访问变量，但我不喜欢这样，因为它会污染窗口空间。我同意你的建议，让appConfig成为一个对象肯定会让窗口更干净，但我希望有更好的方法。我非常喜欢这个想法，我正在尝试，但是我没有看到

JavaScriptSerializer

类。我甚至没有看到要添加的

System.Web.Scripts

引用。这是从哪里来的？它是

System.Web.Script

，我相信它应该在

System.Web.Extensions

中。根据web项目模板的不同，该dll可能已被引用。另外，如果你已经在使用JSON.NET，你可以用它来序列化。我只是用JSON.NET来序列化它。谢谢Anthony，我真的很喜欢这个解决方案，它帮助我大大清理了我的应用程序。这正是我想要的，也是出于完全相同的原因+1我们好！此后，我在博客中详细介绍了这一点，并开始使用相同的技术进行客户端本地化（为angular序列化resx文件）。。。

@Scripts.Render("~/bundles/angular", "~/bundles/app") //Loads angular library and my application
<script src="/home/settings?appname=foo"></scripts>

(function (app) {
    app.constant('settings', {
        "uri1": "https://uri1",
        "uri2": "https://uri2"
    });
})(angular.module('foo'));