I am working a MVC+angular front end project. In one scenario, the angular page will be launched with a HTTPS GET request, so, it display a log in page. In another scenario, we will get HTTPS POST request with user name and password in the post data. In this case, we need to have the MVC controller pass these information to the angular controller, and start the angular page view differently. I read several articles on how to pass data from MVC controller to the angular controller, angular view. Here is what I have
MVC controller:
public class HomeController : Controller
{
[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
public ActionResult Index(string name, string password)
{
if (name == null)
{
name = "test";
password = "pass";
}
UserInfoModel infoModel = new UserInfoModel(name, password);
var model = SerializeObject(infoModel);
return View(model);
}
public static IHtmlString SerializeObject(object value)
{
using (var stringWriter = new StringWriter())
using (var jsonWriter = new JsonTextWriter(stringWriter))
{
var serializer = new JsonSerializer
{
// Let's use camelCasing as is common practice in JavaScript
ContractResolver = new CamelCasePropertyNamesContractResolver()
};
// We don't want quotes around object names
jsonWriter.QuoteName = false;
serializer.Serialize(jsonWriter, value);
return new HtmlString(stringWriter.ToString());
}
}
Index.cshtml
<!DOCTYPE html>
<html ng-app="MVCApp" ng-controller="LandingPageController">
<body>
<h1>{{models.username}}</h1>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
@Scripts.Render("~/bundles/MVCApp")
@model IHtmlString
<script>
angular.module("MVCApp", []).value("data", @Html.Raw(Model));
</script>
</body>
</html>
Angular application MVCApp.js is like:
var MVCApp = angular.module('MVCApp', []);
MVCApp.controller('LandingPageController', LandingPageController);
Angular controller is like:
var LandingPageController = function ($scope, data) {
console.log(data);
$scope.models = {
username: data.userName
};
}
LandingPageController.$inject = ['$scope', 'data'];
When I run it, I can see the data did get passed to the LandingPageController. But if I look at the html of the page, I see the following in the html.
angular.module("MVCApp", []).value("data", {userName:"test",password:"pass"});
I don't won't the data(at least some portion, like password) to be visible/readable in the html.
Can I pass the data without having it visible in the html?
