How to show MVC in username using AngularJs
I am using MVC 5 / WebApi 2 and AngularJs. I want to show a logical username in my view. I know how to display this information using a razor, but how can I do it using Angular? So basically I need to do it with Angular.
<span >Logged In As: @Html.ActionLink(User.Identity.GetUserName(), "Manage", "Account", routeValues: null, htmlAttributes: new { title = "Manage", @style = "color:white;float:right" })</span>
apiUserController
public class apiUserController : ApiController
{
// GET api/<controller>
public List<ApplicationUser> Get()
{
using (var context = new ApplicationDbContext())
{
List<ApplicationUser> users = new List<ApplicationUser>();
users = context.ApplicationUsers
.ToList();
return users;
}
}
}
Update
public IHttpActionResult Get()
{
using (var context = new UserManager<ApplicationUser>(new UserStore<ApplicationUser>(new ApplicationDbContext())))
{
var user = context.FindById(User.Identity.GetUserId());
var loggedInUser = user.UserName;
return Ok(loggedInUser);
}
}
source to share
you need to create a service that returns your custom information.
angular.module('app').factory('Authentication', function ($resource) {
var resource = $resource('/user', {}, {
query: {
method: 'GET',
cache: true
}
});
return resource.get().$promise;
});
* note that you need to create and endpoint that will send you custom data as json using web api
Once you do that, you can use it in any controller (let's assume you have a homecontroller, it could be a header controller or whatever)
angular.module('app').controller('HomeController', ['$scope', 'Authentication', function ($scope, Authentication) {
$scope.authentication = Authentication;
}]);
then use it in your view like:
<span >Logged In As: {{authentication.user.username}} </span>
EDIT:
your api controller as you suggested might be like
public HttpResponseMessage Get()
{
var userId = getCurrentUserId(); //something like that
using (var context = new ApplicationDbContext())
{
ApplicationUser user = new ApplicationUser();
user = context.ApplicationUsers.SingleOrDefault(x=>x.id==userId);
return user;
}
}
try reading http://www.asp.net/web-api/overview/formats-and-model-binding/json-and-xml-serialization
for routing try reading this article (i think you are using web api 2)
http://www.asp.net/web-api/overview/web-api-routing-and-actions/attribute-routing-in-web-api-2
source to share
If you want to cheat a little, you can do this <head>
in your _Layout:
<script type="text/javascript">
(function(myApp) {
myApp.username = "@User.Identity.GetUserName()";
//optional
myApp.otherStuff = "@moreMvcStuff";
})(window.myApp = window.myApp || {});
</script>
Then start your angular app like this:
(function (myApp) {
"use strict";
//var app = set up your angular app
app.run(["$rootScope",
function ($rootScope) {
$rootScope.appSettings = {
username: myApp.username
};
}
]);
})(window.myApp = window.myApp || {});
What you do is create one value in the window myApp (or name it whatever you like) and pass it to your IIFE. This gives you access to it inside your angular script, the bot is only on the block. So if you want it to stick, you need to put it in a service or your rootScope.
In the app.run block you can paste it into your rootScope or wherever you want.
Now in your views, you can display it with {{appSettings.username}}
.
I call this "cheat" because it is specifically for MVC or webforms, not "angular". If you've ever migrated to a fully agnostic html / js client (no asp.net mvc) and web API, you'll need to do what is in the currently accepted answer.
source to share