我有一个带有 .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/