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>



 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
            return users;




 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

2 answers

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>



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=>;
            return user;



try reading

for routing try reading this article (i think you are using web api 2)



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()";
        myApp.otherStuff = "@moreMvcStuff";
    })(window.myApp = window.myApp || {});


Then start your angular app like this:

(function (myApp) {
    "use strict";

    //var app = set up your angular app["$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 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 mvc) and web API, you'll need to do what is in the currently accepted answer.



All Articles