gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-30 00:40:46 24 4
gpt4 key购买 nike

我有一个带有 .NET MVC/WebAPI 后端的 AngularJS 应用程序。我有一个 MVC Action ,它为加载我的 AngularJS 应用程序的主 HTML 页面提供服务。此 MVC 操作从 Web.config 和数据库加载多个应用程序设置,并将它们作为模型返回到 View 。我正在寻找一种在我的 AngularJS .config 方法中将这些 MVC Model 值设置为 $provide.constant 值的好方法。

MVC Controller 方法:

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

我的 MVC _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>

应用程序.js:

"use strict";
angular.module('myApp', [])
.config(['$provide' '$window', function ($provide, $window) {
if ($window.modelExists){
$provide.constant('const_Uri1', $window.uri1);
$provide.constant('const_URi2', $window.uri2);
}
}]);

这是我的代码的一个大大简化的版本,但我认为它说明了我的担忧。有没有我忽略的更好或标准的方法?我不喜欢我的 _Layout.cshtml 中的代码,因为我有更多的配置值。

最佳答案

如果您有一堆配置值并且您不介意额外的网络调用,一种方法是创建一个 MVC View ,将设置作为 Angular 常量返回...

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);
}

在 Razor View 中...

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

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

在需要文件的页面中,添加一个script标签,引入常量...

@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'));

现在您可以在 Angular 代码中的任何位置注入(inject) settings 服务。没有任何内容泄漏到全局范围内。

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

关于c# - 从 C# MVC 模型设置 AngularJS $provide.constant 值的最佳方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24761611/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com